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&v=2&";
key="gen_website_key"
type="text/javascript">
</script>
</head>
在清单1的代码中，您将需要用在注册时提供给您的密钥替换短语"gen_website_key" 。 图2显示了Google Maps网站上此键的示例以及它如何适合您的代码。
图2.将您的页面放入<h：head>标签中，Google Maps API脚本包括
接下来，您将需要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.国家应用程序屏幕截图
清单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
相关资源：微信小程序源码-合集6.rar
