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

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

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

icon 组件:一个简单的复合组件places 应用程序使用了图 6 所示的这两个图标:
图 6. places 应用程序的图标每个图标都是一个链接。当用户单击  左侧的图标时,JSF 就会显示当前视图的标记,而激活右侧图标则会使用户登出此应用程序。
可以为链接指定一个 CSS 类名和图像,并且还可以向链接附加方法。当用户单击一个被关联的链接时,JSF 就会调用那些方法。
清单 11 给出了 icon 组件是如何被用来在 places 应用程序中显示标记的:
清单 11. 使用 icon 组件显示标记
1
2
3
4
5
6
7
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:util="http://java.sun.com/jsf/composite/components/util">

  <util:icon actionMethod="#{sourceViewer.showSource}"
                      image="#{resource['images:disk-icon.jpg']}"/>
  ...
</html>




清单 12 给出了如何使用 icon 组件执行登出:
清单 12. 使用 icon 组件执行登出
1
2
3
4
5
6
7
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:util="http://java.sun.com/jsf/composite/components/util">

  <util:icon actionMethod="#{places.logout}"
                      image="#{resource['images:back-arrow.jpg']}"/>
  ...
</html>




清单 13 给出了 icon 组件的代码:
清单 13. icon 组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite">
     
  <!-- INTERFACE -->
  <composite:interface>
    <composite:attribute name="image"/>
    <composite:attribute name="actionMethod"
             method-signature="java.lang.String action()"/>        
  </composite:interface>

  <!-- IMPLEMENTATION -->         
    <composite:implementation>
    <h:form>  
      <h:commandLink action="#{cc.attrs.actionMethod}" immediate="true">

      <h:graphicImage value="#{cc.attrs.image}"
                styleClass="icon"/>

      </h:commandLink>
    </h:form>
  </composite:implementation>
</html>




与其他复合组件类似, 中的 icon 组件包含两节:<composite:interface> 和 <composite:implementation>。<composite:interface> 节定义了一个界面,可用来配置此组件。icon 组件具有两个属性:image 和 actionMethod,前者定义了组件的外观,后者定义了组件的行为。
<composite:implementation> 节包含组件的实现。它使用 #{cc.attrs.ATTRIBUTE_NAME} 表达式来访问组件的界面内定义的属性。(cc 是 JSF 2 表达式语言中的保留关键字,代表的是复合组件。)
返回列表