内容


JSF 2.0 Ajax 世界中的 GMaps4JSF

Comments

简介

GMaps4JSF 旨在集成 Google 地图和 JavaServer Faces (JSF),使 JSF 开发人员只使用几个 JSF 标记就可以构造复杂的全景街拍图。您还可以轻松向地图添加几个不同的组件(标记、信息文本、控件、地表覆盖、多边形、多段线)。GMaps4JSF 还可以向组件添加不同的服务端和客户端事件,无需编写 JavaScript 代码来绑定事件和组件。您只需在实现组件的客户端事件处理程序时编写 JavaScript 代码。

Ajax 是任何当代 Web 应用程序中的主要技术。尽管在 JavaServer Faces 的早期版本中没有引入 Ajax,但许多 JSF 组件库(如 Apache MyFaces Trinidad、JBoss RichFaces、ICEFaces 等)也可以提供 Ajax。好消息是,在 JSF 2.0 实现中已经提供了 Ajax 的本机支持。

在本文中,我介绍了如何在 JSF 2.0 应用程序中配置 GMaps4JSF,并简单介绍了 JSF 2.0 Ajax。最后,我演示了如何使用 GMaps4JSF 和 JSF 2.0 Ajax 构建一个简单的 mashup 应用程序。

使用 JSF 2.0 应用程序配置 GMaps4JSF

首先,使用 JSF 2.0 应用程序配置 GMaps4JSF。要做到这一点:

注册 Google Maps API(见 参考资料)。您需要接受使用协议并注册将使用应用程序的站点。然后,Google 将为您的应用程序提供一个密钥。

图 1. 注册 Google Maps API
Google Maps API 协议屏幕截图
Google Maps API 协议屏幕截图

为了使用 Google Maps API,您必须在页面中包含 Google Maps API。清单 1 展示了必须在 <h:head> 标记中包含的 Google Maps API 脚本。您可以在 Google Maps API 文档(见 参考资料)中查看如何使用该代码的详细信息。

清单 1. 包含 Google Maps API 的头文件代码
<head> 
     <script 
          src="//maps.google.com/maps?file=api&amp;v=2&amp";
          key="gen_website_key"
          type="text/javascript">
     </script>
</head>

在清单 1 的代码中,您需要将短语 "gen_website_key" 替换为注册时提供的密钥。图 2 展示了 Google Maps 网站上该密钥的示例,以及它如何适应您的代码。

图 2. 放入 Google Maps API 脚本包含的页面 <h:head> 标记
清单 1 的代码示例以及部分 Google Maps API 页面截图。代码中的 gen_website_key 使用红色圆圈标记,并使用一个箭头指向 Google Maps 网页上的长密钥字符串。
清单 1 的代码示例以及部分 Google Maps API 页面截图。代码中的 gen_website_key 使用红色圆圈标记,并使用一个箭头指向 Google Maps 网页上的长密钥字符串。

接下来您需要 GMaps4JSF 的 JAR 文件。从项目网站下载最新版(见 参考资料)。图 3 展示了项目页面右边的下载链接。

图 3. 下载最新的库截屏 jar
GMaps4JSF 主页的截屏以及右边菜单的下载文件(用红色圆圈标记)。
GMaps4JSF 主页的截屏以及右边菜单的下载文件(用红色圆圈标记)。

将下载的 JAR 文件放入 JSF 2.0 Web 应用程序的 WEB-INF/lib 目录。

最后,将清单 2 中的库声明添加到 XHTML 页面以便使用 GMaps4JSF 组件。

清单 2. GMaps4JSF 组件的库声明
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">

使用 JSF 2.0 Ajax

Ajax 现在是大部分当代 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> 标签用法示例
<h:panelGrid columns="2">
    <h:outputText value="Enter your name:"/>
    <h:inputText id="txtName" value="#{person.name}">
        <f:ajax render="txtEnteredName"/>
    </h:inputText>
    <h:outputText value="You entered: "/>
    <h:outputText id="txtEnteredName" value="#{person.name}"/>
</h:panelGrid>

Countries 应用程序

现在,让我们进入 Countries 应用程序,该应用程序使用 GMaps4JSF 和 JSF 2.0 Ajax。在该应用程序中,您有一个主 dataTable 和一个详细的地图。dataTable 的每一行表示一个国家,当用户单击行时,将显示该国的详细地图。图 4 展示了运行 Countries 应用程序的截屏。

图 4. Countries 应用程序截屏
Countries 应用程序截屏在窗口上方展示了一列不同的国家,在下方展示了 google 国家地图。在埃及上方有一个标记,使用描述窗口描述该国的详细信息。
Countries 应用程序截屏在窗口上方展示了一列不同的国家,在下方展示了 google 国家地图。在埃及上方有一个标记,使用描述窗口描述该国的详细信息。

清单 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 页面
<!-- some code here -->
<h:dataTable value="#{countryTable.data}" var="row">
   <!-- some code here -->
   <h:column>
    <f:facet name="header">
      <h:outputText 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
@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;
	}	
}

结束语

在本文中,您学习了 JSF 2.0 如何简化构建 “Ajax” 应用程序的过程。您还学些了如何轻松构建 Google 地图,并使用 GMaps4JSF 向其添加不同的标记、注释和控件。我介绍了在 JSF 2.0 应用程序中使用 GMaps4JSF 是多么简单,现在,JSF 2.0 开发人员可以轻松在 JSF 2.0 应用程序中构建 Web 2.0 mashup,无需编写 JavaScript 代码。


下载资源


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, Java technology
ArticleID=434807
ArticleTitle=JSF 2.0 Ajax 世界中的 GMaps4JSF
publish-date=10122009