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

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

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

清单 20 给出了 map 组件:清单 20. map 组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:composite="http://java.sun.com/jsf/composite">
     
   <!-- INTERFACE -->
   <composite:interface>
     <composite:attribute name="title"/>
   </composite:interface>
         
   <!-- IMPLEMENTATION -->
   <composite:implementation>
      <div class="map">
      <div style="padding-bottom: 10px;">
        <hutputText value="#{cc.attrs.title}"
                      style="color: blue"/>
      </div>
         
      <h:panelGrid columns="1">
       <h:panelGroup>
         <div style="padding-left: 5px;">
           <i>
             <hutputText value="#{cc.parent.attrs.location.streetAddress}, "/>
           </i>
            
           <hutputText value=" #{cc.parent.attrs.location.city}" />
           <hutputText value="#{cc.parent.attrs.location.state}"/><hr/>
         </div>
       </h:panelGroup>
  
       <h:panelGrid columns="2">
         <div style="padding-right: 10px;margin-bottom: 10px;font-size:14px">
           #{msgs.zoomPrompt}
         </div>
  
         <h:selectOneMenu onchange="submit()"
                        value="#{cc.parent.attrs.location.zoomIndex}"
          valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
                        style="font-size:13px;font-familyalatino">
  
           <f:selectItems value="#{cc.parent.attrs.location.zoomLevelItems}"/>
  
         </h:selectOneMenu>
       </h:panelGrid>
  
       <h:graphicImage url="#{cc.parent.attrs.location.mapUrl}"
        style="border: thin solid gray"/>
  
     </h:panelGrid>
     </div>
   </composite:implementation>
</html>




复合组件重构—map 组件的标记 — 对我而言有些过长。它初看上去多少有些难于理解,而且其复杂性也很可能给今后带来问题。
您可以很轻松地对  进行重构,将其分成多个更容易管理的文件,正如我之前在清单 、 和  中重构 places 视图的左菜单时所做的那样。在本例中,我将重构的任务留给您作为练习。

请注意  中表达式 #{cc.parent.attrs.location.ATTRIBUTE_NAME} 的使用。您可以使用一个复合组件的 parent 属性来访问父组件的属性,这一点极大地方便了组件的嵌套。
但是,您无需严格依赖于嵌套组件中的父属性,正如我在  中对 place 组件所做的那样,您也可以将属性(比如地图的标题)从父组件传递给其内嵌套的组件,与向其他任何组件(不管嵌套与否)传递属性无异。
清单 21 显示了这个 weather 组件:
清单 21. weather 组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite">

  <!-- INTERFACE -->
  <composite:interface>
    <composite:attribute name="title"/>
  </composite:interface>
           
  <!-- IMPLEMENTATION -->
  <composite:implementation>
     
   <div class="weather">
     <div style="padding-bottom: 10px;">
       <hutputText value="#{cc.attrs.title}"
         style="color: blue"/>
     </div>
         
     <div style="margin-top: 10px;width:250px;">
       <hutputText style="font-size: 12px;"
                     value="#{cc.parent.attrs.location.weather}"
                    escape="false"/>
     </div>
   </div>   
        
   </composite:implementation>
</html>




weather 组件与 map 组件一样,使用了父组件属性(来自天气 Web 服务的天气 HTML )和一个特定于组件的属性(标题)。(参见  来了解此应用程序是如何获得某个地区的地图和天气信息的。)
因此,在想要实现嵌套组件时,您就有了选择。您可以让嵌套的组件依赖于其父组件的属性,也可以要求父组件将属性显式地传递给其内嵌套的组件。比如, 中的 place 组件显式地将标题属性传递给了其内所嵌套的组件,但所嵌套的组件依赖于这个父组件的属性,比如地图 URL 和天气 HTML。
是选择实现组件-显式属性,还是选择依赖于父属性,这是耦合和方便性之间的权衡问题。在本例中,map 和 weather 组件紧密耦合到它们的父组件(place 组件),因为它们依赖于父组件的属性。我本可以通过将 map 和 weather 组件的属性指定为组件-显式属性来去掉 map 和 weather 组件与 place 组件间的耦合。但是如果那样做的话,我就会牺牲一些方便性,因为 place 组件需要将所有属性显式地传递给 map 和 weather 组件。
返回列表