在之前的文章 JSF 2.0 Ajax 世界中的 GMaps4JSF 中，我解釋了如何將 GMaps4JSF 用於集成 Google maps 和 JavaServer Faces（JSF），它讓 JSF 用戶通過幾個 JSF 標記就能構造復雜的街道全景圖像和地圖。您也可以方便地將不同的組件（標記、信息文本、控件、地面疊加（ground overlays）、多邊形和折線）添加到結果地圖中。GMaps4JSF 甚至允許向組件添加不同的事件，而無需編寫將事件與組件綁定的 JavaScript 代碼。JSF 用戶只有在實現組件的事件處理器時才需要編寫 JavaScript 代碼。GMaps4JSF 是 JSF 的一個 mashup 庫，它能讓 JSF 用戶輕松構建 Web 2.0 mashup 應用程序。
JavaServer Faces Widget Library（JWL）是 IBM 的基於 JSF 的 Web 部件庫，其中包含很多組件用於構造富 Web 應用程序。JWL 還提供 Asynchronous JavaScript + XML（Ajax）標記，用於向 JSF 動態添加 Ajax 行為。
本文中，我將解釋如何在 Rational Software Architect for WebSphere Software（RSA）7.5 中，在一個 JWL 應用程序中使用 GMaps4JSF 組件。我將逐步演示如何創建一個使用不同的 GMaps4JSF 組件的 mashup JWL 應用程序。
從零開始創建 Mashup JWL 應用程序
在 JWL 應用程序中，如果用戶輸入一個地址並單擊 Go! 按鈕，所輸地址的位置就會出現在地圖中，同時其街道預覽圖片就會出現在街道全景圖（streetViewPanorama）中。
創建 JWL Web 項目
創建 JWL mashup 應用程序的第一步是創建一個 Faces 項目。圖 1 顯示的是動態 Web 項目的初始創建屏幕。確保輸入項目名稱並在配置組合框中選擇 Faces Project。
圖 1. 動態 Web 項目的初始創建屏幕
選擇 JSF 實現。圖 2 顯示了可從中選擇 JSF 實現的屏幕。選擇 Server supplied JSF implementation，保留其它參數。
圖 2. 選擇 server supplied JSF implementation
創建 JSF 頁面
下一步，創建應用程序頁面，方法是選擇應用程序（WebContent）文件夾，然後選擇 New > Web Page。
會出現圖 3 所示的窗口。在此窗口中輸入應用程序頁面的文件名。
圖 3. 創建應用程序頁面
配置 JWL 應用程序中的 GMaps4JSF
通過以下步驟配置 JWL 應用程序中的 GMaps4JSF
對 Google Maps API 簽名，生成 Web 站點 URL 的鍵值。見圖 4 示例。
圖 4. 進行 Google Maps API 簽名
將 Google Maps API 腳本包含在頁面 <head> 標記中。如圖 5 所示。
圖 5. 將腳本包含在 head 標記中
從項目站點下載最新的庫 gmaps4jsf-core-1.1.2.jar 文件。
將下載的 JAR 文件放在 JWL 應用程序的 WEB-INF/lib 文件夾下。
添加以下庫聲明到 JSP 頁面中以使用 GMaps4JSF 組件：
<%@ taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m" %>
拖放應用程序組件
現在從左側面板中拖出應用程序頁面組件，如圖 6 所示。
圖 6. 拖放應用程序組件
定義 Ajax 源和目標
下一步，開始定義 Ajax 源和 Ajax 目標。Ajax 源是 Go! commandButton，Ajax 目標是 “mapGroup” 面板（在前一步中已拖放的 commandButton 和面板，如圖 6 所示）。
執行下列步驟來定義 Ajax 源和目標：
右擊 Go! commandButton 並選擇 Edit Events。
選擇 onclick 事件，發出 Ajax 行為，在指定的標記及目標 “mapGroup” 上調用 Ajax 行為，如圖 7 所示。
圖 7. 指定 Ajax 行為
為了讓 “mapGroup” 面板響應 Ajax，需要選擇 Allow Ajax updates 選項，如圖 8 中所示。還應選擇 Refresh 選項，表示需要在 Ajax 請求中發送特定的參數。
圖 8. 允許 Ajax 更新
在上一步選擇 Refresh 選項後，必須指定在 Ajax 請求中發送的特定參數。為此，需要編輯 Ajax 請求屬性，並選擇添加 txtAddress（inputText ID，如圖 6 所示）作為參數。圖 9 顯示的是 Refresh 參數屏幕。
圖 9. Refresh 參數屏幕
在 Ajax 目標中嵌入 GMaps4JSF 代碼
現在，在 “mapGroup” 面板中嵌入 GMaps4JSF 組件，這樣組件將會在服務器返回 Ajax 響應後更新。清單 1 顯示的是 “mapGroup” 面板中的 GMaps4JSF 代碼。
清單 1. “mapGroup” 面板中的地圖和街道全景圖代碼
<m:map id="mapCountry" width="300px" height="300px"
address="#{param.txtAddress}"
rendered="#{param.txtAddress ne null}"
renderOnWindowLoad="false">
<m:marker/>
<m:htmlInformationWindow htmlText="#{param.txtAddress}"/>
</m:map>
<m:streetViewPanorama address="#{param.txtAddress}" rendered="#{param.txtAddress ne null}"
renderOnWindowLoad="false">
</m:streetViewPanorama>
測試應用程序
右鍵單擊 index.jsp，選擇 Run On Server > WebSphere 7.0。將會出現應用程序頁面。在文本框中輸入 Madrid, Spain，單擊 Go!。將會看到地圖中的位置和街道全景圖中的街道的預覽，如圖 10 所示。
圖 10. 應用程序輸出
結束語
您已經學習了如何使用 JWL 創建具有 Ajax 特性的 JSF 應用程序。您還學習了如何使用 GMaps4JSF 組件構建 Google 地圖和全景圖的細節。最後，您還見識到在 WebSphere 7.0 環境中使用 Rational Software Architect for WebSphere 軟件集成 GMaps4JSF 與 JWL 應用程序是多麼輕松。
