Mashups4JSF 简介：使 Mashups 更加简单

核心提示： Places mashup 应用程序（JWL 版本）下面让我们转到 Places mashup 应用程序，在 Places 应用程序中，Mashups4JSF 简介：使 Mashups 更加简单(4)，有一个主数据表、一个详细地图、一个详细天气指示器，数据表的每一行呈现一个地址，地图显示地区，并

Places mashup 应用程序（JWL 版本）

下面让我们转到 Places mashup 应用程序。在 Places 应用程序中，有一个主数据表、一个详细地图、一个详细天气指示器。数据表的每一行呈现一个地址。当应用程序用户在任何一行的 Retrieve Information 按钮上单击时，地区位置在详细地图中显示，地区天气信息在天气指示器中显示。图 2 显示了 Places 应用程序的一个屏幕截图。

图 2. Places 应用程序

查看原图（大图）

清单 6 显示了 index.jsp（Places 应用程序页面）代码中最重要的部分。单击 "cmdRetrieve"commandExButton 时，选定行（包含地区信息）通过 Ajax 协议被发送至服务器。在 bean 操作 #{place.setSelectedPlace} 中，地区信息在请求属性 "selectedPlace" 中设置，如清单 7 所示。地图和天气指示器均通过 #{selectedPlace} 表达式根据地区地址和地区邮编被更新。地图显示地区，并显示一个指向地区地址的标记及一个展示地区地址的信息窗口。天气指示器在后台对 Yahoo! Weather REST API 进行远程调用之后显示地区天气信息。

清单 6. Places 应用程序 JSP 页面（index.jsp）

<h:dataTable　value="#{places.data}"　
　　　　　　　var="place"　
　　　　　　　...>　
　　　　　　　<!--Columns　Here-->　
　　　
　　　　　　　<h:column>　
　　　　　　　<f:facet　name="header">　
　　　　　　　　　<h:outputText　value="Action"　/>　
　　　　　　　</f:facet>　
　　
　　　　　　<hx:commandExButton　id="cmdRetrieve"　
　　　　　　　　　　　　　　　　value="Retrieve　Information"　
　　　　　　　　　　　　　　　　action="#{place.setSelectedPlace}">　
　　　　　　　　　　　　　　　　<hx:behavior　event="onclick"　id="behavior1"　
　　　　　　　　　　　　　　　　　　　　　　　behaviorAction="get"　
　　　　　　　　　　　　　　　　　　　　　　　targetAction="placeInformation">　
　　　　　　　　　　　　　　　　</hx:behavior>　
　　　　　　</hx:commandExButton>　
　　
　　　　　　　</h:column>　
</h:dataTable>　
　
　
<h:panelGrid　columns="2"　id="placeInformation">　
　　　　　　　<h:panelGroup　id="placeMap">　
　　　　　　　　　<m:map　width="400px"　height="300px"　
　　　　　　　　　　　　renderOnWindowLoad="false"　
　　　　　　　　　　　　rendered="#{selectedPlace　ne　null}"　
　　　　　　　　　　　　address="#{selectedPlace.longAddressName}"　
　　　　　　　　　　　　zoom="9">　
　　　　　　　　　　　　<m:marker/>　
　　　　　　　　　　　　<m:htmlInformationWindow　
　　　　　　　　　　　　　　　　htmlText="#{selectedPlace.longAddressName}"/>　
　　　　　　　　　</m:map>　
　　　　　　　</h:panelGroup>　
　　　
　　　　　　　<h:panelGroup　id="placeWeather">　
　　　　　　　　　<mashup:yahooWeather　locationCode="#{selectedPlace.postalCode}"　
　　　　　　　　　　　　　　　　　　　rendered="#{selectedPlace　ne　null}"　
　　　　　　　　　　　　　　　　　　　temperatureType="c"/>　
　　　　　　　</h:panelGroup>　
</h:panelGrid>　
<hx:ajaxRefreshSubmit　target="placeInformation"　id="ajaxRefreshSubmit1"/>