首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

用 JavaServer Faces 2 实现可扩展 UI (7)

用 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 按钮。
返回列表