用 JavaServer Faces 2 实现可扩展 UI （10）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-20 19:28 | 只看该作者

用 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">


<composite:interface>
   <composite:attribute name="title"/>
</composite:interface>


<composite:implementation>
   <div class="map">
   <div style="padding-bottom: 10px;">
      <h

utputText value="#{cc.attrs.title}"
                  style="color: blue"/>
   </div>

   <h:panelGrid columns="1">
   <h:panelGroup>
      <div style="padding-left: 5px;">
         <i>
         <h

utputText value="#{cc.parent.attrs.location.streetAddress}, "/>
         </i>

         <h

utputText value=" #{cc.parent.attrs.location.city}" />
<h

utputText 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-family

alatino">

         <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">

  
  <composite:interface>
<composite:attribute name="title"/>
  </composite:interface>

  
  <composite:implementation>

<div class="weather">
   <div style="padding-bottom: 10px;">
   <h

utputText value="#{cc.attrs.title}"
      style="color: blue"/>
   </div>

   <div style="margin-top: 10px;width:250px;">
   <h

utputText 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 组件。

收藏分享评分

回复引用

订阅 TOP

返回列表