JSF 2.0 Ajax 世界中的 GMaps4JSF -2

look_w

使用 JSF 2.0            AjaxAjax 现在是大部分当代 Web 2.0 应用程序的一部分。从头编写 “Ajax” 应用程序让人很头疼。在客户端，您必须编写  JavaScript 客户端以发送 Ajax 请求并接收 Ajax 响应。在服务器端，应用程序必须准备好客户端能够理解的响应。除了这些复杂的要求之外，JavaScript 客户端代码应该是跨浏览器兼容的。JSF 2.0 Ajax 为您完成这些操作。
在 JSF 2.0 中，有两种方法向 JSF 2.0 应用程序添加 Ajax 支持。您可以使用框架提供的 JavaScript 库或新的 <f:ajax> 标记声明 JSF 组件的 Ajax 支持。
<f:ajax> 标记可以创建能附加到 JSF 组件动作的 Ajax 请求。例如，如果 <f:ajax> 标记放在动作源组件内部（如 <h:commandButton>），那么它可以在该组件的 “onclick” 动作上发送 Ajax 请求。如果该标记放入保存值的组件中（如 <h:selectOneListbox>），那么它支持在组件的 “onchange” 动作上发送 Ajax 请求。            
清单 3 展示了如何轻松使用 JSF 2.0            Ajax。在该示例中，<f:ajax> 标签放在 <h:inputText> 组件内部。因此，当用户在 txtName 输入文本输入值并激活时，txtEnteredNameoutputText 将使用输入的值更新。            
清单 3. JSF 2.0 <f:ajax> 标签用法示例

1 2 3 4 5 6 7 8

<h:panelGrid columns="2">     <hutputText value="Enter your name:"/>     <h:inputText id="txtName" value="#{person.name}">         <f:ajax render="txtEnteredName"/>     </h:inputText>     <hutputText value="You entered: "/>     <hutputText id="txtEnteredName" value="#{person.name}"/> </h:panelGrid>

Countries 应用程序现在，让我们进入 Countries 应用程序，该应用程序使用 GMaps4JSF 和 JSF 2.0 Ajax。在该应用程序中，您有一个主 dataTable 和一个详细的地图。dataTable 的每一行表示一个国家，当用户单击行时，将显示该国的详细地图。图 4 展示了运行 Countries 应用程序的截屏。
图 4. Countries 应用程序截屏清单 4 展示了部分 mashups.xhtml 代码（Countries                 应用程序 XHTML 页面）清单。我将 <f:param> 标记放入 <f:ajax> 标记，因此可以在单击表格行 “View Country Location” commandLink 时发送参数。在 <f:ajax> 标记的呈现属性中，包含地图组件的面板组的 ID 指定为 “mapGroup”。从服务器发出响应时，地图将使用新信息 #{param.selectedCountry}、#{param.selectedCapital} 和 #{param.continent} 更新。         
清单 4. (mashups.xhtml) Countries 应用程序 XHTML 页面

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

<!-- some code here --> <h:dataTable value="#{countryTable.data}" var="row">    <!-- some code here -->    <h:column>     <f:facet name="header">       <hutputText value="Action"/>     </f:facet>     <h:commandLink id="cmdShow" value="View Country Location">        <f:ajax render="mapGroup">           <f:param name="selectedCapital" value="#{row.capital}"/>           <f:param name="continent" value="#{row.continent}"/>           <f:param name="selectedCountry" value="#{row.id}"/>        </f:ajax>     </h:commandLink>    </h:column> </h:dataTable>    <!-- some code here --> <h:panelGroup id="mapGroup">     <m:map id="map" width="460px" height="460px" type="G_NORMAL_MAP"             address="#{param.selectedCountry}"       rendered="#{param.selectedCountry ne null}" renderOnWindowLoad="false" zoom="4">     <m:marker id="marker"/>     <m:htmlInformationWindow id="window"        htmlText="Country: #{param.selectedCapital} <br/> Continent: #{param.continent}"/>     </m:map>     <!-- some code here --> </h:panelGroup>

           清单 5 展示了 Countries 应用程序示例托管 bean。注意，您可以从数据库或 web 服务获取该托管 bean 数据，但在我的演示中，它仅保存有关不同国家的静态信息。
清单 5. Countries 应用程序示例托管 bean

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

@ManagedBean(name="countryTable") @RequestScoped public class CountryTableModel {     private static List<Country> data = new ArrayList<Country>();     static {         data.add(new Country("Egypt",                              "Cairo, Egypt",                              "Africa"));         data.add(new Country("Germany",                              "Berlin, Germany",                              "Europe"));         data.add(new Country("Austria",                              "Vienna, Austria",                              "Europe"));         data.add(new Country("US" ,                              "Washington, USA",                              "North America"));         data.add(new Country("China" ,                              "Beijing, China",                              "Asia"));         data.add(new Country("Brazil" ,                              "Brazilia, Brazil",                              "South America"));          }     public List<Country> getData() {         return data;     }     public void setData(List<Country> data) {         this.data = data;     }    }