web.xml.jsf_JSF 2.0 Ajax世界中的GMaps4JSF-优快云博客

本文介绍如何在JSF2.0应用程序中集成GMaps4JSF，实现复杂的街景全景图和地图功能，同时利用JSF2.0的Ajax特性增强用户体验。通过实例演示了配置过程及使用JSF2.0Ajax进行交互的技巧。

GMaps4JSF旨在将Google地图与JavaServer Faces（JSF）集成在一起，并使JSF开发人员仅用几个JSF标签即可构建复杂的街景全景图和地图。您还可以轻松地将不同的组件（标记，信息文本，控件，地面叠加层，多边形，折线）附加到地图。 GMaps4JSF还允许将不同的服务器端和客户端事件附加到组件，而无需编写JavaScript代码将事件与组件绑定。如果要实现组件的客户端事件处理程序，则仅需要编写JavaScript代码。

Ajax是任何现代Web应用程序中的主要技术。尽管在早期版本的JavaServer Faces中未引入Ajax，但是它由许多JSF组件库提供，例如Apache MyFaces Trinidad，JBoss RichFaces，ICEFaces等。现在好消息是，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的脚本。清单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.将您的页面放入<h：head>标签中，Google Maps API脚本包括

清单1中的代码示例显示了Google Maps API页面的部分屏幕截图。代码中的gen_website_key用红色圈出，并且箭头指向Google Maps网页上冗长的字符串。

接下来，您将需要GMaps4JSF的JAR文件。从项目网站下载最新版本（请参阅参考资料）。图3显示了项目页面，其中的下载在右侧。

图3.下载最新的库快照jar

将下载的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应用程序的一部分。从头开始编写“ Ajaxified”应用程序可能令人头疼。在客户端，您必须编写一个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>,类的动作源组件中<h:commandButton>,则它允许在该组件的"onclick"动作后发送Ajax请求。如果将标记放在诸如<h:selectOneListbox>,类的值持有者组件中<h:selectOneListbox>,则它允许在组件的"onchange"操作后发送Ajax请求。

清单3显示了使用JSF 2.0 Ajax多么容易。在此示例中， <f:ajax>标记放置在<h:inputText>组件内部。因此，当用户在txtName输入文本中输入值并跳出时， txtEnteredName outputText将使用输入的值进行更新。

清单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>

国家申请

现在，让我们转到Countrys应用程序，该应用程序同时使用GMaps4JSF和JSF 2.0 Ajax。在此应用程序中，您具有主dataTable和详细的地图。 dataTable每一行代表一个国家，当用户单击一行时，国家/地区的位置会显示在详细地图中。图4显示了运行中的Countrys应用程序的屏幕截图。

图4.国家应用程序屏幕截图

国家/地区应用程序的屏幕快照在窗口顶部显示了各个国家/地区的列表，下面是Google国家/地区地图。埃及有一个标记，带有一个描述窗口，提供有关该国家的详细信息。

清单4显示了mashups.xhtml代码的一部分，Countrys应用程序XHTML页面。我将<f:param>标记放在<f:ajax>标记内，以便单击表行"View Country Location" commandLink时可以发送参数。在<f:ajax>标记的render属性中，将包含地图组件的面板组的ID指定为“ mapGroup”。当响应来自服务器时，将使用新信息#{param.selectedCountry} ， #{param.selectedCapital}和#{param.continent} 。

清单4.（mashups.xhtml）国家应用程序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显示了Countrys应用程序示例托管Bean。请注意，您可以从数据库或Web服务获取此托管Bean数据，但是对于我的演示而言，它仅包含有关不同国家的静态信息。

清单5.国家应用程序示例托管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如何简化构建“ Ajaxified”应用程序的过程。您还了解了使用GMaps4JSF构造Google地图并为其添加不同的标记，注释和控件是多么容易。我解释了在JSF 2.0应用程序中使用GMaps4JSF是多么简单，现在，作为JSF 2.0开发人员，您可以轻松地在JSF 2.0应用程序中构建Web 2.0混搭，而无需编写JavaScript代码。

翻译自: https://www.ibm.com/developerworks/java/library/wa-aj-gmaps/index.html