javascript
web.xml.jsf_JSF 2.0 Ajax世界中的GMaps4JSF
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
總結
以上是生活随笔為你收集整理的web.xml.jsf_JSF 2.0 Ajax世界中的GMaps4JSF的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Arduino超声波测距模块控制蜂鸣器
- 下一篇： html类似ppt的效果,类似PPT演示