Mashups4JSF 简介:使 Mashups 更加简单
2010-08-11 00:00:00 来源:WEB开发网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"/>
Tags:MashupsJSF 简介 Mashups
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接