用 JavaServer Faces 2 实现可扩展 UI （7）
|
- UID
- 1066743
|
用 JavaServer Faces 2 实现可扩展 UI （7）
请注意， 中的 icon 组件用 <h:graphicImage> 的 styleClass 属性为其图像指定了一个 CSS 类。该 CSS 类的名字被硬编码为 icon，所以您就能够指定一个具有该名称的 CSS 类，JSF 将为应用程序中的所有图标使用该类。但是如果您想要覆盖该 CSS 类名，又该如何呢？在这种情况下，我可以为该 CSS 添加另一个属性并提供一个默认，可供 JSF 在未指定属性的时候使用。清单 14 给出了该属性：
清单 14. 重构后的 icon 组件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
...
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
...
<composite:attribute name="styleClass" default="icon" required="false"/>
...
</composite:interface>
<composite:implementation>
...
<h:graphicImage value="#{cc.attrs.image}"
styleClass="#{cc.attrs.styleClass}"/>
...
</composite:implementation>
</html>
|
在 中，我已经向这个图标组件的界面添加了一个属性，名为 styleClass，并已经在此组件的实现中引用了该属性。有了这种更改，现在就可以为此图标的图像指定一个可选的 CSS 类，如下所示：
1
2
3
| <util:icon actionMethod="#{places.logout}"
image="#{resource['images:back-arrow.jpg']}"
styleClass="customIconClass"/>
|
如果不能指定 styleClass 属性，JSF 将使用默认值 icon。
login 组件：一个完全可配置的组件有了 JSF 2，就可以实现完全可配置的复合组件。例如，places 应用程序就包含了一个 login 组件，如图 7 所示：
图 7. places 应用程序的 login 组件 清单 15 显示了这个 places 应用程序是如何使用 login 组件的：
清单 15. 使用 login 组件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
...
xmlns:comp="http://java.sun.com/jsf/composite/component/util">
<util:login loginPrompt="#{msgs.loginPrompt}"
namePrompt="#{msgs.namePrompt}"
passwordPrompt="#{msgs.passwordPrompt}"
loginAction="#{user.login}"
loginButtonText="#{msgs.loginButtonText}"
managedBean="#{user}">
<f:actionListener for="loginButton"
type="com.clarity.LoginActionListener"/>
</util:login>
...
</html>
|
不仅参数化 login 组件的属性，比如名字和密码提示，它还将一个动作侦听器附加到了此组件的 Log In 按钮。 |
|
|
|
|
|
