JSF 2.0 Ajax 世界中的 GMaps4JSF -2
- UID
- 1066743
|
JSF 2.0 Ajax 世界中的 GMaps4JSF -2
使用 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 应用程序示例托管 bean1
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;
}
}
|
|
|
|
|
|
|