javascript
Seam - 无缝集成 JSF，第 3 部分: 用于 JSF 的 Ajax
Seam - 無(wú)縫集成 JSF，第 3 部分: 用于 JSF 的 Ajax用 Seam Remoting 和 Ajax4jsf 無(wú)縫熔接客戶機(jī)和服務(wù)器 |
|
級(jí)別： 中級(jí)
Dan Allen (dan.allen@mojavelinux.com), 高級(jí) Java 工程師, CodeRyte, Inc.
2007 年 6 月 25 日
JSF 基于組件的方法論促進(jìn)了抽象，但大多數(shù) Ajax 實(shí)現(xiàn)由于公開(kāi)了底層的 HTTP 交換而使之大受干擾。在 無(wú)縫集成 JSF 系列 最后的這篇文章中，Dan Allen 展示了如何使用 Seam Remoting API 和 Ajax4jsf 組件與服務(wù)器上的受管 bean 通信，就好像這些 bean 與瀏覽器同在本地一樣。您將了解利用 Ajax 作為 JSF 事件驅(qū)動(dòng)架構(gòu)的一種自然改進(jìn)是多么地容易，以及如何在不影響 JSF 組件模型的前提下實(shí)現(xiàn)這一目的。時(shí)下，大多數(shù) Java? 開(kāi)發(fā)人員都很看好 mashup，所以您可能會(huì)困惑：Seam 與號(hào)稱 Web 2.0 的技術(shù)，尤其是 Ajax，如何能集成。若能使用 Seam 啟動(dòng) JSF 中的部分頁(yè)面更新或者用 Google Map 協(xié)助 JSF 應(yīng)用程序 mashup，那將非常酷，不是么？您不僅能這么做，而且還非常容易。
|
在 無(wú)縫集成 JSF 系列 的最后一篇文章中，我將為您展示如何使用 Seam Remoting API 和 Ajax4jsf 組件來(lái)協(xié)助基于 JSF 應(yīng)用程序中的 Ajax 風(fēng)格的交互。正如您將會(huì)看到的，結(jié)合 Seam 和 Ajax 的最大好處在于它讓您可以享用所有 Web 2.0 的奢侈東西，而同時(shí)又不需要 陷于使用 JavaScript XMLHttpRequest 對(duì)象的痛苦之中。借助 Seam Remoting 和 Ajax4jsf，可以與服務(wù)器上的受管 bean 通信，就好像這些 bean 與瀏覽器同在本地一樣。瀏覽器和服務(wù)器狀態(tài)保持同步，而且永遠(yuǎn)無(wú)需處理促成它們之間通信的低層 API。
我首先會(huì)為您展示 Seam 是如何推動(dòng) Ajax 編程的基于組件的新方式的。您將學(xué)會(huì)如何使用 Seam Remoting API 來(lái)通過(guò) Ajax 進(jìn)行 JavaScript 和服務(wù)器端對(duì)象間的通信。一旦理解了這種面向 Ajax 的新（且簡(jiǎn)單的）方式，您就可以使用它來(lái)增強(qiáng) Open 18 應(yīng)用程序，方法如下：
- 在 Open 18 球場(chǎng)目錄和 Google Maps 之間創(chuàng)建一個(gè) mashup。
- 使用 Ajax4jsf 合并應(yīng)用程序的球場(chǎng)目錄頁(yè)和球場(chǎng)細(xì)節(jié)頁(yè)。
- 重新訪問(wèn)應(yīng)用程序的 Spring 集成并讓 Spring bean 在 Seam Remoting 的生命周期可用。
|
Open 18 和 Google Maps 之間的 mashup 讓用戶可以定位地圖中的高爾夫球場(chǎng)目錄中的位置。將此球場(chǎng)目錄和球場(chǎng)細(xì)節(jié)頁(yè)合并起來(lái)（并將低層代碼 Ajax 化） 可以讓您顯示球場(chǎng)的細(xì)節(jié)信息而無(wú)需加載新頁(yè)。將 Spring bean 和 Seam Remoting 相集成讓您可以捕獲 Google Maps 位置標(biāo)記的重定位并能將相關(guān)球場(chǎng)的經(jīng)度和緯度存儲(chǔ)到數(shù)據(jù)庫(kù)中。如您所見(jiàn)，結(jié)果就是會(huì)產(chǎn)生所有高爾夫球員都喜歡使用的 Web 2.0 風(fēng)格的應(yīng)用程序，這真是讓人印象深刻！
如果您曾經(jīng)深受涉及到大量 JavaScript 的過(guò)于復(fù)雜的 Ajax 編程之苦，如果到目前為止，您都由于不想面對(duì)其復(fù)雜性而一直盡量避免使用 Ajax，那么本文所要教授的內(nèi)容將會(huì)幫助您免除這種擔(dān)心。在重構(gòu)應(yīng)用程序時(shí)，您需要進(jìn)行一些 JavaScript 編碼，但與大多數(shù) Ajax 實(shí)現(xiàn)不同，JavaScript 并不會(huì)占據(jù)您代碼中的大部分；相反，它只擴(kuò)展了服務(wù)器端的 Java 對(duì)象。
通向 Ajax 的不同之路
正如在應(yīng)用程序中希望避免顯式的內(nèi)存管理一樣，您亦不 希望必須要處理低層的 Ajax 請(qǐng)求協(xié)議。這么做只會(huì)帶來(lái)更大的麻煩（更確切地說(shuō)，是更多的麻煩），比如多瀏覽器支持、數(shù)據(jù)封送處理、并發(fā)沖突、服務(wù)器負(fù)載以及定制 servlet 和 servlet 過(guò)濾器。其中您想要避免的最大的麻煩是無(wú)意間公開(kāi)的無(wú)狀態(tài)的請(qǐng)求-響應(yīng)范例，但該范例是基于組件的框架，比如 JSF，所想要隱藏的。
JSF 生命周期通過(guò)對(duì)底層的 servlet 模型屏蔽應(yīng)用程序代碼促進(jìn)了面向組件的設(shè)計(jì)。為了保持處理 Ajax 的這種抽象性，您可以將低層的這些瑣碎工作交由 Seam Remoting 或 Ajax4jsf 處理。這兩個(gè)庫(kù)均可負(fù)責(zé)通過(guò) Ajax 交互將 JSF 組件熔合到瀏覽器時(shí)所需的管道處理。圖 1 顯示了實(shí)際應(yīng)用中的 Seam Remoting。當(dāng)事件觸發(fā)時(shí)，比如用戶單擊了一個(gè)按鈕，消息就會(huì)異步發(fā)送給服務(wù)器上的組件。一旦收到響應(yīng)，它就會(huì)用來(lái)對(duì)此頁(yè)進(jìn)行增量更新。用來(lái)處理瀏 覽器和服務(wù)器端組件間的交互的低層通信協(xié)議都藏于 API 之后。
|
在圖 1 所示的用例中，用戶能看到單擊按鈕后所發(fā)生的方法調(diào)用的結(jié)果。在研究此用例時(shí)，有兩個(gè)要點(diǎn)需要注意： (1) 該頁(yè)永遠(yuǎn)無(wú)法刷新；(2) 客戶端代碼與組件上的方法進(jìn)行透明通信，而不是顯式地構(gòu)建然后再請(qǐng)求 URL。標(biāo)準(zhǔn)的 HTTP 請(qǐng)求在后臺(tái)使用，但客戶端代碼永遠(yuǎn)無(wú)需直接與 HTTP 協(xié)議交互。
圖 1. Seam Remoting 熔合 JSF 組件和瀏覽器
Seam Remoting 和 Ajax4jsf
Seam Remoting 和 Ajax4jsf 是兩個(gè)獨(dú)特的庫(kù)，可分別服務(wù)于 JSF 的 “Ajax 化” 的目的。兩個(gè)庫(kù)均使用 Ajax 來(lái)引入交互模型，其中瀏覽器和服務(wù)器間的通信可以在后臺(tái)異步發(fā)生，并對(duì)用戶不可見(jiàn)。沒(méi)有必要為了執(zhí)行服務(wù)器上的方法而浪費(fèi)用戶頁(yè)面重載的時(shí)間。在這些庫(kù)所 發(fā)出的 Ajax 請(qǐng)求中由服務(wù)器檢索到的信息可用來(lái)增量地 “實(shí)時(shí)” 更新頁(yè)面的狀態(tài)。兩個(gè)庫(kù)均可配備生命周期，此生命周期可以在瀏覽器需要的時(shí)候恢復(fù)（restore）組件的狀態(tài)。這種 Ajax 交互并不是真的請(qǐng)求而是一種 “恢復(fù)并執(zhí)行”。瀏覽器像是 “敲敲” 服務(wù)器的 “肩膀”，請(qǐng)它在服務(wù)器端的一個(gè)受管 bean 上執(zhí)行一個(gè)方法并返回結(jié)果。
雖然這兩個(gè)庫(kù)工作起來(lái)有些差別，但它們并不是相互排斥的。由于它們都采用的是 JSF 組件模型，所以二者可以很容易地相互結(jié)合，這將在本文后面的部分詳細(xì)介紹。目前，我們只需分別考慮二者各自將 Ajax 風(fēng)格的交互引入 JSF 應(yīng)用程序的方式：
- Seam Remoting 提供了 JavaScript API，可以使用這些 API 來(lái)像訪問(wèn)本地對(duì)象一樣來(lái)訪問(wèn) JavaScript 中的服務(wù)器端組件，以便通過(guò)方法調(diào)用發(fā)送和檢索數(shù)據(jù)。Seam Remoting 使用定制的、非 JSF 生命周期來(lái)使該瀏覽器能夠與服務(wù)器端的組件通信。只有 Seam 容器和其組件可以在這些請(qǐng)求期間被恢復(fù)。透明協(xié)議是 Ajax，但您無(wú)需費(fèi)心數(shù)據(jù)包如何傳輸?shù)募?xì)節(jié)。
- Ajax4jsf 則通過(guò)完全隱藏 JavaScript 的使用讓抽象更進(jìn)了一步。它將所有邏輯都包裹在基本 UI 組件內(nèi)。Ajax4jsf 通過(guò)完整的 JSF 生命周期接受 Ajax 請(qǐng)求。因而，支持 Ajax 的組件可以在不觸發(fā)瀏覽器導(dǎo)航事件的前提下執(zhí)行動(dòng)作處理程序、升級(jí) JSF 組件樹(shù)以及重新呈現(xiàn)該頁(yè)的某些部分。同樣地，通信也是通過(guò) Ajax 實(shí)現(xiàn)的，但所有這些均在后臺(tái)發(fā)生，頁(yè)面開(kāi)發(fā)人員不可見(jiàn)。Ajax4jsf 面向組件的方法讓 Ajax 功能得以成為 JSF 很自然的一部分，而不是格格不入的外來(lái)者。
我將深入探究這些方式，但我們還是先來(lái)看看 Ajax 的基礎(chǔ)知識(shí)吧。
|
縮小差異
要 想讓?xiě)?yīng)用程序成為 Ajax/Web 2.0 意義上的 “富” 應(yīng)用程序，Web 瀏覽器（也即客戶機(jī)）必須能直接訪問(wèn)服務(wù)器上的組件。由于在客戶機(jī)和服務(wù)器間存在著巨大差異，讓這個(gè)目標(biāo)成為現(xiàn)實(shí)還是很有挑戰(zhàn)性的。差異的一個(gè)方面（即網(wǎng) 絡(luò)）存在于客戶機(jī)瀏覽器，另一方面存在于服務(wù)器和其組件。Ajax 應(yīng)用程序的一個(gè)目標(biāo)是讓它們可以相互 “通話”。
實(shí)際上，在大多數(shù)傳統(tǒng)的 Web 應(yīng)用程序中，客戶機(jī)和服務(wù)器可以正常通信，但交互性就完全是另一回事了。服務(wù)器發(fā)起對(duì)話，瀏覽器收聽(tīng)對(duì)話。您如果以前曾陷于這 類對(duì)話之中，實(shí)在不足為怪。在沒(méi)有 Ajax 通信的世界里，瀏覽器可以發(fā)送對(duì)任何 URL 的同步請(qǐng)求，但它必須要呈現(xiàn)服務(wù)器發(fā)回的 HTML。這類交互性的另一個(gè)不足之處是等待時(shí)間很多。
若 只有 HTTP 這種沒(méi)有什么發(fā)展的語(yǔ)言，瀏覽器客戶機(jī)將對(duì)服務(wù)器如何生成 HTML 完全束手無(wú)策，進(jìn)而也就無(wú)從知道其組件的內(nèi)容。從瀏覽器的立場(chǎng)上看，頁(yè)面生成過(guò)程完全是個(gè)黑盒子。瀏覽器可以以 URL 形式詢問(wèn)服務(wù)器不同的問(wèn)題并將打包成請(qǐng)求參數(shù)和 POST 數(shù)據(jù)的提示一并傳遞，但它其實(shí)并不 “講” 服務(wù)器的語(yǔ)言。如果想要給瀏覽器提供一個(gè)到應(yīng)用程序服務(wù)器端動(dòng)作的視圖，則需要建立更復(fù)雜的通信手段。這種面向頁(yè)面的確定性方法對(duì)此無(wú)能為力。
Web 瀏覽器作為 Ajax 客戶機(jī)
Seam Remoting 和 Ajax4jsf 對(duì)打破客戶和瀏覽器組件的隔閡所采用的方式有所不同，所以很有必要知道如何利用好這二者。Seam Remoting 提供了瀏覽器本地語(yǔ)言 JavaScript 形式的 API，通過(guò)這些 API 服務(wù)器端組件上的方法就可以被訪問(wèn)到。若要將訪問(wèn)權(quán)賦予這些方法，它們必須通過(guò) @Remote 注釋被顯式地標(biāo)記為 “remote”。
Seam Remoting 中的調(diào)用機(jī)制與 Java RMI 類似，二者都使用本地代理對(duì)象或 “存根” 來(lái)允許 JavaScript 調(diào)用位于遠(yuǎn)程服務(wù)器上的組件。就客戶而言，該存根對(duì)象就是 遠(yuǎn)端對(duì)象。該存根負(fù)責(zé)實(shí)現(xiàn)實(shí)際遠(yuǎn)端對(duì)象上的方法執(zhí)行。當(dāng)遠(yuǎn)端方法被調(diào)用時(shí)，響應(yīng)就會(huì)將此方法調(diào)用的返回值封裝起來(lái)。返回值被編制處理成一個(gè) JavaScript 對(duì)象。因此，Seam Remoting 就使瀏覽器可以 “講” 服務(wù)器的本地語(yǔ)言。Java 代碼和 JavaScript 現(xiàn)已合二為一，這對(duì)于那些認(rèn)為這二者原本就是一種語(yǔ)言的人多少有點(diǎn)出乎意料。
|
另 一方面，Ajax4jsf 提供了 JSF 組件標(biāo)記來(lái)聲明性地關(guān)聯(lián) UI 事件和服務(wù)器端受管 bean 上的動(dòng)作處理程序。這些動(dòng)作處理程序方法不需要被標(biāo)記成 “remote”。相反，它們都是一些傳統(tǒng)的 JSF 動(dòng)作處理程序，或者是受管 bean 上的公共方法，這些方法或者無(wú)實(shí)參或者接受 ActionEvent。
與 Seam Remoting 不同，Ajax4jsf 可以將 JSF 組件樹(shù)中的更改返回到瀏覽器。這些更改以 XHTML 片段的形式返回。這些段與此頁(yè)中單個(gè)的 JSF 組件相關(guān)聯(lián)并證明其自身為部分頁(yè)更新。因此，此頁(yè)的隔離區(qū)域可以通過(guò)新的 標(biāo)記由瀏覽器重新呈現(xiàn)。這些段都是特殊請(qǐng)求的，或者通過(guò)使用 Ajax4jsf 組件標(biāo)記的 reRender 屬性，或者通過(guò) 將模板的多個(gè)區(qū)域封裝到用屬性 ajaxRendered="true" 標(biāo)示的輸出面板中。reRender 屬性表示的是應(yīng)該被重現(xiàn)的一個(gè)特定的組件集，由其組件 ID 加以引用。相比之下，使用 ajaxRendered="true" 的方式就有些太過(guò)全面了，要求只要 Ajax4jsf 管理的 Ajax 請(qǐng)求完成，所有 “由 Ajax 呈現(xiàn)” 的區(qū)域都要更新。
Ajax4jsf 和 Seam Remoting 使瀏覽器從基本的 HTML 呈現(xiàn)器成長(zhǎng)為一種成熟的 Ajax 客戶機(jī)。當(dāng)集成這兩種框架時(shí)，應(yīng)用程序的確 會(huì)讓人興奮不已。實(shí)際上（這個(gè)消息有點(diǎn)出人意料，所以您最好坐下來(lái)聽(tīng)），綜合 Seam Remoting 和 Ajax4jsf 的功能可以讓您從開(kāi)發(fā)自己定制的 Ajax JSF 組件中解脫出來(lái)！您可以在 Ajax 通信中采用任何現(xiàn)有的、非 Ajax 啟用的 JSF 組件，方法是在其聲明中嵌套 a4j:support 標(biāo)記。如果您工作于 UI 組件之外（正如在后面的 Google Maps mashup 中所做的那樣）且需要查詢服務(wù)器端的組件以獲取信息、更新該組件或指導(dǎo)它來(lái)執(zhí)行操作，您可以用 Seam Remoting 管理此交互。
當(dāng) Seam Remoting 和 Ajax4jsf 在功能上有些重疊時(shí)，二者都可以很利于將 Ajax 風(fēng)格的交互添加到應(yīng)用程序。此外，您很快就會(huì)看到，兩個(gè)庫(kù)都為 JSF 應(yīng)用程序提供了無(wú)縫的 Ajax 解決方案。
|
Seam Remoting 快速入門(mén)
如 果 Seam Remoting 實(shí)現(xiàn)起來(lái)不是如此復(fù)雜的話，那么它真是一種理想的解決方案。不要擔(dān)心！Seam Remoting 并不會(huì)如您曾領(lǐng)教過(guò)的那些遠(yuǎn)端 EJB 對(duì)象那樣可怕。使用 Seam Remoting API 啟用 JavaScript 代碼來(lái)與服務(wù)器端組件進(jìn)行交互最好的一面是過(guò)程異乎尋常地簡(jiǎn)單。Seam 真的可以為您完成所有的辛苦工作 —— 您甚至都無(wú)需編輯一行 XML，就可以開(kāi)始使用它！（如果目前您進(jìn)行 XML 編程要比 Java 編程多，那么這真是一個(gè)振奮人心的消息。）
讓我們先來(lái)快速看看使用 Seam Remoting 來(lái) “Ajax 化” JSF 應(yīng)用程序所需的步驟。
公開(kāi) bean
將服務(wù)器端對(duì)象方法對(duì)遠(yuǎn)端 Ajax 公開(kāi)有兩個(gè)要求：此方法必須是 Seam 組件的公共成員且必須配備 @WebRemote 注釋。就這兩點(diǎn)！
實(shí)際的簡(jiǎn)單性在清單 1 中可見(jiàn)一斑，其中 Seam 組件 ReasonPotAction 為了遠(yuǎn)端執(zhí)行而 向 Ajax 客戶公開(kāi)了單一一個(gè)方法，即 drawReason()。每次這個(gè)方法在此存根上被調(diào)用的時(shí)候，該調(diào)用都會(huì)跨 Internet 傳遞到服務(wù)器并會(huì)通過(guò)在服務(wù)器端使用對(duì)應(yīng)的方法隨機(jī)選擇所列的 “在項(xiàng)目中采用 Seam 的十大理由” 之一。服務(wù)器隨后向客戶返回該值（有關(guān)這十個(gè)理由的更多信息，請(qǐng)參見(jiàn) 參考資料）。
清單 1. 公開(kāi)遠(yuǎn)端方法調(diào)用
| @Name("reasonPot") @Scope(ScopeType.SESSION) public class ReasonPotAction { private static String[] reasons = new String[] { "It's the quickest way to get /"rich/".", "It's the easiest way to get started with EJB 3.0.", "It's the best way to leverage JSF.", "It's the easiest way to do BPM.", "But CRUD is easy too!", "It makes persistence a breeze.", "Use annotations (instead of XML).", "Get hip to automated integration testing.", "Marry open source with open standards.", "It just works!" }; private Random randomIndexSelector = new Random(); @WebRemote public String drawReason() { return reasons[randomIndexSelector.nextInt(reasons.length)]; } } |
服務(wù)于資源
服務(wù)器端組件設(shè)置好后，需要讓瀏覽器準(zhǔn)備好來(lái)調(diào)用 @WebRemote 方法。Seam 使用定制 servlet 來(lái)處理 HTTP 請(qǐng)求以便執(zhí)行遠(yuǎn)端方法并返回其結(jié)果。無(wú)需擔(dān)心：您將不必直接與那個(gè) servlet 進(jìn)行交互。Seam Remoting JavaScript 庫(kù)負(fù)責(zé)處理所有的與 Seam servlet 的交互，而處理的方式也與它管理 XMLHttpRequest 對(duì)象的所有方面相同。
您 需要考慮使用這個(gè) servlet 的惟一情況是在應(yīng)用程序中設(shè)置 Seam Remoting 的時(shí)候。更好的是您只需配置 Seam 的定制 servlet 一次，而不管有多少 Seam 特性需要定制 servlet 的服務(wù)。與為每個(gè)特性使用特定的 servlet 相反 —— 該特性可能是將資源（比如一個(gè) JavaScript 文件）提供給瀏覽器或處理一個(gè)非 JSF 請(qǐng)求（像 Ajax remoting 調(diào)用），Seam 將所有這些任務(wù)捆綁于單一一個(gè)控制器 Resource Servlet 之下。這個(gè) servlet 使用一個(gè)委托鏈模型，將這些任務(wù)傳遞到注冊(cè)的處理程序。例如，Remoting 對(duì)象（我稍后就會(huì)介紹）會(huì)注冊(cè)其自身來(lái)接收所有由 Seam Remoting JavaScript 庫(kù)發(fā)出的 Ajax 請(qǐng)求。
Resource Servlet 的 XML 定義如清單 2 所示，且必須安裝于應(yīng)用程序的 web.xml 文件中 Faces Servlet 之下：
清單 2. Seam Resource Servlet 的 XML 定義
| <servlet> <servlet-name>Seam Resource Servlet</servlet-name> <servlet-class>org.jboss.seam.servlet.ResourceServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>Seam Resource Servlet</servlet-name> <url-pattern>/seam/resource/*</url-pattern> </servlet-mapping> |
自引導(dǎo) API
Seam Remoting 機(jī)制真正的幕后原因是 JavaScript 庫(kù)。Resource Servlet 將作業(yè)指派給 Remoting 對(duì)象以服務(wù)這些庫(kù)。所發(fā)出的兩個(gè) JavaScript 庫(kù)建立適合瀏覽器的掛鉤以便借助 JavaScript 調(diào)用遠(yuǎn)端方法。
必 須要將這兩個(gè) JavaScript 庫(kù)都導(dǎo)入頁(yè)面，如清單 3 所示。第一個(gè)庫(kù) remote.js 是靜態(tài)的，將 Seam 的客戶端 remoting 框架傳遞給瀏覽器。第二個(gè)庫(kù) interface.js 是在每個(gè)請(qǐng)求上動(dòng)態(tài)創(chuàng)建的。它包含遠(yuǎn)端存根和與服務(wù)器端組件進(jìn)行交互所需的復(fù)雜類型。注意，Seam 并不為所有指定一個(gè)方法為遠(yuǎn)端的所有組件都生成存根和復(fù)雜類型。相反，它會(huì)解析 interface.js URL 中的 ? 字符后面的該查詢字符串來(lái)收集要公開(kāi)的組件名。每一個(gè)組件名都由 & 符號(hào)分隔。使用這種堆棧式的方法可以使瀏覽器為外部 JavaScript 文件所進(jìn)行的請(qǐng)求的數(shù)量為最小。Seam 之后會(huì)只為這些組件生成這些存根和復(fù)雜類型。作為一個(gè)例子，清單 3 中的這兩個(gè) JavaScript 導(dǎo)入將會(huì)加載 Seam Remoting 庫(kù)并指示 Seam 準(zhǔn)備好 reasonPot 和 anotherName 組件：
清單 3. 導(dǎo)入客戶端框架和 API
| <script type="text/javascript" src="seam/resource/remoting/resource/remote.js"></script> <script type="text/javascript" src="seam/resource/remoting/interface.js?reasonPot&anotherName"></script> |
有了這些，您就可以著手了！您已經(jīng)完成了 Seam Remoting 設(shè)置，現(xiàn)在可以開(kāi)始進(jìn)行一些遠(yuǎn)程調(diào)用了。
|
進(jìn)行遠(yuǎn)程調(diào)用
所有用于 Seam Remoting 庫(kù)的客戶端框架代碼都封裝在 Seam JavaScript 對(duì)象中。實(shí)際上，這個(gè)高層對(duì)象只是一個(gè)名稱空間 —— 一個(gè)可以將一組功能捆綁在惟一一個(gè)名字之下的容器。在 JavaScript 中，名稱空間不過(guò)是一個(gè)可以加載靜態(tài)屬性、靜態(tài)方法和其他一些嵌套名稱空間對(duì)象的對(duì)象。需要注意的重要一點(diǎn) 是 Seam Remoting 中的 JavaScript 與其他 JavaScript 可以很好地合作。這意味著您可以利用諸如 Prototype 或 Dojo 這樣的庫(kù)來(lái)讓 JSF UI 與服務(wù)器端組件交互。在 JSF UI 中使用第三方 JavaScript 庫(kù)過(guò)去一直是 JSF 開(kāi)發(fā)人員所面臨的一個(gè)巨大挑戰(zhàn)，所以 Seam JavaScript 對(duì)象備受歡迎：
Seam Remoting 庫(kù)的功能在 Seam.Component 和 Seam.Remoting 名稱空間對(duì)象間分配。Seam.Component 的靜態(tài)方法提供了對(duì)遠(yuǎn)端 Seam 組件的訪問(wèn)，而靜態(tài) Seam.Remoting 方法則用來(lái)控制 remoting 設(shè)置并創(chuàng)建定制數(shù)據(jù)類型。正如您從本示例中所見(jiàn)的，定制數(shù)據(jù)類型是任何需要本地創(chuàng)建以調(diào)用遠(yuǎn)端方法的非原語(yǔ)對(duì)象。
執(zhí)行細(xì)節(jié)
要執(zhí)行一個(gè)遠(yuǎn)端方法，首先要獲得持有此方法的組件的一個(gè)實(shí)例。如果想要使用現(xiàn)有的 Seam 組件實(shí)例（意味著它已經(jīng)存在于服務(wù)器），就可以使用 Seam.Component.getInstance()；如果想要在進(jìn)行調(diào)用之前先實(shí)例化一個(gè)新實(shí)例，則可以使用 Seam.Component.newInstance()。 這些實(shí)例均是由 Seam 動(dòng)態(tài)構(gòu)建的遠(yuǎn)端存根。存根代理所有的方法調(diào)用，將組件名、方法和參數(shù)編排處理成 XML，并通過(guò)一個(gè) Ajax 請(qǐng)求將 XML 有效負(fù)載傳遞到服務(wù)器端組件。服務(wù)器上的 remoting 框架代碼獲取這個(gè)請(qǐng)求，對(duì)這個(gè) XML 進(jìn)行解除編排處理，提取出組件名、方法和實(shí)參，然后再在服務(wù)器端組件實(shí)例上調(diào)用此方法。最后，此服務(wù)器以 Ajax 調(diào)用的響應(yīng)向客戶機(jī)發(fā)回返回值。同樣，所有這些工作都藏于存根的背后，極大地簡(jiǎn)化了 JavaScript 代碼。
至此，有關(guān)背景的介紹已經(jīng)足夠了。清單 4 顯示了該如何執(zhí)行 conversation 作用域內(nèi)的 reasonPot 組件上的 drawReason() 方法，該組件在 清單 1 中被標(biāo)記為遠(yuǎn)端服務(wù)。一旦獲得了組件存根，執(zhí)行此方法就如同任何其他的 JavaScript 方法調(diào)用一樣，不是么？
清單 4. 調(diào)用遠(yuǎn)端方法
| <script type="text/javascript"> Seam.Component.getInstance("reasonPot").drawReason(displayReason); function displayReason(reason) { alert(reason); } </script> |
在清單 4 中，應(yīng)該注意到存根上的方法和服務(wù)器端組件上的 “實(shí)際” 方法存在一個(gè)重要差異。您覺(jué)察到了么？每個(gè)在組件存根上的調(diào)用都是異步完成的。這意味著遠(yuǎn)端方法調(diào)用的結(jié)果并不能立即對(duì)執(zhí)行線程可用。正因?yàn)槿绱?#xff0c;存根上 的方法并沒(méi)有要返回的值，而不管匹配的服務(wù)器端方法是否有要返回的值。當(dāng)遠(yuǎn)端存根上的方法執(zhí)行時(shí)，它實(shí)際上像是在說(shuō)：“好吧，我稍后再答復(fù)您，請(qǐng)留下您的 聯(lián)系電話。”您所提供的碼實(shí)際上就是 “回調(diào)” JavaScript 函數(shù)。其任務(wù)是捕獲實(shí)際的返回值。
回調(diào)函數(shù) 是異步 API 的標(biāo)準(zhǔn)結(jié)構(gòu)。當(dāng)來(lái)自 Ajax 請(qǐng)求的響應(yīng)回到瀏覽器時(shí)，它由 Seam Remoting JavaScript 框架執(zhí)行。如果服務(wù)器端組件上的方法具有非空返回值，該值就會(huì)作為其惟一的實(shí)參傳遞進(jìn)此回調(diào)函數(shù)。另一方面，如果服務(wù)器端組件上的方法具有一個(gè)空返回類 型，則可以忽略此可選參數(shù)。
conversation 作用域內(nèi)的 bean
對(duì) 于大多數(shù) remoting 需求，您都可以使用到目前為止所介紹的 API 加以應(yīng)對(duì)。若請(qǐng)求的給出是為了檢索服務(wù)器端組件或執(zhí)行其公開(kāi)的方法中的一個(gè)，那么該組件必須在 remoting 生命周期內(nèi)可見(jiàn)。引用 conversation 作用域內(nèi)的 bean 不需要任何額外的工作，原因是這些 bean 總是對(duì)在同一個(gè)瀏覽器對(duì)話中發(fā)出的 HTTP 請(qǐng)求可用。
conversation 作用域內(nèi)的 bean 需要更多技巧，因?yàn)樗鼈兓趯?duì)話令牌的存在而與 HTTP 請(qǐng)求相關(guān)聯(lián)。當(dāng)處理 conversation 作用域內(nèi)的 bean 時(shí)，您必須要能夠在遠(yuǎn)程調(diào)用期間建立正確的對(duì)話上下文。此對(duì)話通過(guò)與遠(yuǎn)程請(qǐng)求一同發(fā)送對(duì)話令牌來(lái)重新激活。這種交互的細(xì)節(jié)由 Seam Remoting 框架處理，只要您提供對(duì)話令牌即可。
請(qǐng)記住，Ajax 請(qǐng)求完全可以從相同的窗口發(fā)出以與此服務(wù)器上的兩個(gè)或更多的對(duì)話通信。如果在檢索組件實(shí)例存根之前指定了對(duì)話 ID，那么 Seam 就可以對(duì)它們進(jìn)行區(qū)分。使用 Seam.Remoting.getContext().setConversationId("#{conversation.id} ") 可以實(shí)現(xiàn)這一目的。
Seam 總是在 #{conversation.id} 值綁定表達(dá)式下公開(kāi)當(dāng)前的對(duì)話。JavaScript 實(shí)際上可以看到解析后的值，通常是一個(gè)數(shù)值，而不是表達(dá)式占位符。您可以與 remoting 內(nèi)容一起注冊(cè)該值，它然后會(huì)由隨后的請(qǐng)求傳遞。相反，您可以讀在之前的請(qǐng)求中分配的這個(gè)對(duì)話 ID，方法是在遠(yuǎn)端調(diào)用發(fā)起后，調(diào)用 Seam.Remoting.getContext().getConversationId()。通過(guò)這種方式，remoting 調(diào)用就可以充分利用 conversation 作用域的益處并 參與狀態(tài)行為。
|
Google map 和 Open 18 應(yīng)用程序
清單 1 中的 Reason Pot 示例（“使用 Seam 的十大理由”）很有趣，但現(xiàn)在是時(shí)候該讓 Seam Remoting 庫(kù)大顯身手了！將重點(diǎn)重新放到 “無(wú)縫集成 JSF，第 2 部分: 借助 Seam 進(jìn)行對(duì)話” 中所介紹的 Open 18 應(yīng)用程序。您可能記得 Open 18 是個(gè)高爾夫球場(chǎng)目錄。用戶可以瀏覽球場(chǎng)的列表并隨后深入查看單個(gè)球場(chǎng)的細(xì)節(jié)。Open 18 還允許用戶創(chuàng)建、更新和刪除球場(chǎng)。在其 Web 1.0 版本中，用戶和這個(gè)應(yīng)用程序間的每個(gè)交互都會(huì)使頁(yè)面重載。
借助 Ajax，可以有多種改進(jìn) Open 18 應(yīng)用程序的方法，在我們繼續(xù)之前，您可以自己嘗試其中的一些方法。第一個(gè)可以做的事情是在 Open 18 和 Google Map 之間創(chuàng)建一個(gè) mashup。 時(shí)下，若不采用 mapping 實(shí)現(xiàn)，在 Internet 就走不多遠(yuǎn)，而如果添加此特性，您的用戶當(dāng)然會(huì)非常高興。將 Seam Remoting API 和 Google Maps Geocoder API 結(jié)合起來(lái)讓您可以定位 Google map 上的球場(chǎng)目錄中的每個(gè)球場(chǎng)。
|
借用 Google 的世界視圖
地理空間繪制乍聽(tīng)起來(lái)需要很多技巧，但若 Google Maps JavaScript API 能代您完成很多工作的話，那就另當(dāng)別論了。GMap2 類可以繪制地圖并負(fù)責(zé)視圖端口中的滾動(dòng)和縮放事件。另一個(gè) Google Maps 類 GClientGeocoder 則基于地址字符串解析地理空間的坐標(biāo)。您的工作只不過(guò)就是初始化地圖并為每個(gè)球場(chǎng)添加標(biāo)記。
要在地圖上放上標(biāo)記，首先要通過(guò)遠(yuǎn)端方法調(diào)用從服務(wù)器端組件獲取球場(chǎng)集。接下來(lái)，用 GClientGeocoder 將每個(gè)球場(chǎng)的地址翻譯成地理空間點(diǎn)（經(jīng)度和緯度）。最后，使用該點(diǎn)來(lái)在地圖的相應(yīng)坐標(biāo)上放置標(biāo)記。作為一個(gè)額外的小特性，您還可以將編輯圖標(biāo)旁邊的羅盤(pán)圖 標(biāo)裝備在目錄中的每行。當(dāng)單擊了目錄行中的羅盤(pán)圖標(biāo)時(shí)，地圖就會(huì)縮放直到所選球場(chǎng)出現(xiàn)在視圖內(nèi)。與此同時(shí)，此地圖還會(huì)在標(biāo)記上呈現(xiàn)一個(gè)氣球，顯示給定球場(chǎng) 的地名、地址、電話和 Web 站點(diǎn)。通過(guò)直接單擊地圖上的一個(gè)標(biāo)記也可以彈出相同的氣球。圖 2 顯示的是完成后的應(yīng)用程序的預(yù)覽：
圖 2. Google Maps mashup 的一個(gè)屏幕截圖
總 的來(lái)說(shuō)，地圖組件和面向位置數(shù)據(jù)的集成很有趣，此 mashup 尤其具啟迪意義。用戶現(xiàn)在可以實(shí)際查看地圖上每個(gè)球場(chǎng)的邊界！在 Map 模式，高爾夫球場(chǎng)屬性用淡綠色呈現(xiàn)。如果縮放功能足夠強(qiáng)大，那么在球場(chǎng)區(qū)域還會(huì)出現(xiàn)一個(gè)標(biāo)簽覆蓋圖，顯示此球場(chǎng)的名稱。Satellite 模式則更有趣，它顯示了球場(chǎng)的面貌。若縮放的程度足夠，甚至還可以看到每個(gè)球洞的特征，比如發(fā)球臺(tái)、球道和果嶺！高爾夫球場(chǎng)位置的 mashup 以及互動(dòng)性的地圖視圖就能讓您的努力有所回報(bào)。
|
編織進(jìn) Google Maps
Google Maps 很易于集成和嵌入到 Web 應(yīng)用程序。正如我已經(jīng)提到的，它負(fù)責(zé)了所有呈現(xiàn)地圖的所有細(xì)節(jié)并會(huì)提供一個(gè) API 來(lái)繪制地圖上的地理空間位置。GClientGeocoder 對(duì)象擔(dān)負(fù)所有解析地理空間位置和回送所需的經(jīng)度和緯度數(shù)據(jù)這樣的艱巨任務(wù)。
將 地址解析為地理空間點(diǎn)的方法存根與 Seam Remoting 方法存根的工作原理相同。當(dāng)該方法被調(diào)用來(lái)獲取返回值時(shí)，一個(gè)回調(diào)函數(shù)會(huì)傳遞給此方法。在那時(shí)，還會(huì)向 Google HQ 發(fā)送一個(gè) Ajax 請(qǐng)求，而且當(dāng)響應(yīng)回至瀏覽器時(shí)，此回調(diào)函數(shù)會(huì)執(zhí)行。Google Maps API 的智能界面讓定位變得非常文字化，因?yàn)樗诘闹挥朽]寄地址。您無(wú)需再為每個(gè)球場(chǎng)維護(hù)地理空間的坐標(biāo)，那樣只會(huì)增加混亂！這個(gè) API 上的額外的例程之后會(huì)使用緯度和經(jīng)度數(shù)據(jù)來(lái)為地圖上的這些位置構(gòu)建呈現(xiàn)標(biāo)記。
|
與地圖集成相關(guān)的 API 方法有兩個(gè)：Geocoder.getLatLng() 和 GMap.addOverlay()。首先，Geocoder.getLatLng() 方法將地址字符串解析為一個(gè) GLatLng 點(diǎn)。數(shù)據(jù)對(duì)象只用來(lái)包裝經(jīng)度和緯度值對(duì)。此方法的第二個(gè)實(shí)參是一個(gè)回調(diào) JavaScript 函數(shù)，一旦與 Google HQ 的通信完成，該函數(shù)即會(huì)執(zhí)行。此函數(shù)繼續(xù)執(zhí)行以通過(guò)使用 GMap.addOverlay() 來(lái)將一個(gè)標(biāo)記覆蓋圖添加到地圖上。默認(rèn)地，標(biāo)記以紅色的回形針表示。回形針的頂點(diǎn)指向地圖上的地址位置。
清單 5 顯示了設(shè)置 Google map 并向它添加標(biāo)記的 JavaScript 代碼。函數(shù)按執(zhí)行順序排列。除了新導(dǎo)入的 Google Maps API 腳本之外，您還應(yīng)該識(shí)別出 清單 3 中曾經(jīng)用到的 Seam Remoting 腳本。
清單 5. 映射 Open 18 和 Geocoder
| <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=GOOGLE_KEY"></script> <script type="text/javascript" src="seam/resource/remoting/resource/remote.js"></script> <script type="text/javascript" src="seam/resource/remoting/interface.js?courseAction"></script> <script type="text/javascript"> // <![CDATA[ var gmap = null; var geocoder = null; var markers = {}; var mapIsInitialized = false; GEvent.addDomListener(window, 'load', initializeMap); /** * Create a new GMap2 Google map and add markers (pins) for each of the * courses. */ function initializeMap() { if (!GBrowserIsCompatible()) return; gmap = new GMap2(document.getElementById('map')); gmap.addControl(new GLargeMapControl()); gmap.addControl(new GMapTypeControl()); // center on the U.S. (Lebanon, Kansas) gmap.setCenter(new GLatLng(38.2, -95), 4); geocoder = new GClientGeocoder(); GEvent.addDomListener(window, 'unload', GUnload); addCourseMarkers(); } /** * Retrieve the collection of courses from the server and add corresponding * markers to the map. */ function addCourseMarkers() { function onResult(courses) { for (var i = 0, len = courses.length; i < len; i++) { addCourseMarker(courses[i]); } mapIsInitialized = true; } Seam.Remoting.getContext().setConversationId("#{conversation.id}"); Seam.Component.getInstance("courseAction").getCourses(onResult); } /** * Resolve the coordinates of the course to a GLatLng point and adds a marker * at that location. */ function addCourseMarker(course) { var address = course.getAddress(); var addressAsString = [ address.getStreet(), address.getCity(), address.getState(), address.getPostalCode() ].join(" "); geocoder.getLatLng(addressAsString, function(latlng) { createAndPlaceMarker(course, latlng); }); } /** * Instantiate a new GMarker, add it to the map as an overlay, and register * events. */ function createAndPlaceMarker(course, latlng) { // skip adding marker if no address is found if (!latlng) return; var marker = new GMarker(latlng); // hide the course directly on the marker marker.courseBean = course; markers[course.getId()] = marker; gmap.addOverlay(marker); function showDetailBalloon() { showCourseInfoBalloon(this); } GEvent.addListener(marker, 'click', showDetailBalloon); } /** * Display the details of the course in a balloon caption for the specified * marker. You should definitely escape the data to prevent XSS! */ function showCourseInfoBalloon(marker) { var course = marker.courseBean; var address = course.getAddress(); var content = '<strong>' + course.getName() + '</strong>'; content += '<br />'; content += address.getStreet(); content += '<br />'; content += address.getCity() + ', ' + address.getState() + ' ' + address.getPostalCode(); content += '<br />'; content += course.getPhoneNumber(); if (course.getUri() != null) { content += '<br />'; content += '<a href="' + course.getUri() + '" target="_blank">' + course.getUri().replace('http://', '') + '</a></div>'; } marker.openInfoWindowHtml(content); } // ]]> </script> |
清單 5 乍看起來(lái)真是有點(diǎn)嚇人，但實(shí)際上，它所包含的內(nèi)容并不多。頁(yè)面加載后，Google map 就會(huì)使用 GMap2 構(gòu)造函數(shù)進(jìn)行初始化、插入到目標(biāo) DOM 元素并會(huì)以美國(guó)為中心。成功了！ 您現(xiàn)在就有了 Google Maps 顯示。比您所想的要容易一些，對(duì)么？一旦地圖初始化，球場(chǎng)標(biāo)記就會(huì)添加進(jìn)來(lái)。代碼的難點(diǎn)就是創(chuàng)建這些標(biāo)記，所以讓我們重點(diǎn)看看 addCourseMarkers() 函數(shù)，其中嵌入了 Seam Remoting API。
定位球場(chǎng)
為 了節(jié)省服務(wù)器資源，您希望遠(yuǎn)端調(diào)用檢索相同的球場(chǎng)列表，這些球場(chǎng)是在頁(yè)面被 JSF 呈現(xiàn)時(shí)加載進(jìn) conversation 作用域內(nèi)的。要想確保持有這個(gè)集合的對(duì)話能夠在遠(yuǎn)端調(diào)用的過(guò)程中被重新激活，此對(duì)話 ID 必須建立在 remoting 內(nèi)容的基礎(chǔ)上，正如本文之前討論的那樣。引用當(dāng)前對(duì)話 ID 的這個(gè)值綁定表達(dá)式 #{conversation.id} 在頁(yè)面呈現(xiàn)時(shí)被解析，而其值隨后會(huì)通過(guò) setConversationId() 方法傳遞給 Remoting Context。任何借助組件存根到遠(yuǎn)端方法的后續(xù)調(diào)用都會(huì)傳遞該值并激活相關(guān)的對(duì)話。對(duì)話激活后，同樣的球場(chǎng)列表才會(huì)可用。
|
要找到球場(chǎng)，下一步是使用 Seam.Remoting.getInstance() 獲取到 courseAction 組件的引用，然后執(zhí)行存根上的 getCourses() 方法。正如先前所介紹的，存根方法會(huì)采用回調(diào)函數(shù)作為其最后的實(shí)參，該實(shí)參用來(lái)捕獲響應(yīng)中的球場(chǎng)列表。注意到返回值不再是原語(yǔ)類型，而是用戶定義的 JavaBean 集。Seam 創(chuàng)建 JavaScript 結(jié)構(gòu)來(lái)模仿服務(wù)器端組件的方法簽名中所用的 JavaBean 類。在本例中，Seam 通過(guò)相同的 getters 和 setters 來(lái)將響應(yīng)反編排到代表 Course 條目的 JavaScript 對(duì)象。清單 5 中的很多地方都使用了球場(chǎng)對(duì)象上的 getter 方法來(lái)讀取球場(chǎng)數(shù)據(jù)。
在把球場(chǎng)放到地圖上的最后一個(gè)步驟中，每個(gè)球場(chǎng)的地址都被 GClientGeocoder 轉(zhuǎn)換成 GLatLng 點(diǎn)。該值隨后被用來(lái)創(chuàng)建 GMarker 小部件，這個(gè)小部件作為覆蓋圖添加到地圖上。
沒(méi)有羅盤(pán)的地圖
現(xiàn) 在，您的地圖已經(jīng)點(diǎn)綴了所有這些光鮮的標(biāo)記，但還不可能將球場(chǎng)目錄中的行與地圖上的標(biāo)記關(guān)聯(lián)起來(lái)。這時(shí)就需要羅盤(pán)圖標(biāo)發(fā)揮作用了。我們將添加多一點(diǎn) JavaScript，以便在該球場(chǎng)的羅盤(pán)圖標(biāo)被單擊時(shí)，能使用 Google Maps API 來(lái)縮放和居中地圖。清單 6 顯示了羅盤(pán)圖標(biāo)的組件標(biāo)記。該組件被插入到目錄中每一行的編輯圖標(biāo)之前。球場(chǎng)編輯功能在 “無(wú)縫集成 JSF，第 2 部分: 借助 Seam 進(jìn)行對(duì)話” 中有詳細(xì)的介紹。)
清單 6. 能呈現(xiàn)羅盤(pán)圖標(biāo)的組件標(biāo)記
| <h:graphicImage value="/images/compass.png" alt="[ Zoom ]" title="Zoom to course on map" |-------10--------20--------30--------40--------50--------60--------70--------80--------9| |-------- XML error: The previous line is longer than the max of 90 characters ---------| οnclick="focusMarker(#{_course.id}, true);" /> |
JavaScript 事件處理程序 focusMarker() 被注冊(cè)用來(lái)處理羅盤(pán)圖標(biāo)上的 onclick 事件。清單 7 中所示的 focusMarker() 方法在全局注冊(cè)表中為該球場(chǎng)查找之前注冊(cè)的 GMarker ，然后將此工作分配給來(lái)自 清單 5 的 showCourseInfoBalloon() 函數(shù)：
清單 7. focusMarker() 事件處理程序著重于選定球場(chǎng)上的地圖
| /** * Bring the marker for the given course into view and display the * details in a balloon. This method is registered in an onclick * handler on the compass icons in each row in the course directory. */ function focusMarker(courseId, zoom) { if (!GBrowserIsCompatible()) return; if (!mapIsInitialized) { alert("The map is still being initialized. Please wait a moment and try again."); return; } var marker = markers[courseId]; if (!marker) { alert("There is no corresponding marker for the course selected."); return; } showCourseInfoBalloon(marker); if (zoom) { gmap.setZoom(13); } } |
存儲(chǔ)球場(chǎng)集
清單 8 給出了服務(wù)器端組件上負(fù)責(zé)公開(kāi)之前獲取的球場(chǎng)的那個(gè)方法（為了簡(jiǎn)便起見(jiàn)，此清單中沒(méi)有包括為 無(wú)縫集成 JSF，第 2 部分: 借助 Seam 進(jìn)行對(duì)話 中的 Open 18 實(shí)現(xiàn)所創(chuàng)建的 CRUD 動(dòng)作處理程序）。
清單 8. CourseAction 組件公開(kāi) getCourses 方法
| @Name("courseAction") @Scope(ScopeType.CONVERSATION) public class CourseAction implements Serializable { /** * During a remote call, the FacesContext is <code>null</code>. * Therefore, you cannot resolve this Spring bean using the * delegating variable resolver. Hence, the required flag tells * Seam not to complain. */ @In(value="#{courseManager}", required=false) private GenericManager<Course, Long> courseManager; @DataModel private List<Course> courses; @DataModelSelection @In(value="course", required=false) @Out(value="course", required=false) private Course selectedCourse; @WebRemote public List<Course> getCourses() { return courses; } @Begin(join=true) @Factory("courses") public void findCourses() { System.out.println("Retrieving courses..."); courses = courseManager.getAll(); } // .. additional CRUD action handlers .. } |
正如之前所解釋的，方法存根可以包括一個(gè)可選的回調(diào) JavaScript 函數(shù)作為其最后一個(gè)實(shí)參。這也是為什么客戶端存根上的 getCourses() 對(duì)象只接受單一一個(gè)實(shí)參，而服務(wù)器端組件上的相應(yīng)方法則不接受任何實(shí)參。getCourses() 方法返回在呈現(xiàn)頁(yè)面時(shí)所出現(xiàn)的球場(chǎng)集。
|
沒(méi)有 FacesContext 的生活
至 此，您可能會(huì)奇怪所有這些 Seam Remoting 請(qǐng)求是如何與 JSF 生命周期協(xié)作的。實(shí)際上，從典型意義上講，它們并非如此。不驚動(dòng) JSF 生命周期才是讓這些請(qǐng)求如此輕量的原因。從 JavaScript 在組件存根上調(diào)用方法時(shí)，從 Seam Resource Servlet 傳遞調(diào)用并由 Remoting 指派對(duì)象進(jìn)行處理。由于 Resource Servlet 不 通過(guò) JSF 生命周期接受請(qǐng)求，所以 FacesContext 在遠(yuǎn)端調(diào)用過(guò)程中就不 可用。相反，Resource Servlet 使用其自身的生命周期來(lái)并入 Seam 組件容器。底線是：當(dāng)方法通過(guò) Seam Remoting API 執(zhí)行時(shí)，任何不解析成由 Seam 管理的對(duì)象的值綁定表達(dá)式都將是 null 的。此外，由 backing bean 使用的 JSF 組件綁定亦不可用。
在 Open 18 應(yīng)用程序的初始配置中，CourseAction bean 依賴于 Spring 框架的 JSF 變量解析器通過(guò)值綁定表達(dá)式 #{courseManager} 來(lái)將 CourseManager 對(duì)象注入到 backing bean。其中的問(wèn)題是，Spring 變量解析器依賴于 FacesContext 定位 Spring 容器。如果 FacesContext 不可用，則變量解析器就不能訪問(wèn)任何的 Spring bean。因而，當(dāng)通過(guò) Seam Remoting API 訪問(wèn)組件時(shí)，值綁定表達(dá)式 #{courseManager} 將會(huì)是 null。
如果在遠(yuǎn)端方法調(diào)用過(guò)程中需要大量使用 CourseManager 對(duì)象，那么上述情形就會(huì)遇到問(wèn)題了。因?yàn)?Seam 的默認(rèn)行為是強(qiáng)制依賴項(xiàng)存在，您需要用屬性 required=false 標(biāo)注 @In 注釋，以表明它是可選的。這么做會(huì)讓 Seam 在調(diào)用通過(guò)遠(yuǎn)端存根進(jìn)行時(shí)，不會(huì)有什么怨言。
下一節(jié)顯示了如何使用 Ajax4jsf 來(lái)合并應(yīng)用程序球場(chǎng)目錄頁(yè)和球場(chǎng)細(xì)節(jié)頁(yè)。這種增強(qiáng)的確 需要服務(wù)層對(duì)象來(lái)保持對(duì)球場(chǎng)的更改。然而，由于 Ajax4jsf 在調(diào)用動(dòng)作處理程序時(shí)使用的是完整的生命周期，因而 #{courseManager} 表達(dá)式會(huì)正常解析。
|
用 Ajax4jsf 進(jìn)行重呈現(xiàn)
Google Maps mashup 確實(shí)讓人興奮不已，但將它添加到 Open 18 應(yīng)用程序卻會(huì)引入一個(gè)小的設(shè)計(jì)問(wèn)題。當(dāng)用戶為了查看有關(guān)此球場(chǎng)的詳細(xì)信息而單擊目錄中的球場(chǎng)名時(shí)，頁(yè)面就會(huì)刷新。結(jié)果，地圖就會(huì)頻繁地重載。這些重載會(huì)將太多負(fù)荷添加給瀏覽器和服務(wù)器，還會(huì)將地圖恢復(fù)到其原始位置。
|
要 防止地圖重載，必須將所有動(dòng)作都限制為單一頁(yè)面加載。不幸的是，提交表單的處理與頁(yè)面請(qǐng)求緊密相連。這種緊密的耦合是 Web 瀏覽器的默認(rèn)行為。您所需要的是數(shù)據(jù)能在瀏覽器不再請(qǐng)求頁(yè)面的前提下被發(fā)送到服務(wù)器，而這恰恰是 Ajax4jsf 組件庫(kù)的設(shè)計(jì)初衷。在目錄清單中的 Name 列，用 a4j:commandLink 替換 h:commandLink 標(biāo)記讓 Ajax4jsf 在任何單擊了球場(chǎng)鏈接的地方都能發(fā)揮其作用。當(dāng)鏈接的 Ajax4jsf 版本被激活時(shí)，它就會(huì)執(zhí)行在動(dòng)作屬性 #{courseAction.selectCourseNoNav} 中通過(guò)方法綁定表達(dá)式表明的方法，然后返回包含要被插入到目錄中的球場(chǎng)細(xì)節(jié)的替代 markup。
selectCourseNoNav() 方法執(zhí)行與 selectCourse() 方法相同的邏輯，只不過(guò)它沒(méi)有返回值來(lái)確保 JSF 不尋求導(dǎo)航事件。畢竟，Ajax 請(qǐng)求的意義就是防止瀏覽器再次請(qǐng)求頁(yè)面。所返回的 XHTML markup 插入到地圖下面的區(qū)域之內(nèi)，而且不會(huì)破壞地圖的狀態(tài)。清單 9 中所示的組件代替了 “無(wú)縫集成 JSF，第 2 部分: 借助 Seam 進(jìn)行對(duì)話” 中 courses.jspx 的原始版本中所用的 h:commandLink：
清單 9. 用于選擇球場(chǎng)的 Ajax4jsf 鏈接
| <a4j:commandLink id="selectCourse" action="#{courseAction.selectCourseNoNav}" value="#{_course.name}" /> |
正如之前提到的，有兩種方法來(lái)指明頁(yè)面中的哪個(gè)區(qū)域需要增量更新。一種方法是針對(duì)單個(gè)組件，Ajax4jsf 動(dòng)作組件的 reRender 屬性中指定它們的組件 ID。另一種方法是在 a4j:outputPanel 標(biāo)記中包裹頁(yè)面中的區(qū)域并借助該標(biāo)記的 ajaxRendered 屬性將這些區(qū)域標(biāo)識(shí)為 “由 Ajax 呈現(xiàn)的”。清單 10 顯示了查看模板中能輸出所選球場(chǎng)細(xì)節(jié)的那個(gè)區(qū)域，方法是采用輸出-面板方式：
清單 10. 用 Ajax 呈現(xiàn)的細(xì)節(jié)面板
| <a4j:outputPanel id="detailPanel" ajaxRendered="true"> <h:panelGroup id="detail" rendered="#{course.id gt 0}"> <h3>Course Detail</h3> <!-- table excluded for brevity --> </h:panelGroup> </a4j:outputPanel> |
配置 Ajax4jsf
|
在運(yùn)行所 更新的代碼之前，需要配置您應(yīng)用程序中的 Ajax4jsf。首先，向應(yīng)用程序類路徑添加 jboss-ajax4jsf.jar 庫(kù)及其依賴項(xiàng) oscache.jar。其次，向 web.xml 添加 Ajax4jsf 過(guò)濾器。該過(guò)濾器的定義如清單 11 所示。請(qǐng)注意 Ajax4jsf 過(guò)濾器必須是在 web.xml 文件內(nèi)定義的第一個(gè)過(guò)濾器。與 Seam 的 Resource Servlet 非常類似，這個(gè)過(guò)濾器處理由 Ajax4jsfs 組件發(fā)起的遠(yuǎn)端調(diào)用。與 Seam 的遠(yuǎn)端調(diào)用不同，JSF 生命周期在 Ajax4jsf 異步請(qǐng)求過(guò)程中是 活動(dòng)的，因而需要 servlet 過(guò)濾器而非常規(guī)的 servlet。此外，還需要將 Facelets 視圖處理程序的配置從 faces-config.xml 文件移到 web.xml，在后者中，該配置在 servlet 上下文參數(shù)中定義。
清單 11. 配置 Ajax4jsf
| <context-param> <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> <param-value>org.jboss.seam.ui.facelet.SeamFaceletViewHandler</param-value> </context-param> <filter> <filter-name>Ajax4jsf Filter</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>Ajax4jsf Filter</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping> |
一旦將清單 11 中的庫(kù)和安裝好的 markup 包括到 web.xml 文件，就可以使用 Ajax4jsf 了！但需要確保將 Ajax4jsf 標(biāo)記庫(kù)定義 xmlns:a4j="https://ajax4jsf.dev.java.net/ajax" 添加到將要使用 Ajax4jsf 標(biāo)記的視圖模板。當(dāng)然，還有使用這個(gè)庫(kù)可以實(shí)現(xiàn)的許多其他功能，本文未能詳述。有關(guān)使用 Ajax4jsf 的更多信息和示例，請(qǐng)參看 參考資料。
|
再返回來(lái)！
至 此，Open 18-Google Maps mashup 就已完全只讀。圍繞 Ajax 有很多令人興奮的事情，其核心就是能在不重載頁(yè)面的情況下更改后端數(shù)據(jù)。我們不妨為我們的 Google map 添加一些有趣的東西以使其能發(fā)送回一些數(shù)據(jù)。為了演示，假設(shè)即使 Google 能將郵寄地址解析為經(jīng)度和緯度，用戶還是想要為 pin 指定一個(gè)定制的位置。更準(zhǔn)確地說(shuō)，是用戶想讓 pin 指向俱樂(lè)部會(huì)所或給定球場(chǎng)的第一個(gè)發(fā)球臺(tái)。不幸的是，Google Map API 讓這個(gè)對(duì) Open 18 應(yīng)用程序的最后增強(qiáng)不大容易實(shí)現(xiàn)。
首先，讓標(biāo)記能被拖動(dòng)。要開(kāi)啟此特性，只需在被實(shí)例化時(shí)向 GMarker 添加 draggable 標(biāo)志。接下來(lái)，注冊(cè)一個(gè) JavaScript 函數(shù)來(lái)偵聽(tīng)當(dāng)用戶結(jié)束拖動(dòng)標(biāo)記時(shí)所激發(fā)的 “拖動(dòng)結(jié)束” 事件。在這個(gè)回調(diào)函數(shù)中，為了保存新的點(diǎn)，在 courseAction 存根上執(zhí)行了一個(gè)新方法 setCoursePoint() 。
清單 12 給出了修改后的 createAndPlaceMarker 函數(shù)。考慮到放置這個(gè)標(biāo)記時(shí)在 Course 條目上的那個(gè)定制點(diǎn)，addCourseMarker() 函數(shù)也進(jìn)行了修改。
清單 12. 啟用了標(biāo)記拖動(dòng)功能的更新后的 JavaScript
| function addCourseMarker(course) { var address = course.getAddress(); if (course.getPoint() != null) { var point = course.getPoint(); var latlng = new GLatLng(point.getLatitude(), point.getLongitude()); createAndPlaceMarker(course, latlng); } else { var addressAsString = [ address.getStreet(), address.getCity(), address.getState(), address.getPostalCode() ].join(" "); geocoder.getLatLng(addressAsString, function(latlng) { createAndPlaceMarker(course, latlng); }); } } function createAndPlaceMarker(course, latlng) { // skip adding marker if no address is found if (!latlng) return; var marker = new GMarker(latlng, { draggable: true }); // hide the course directly on the marker marker.courseBean = course; markers[course.getId()] = marker; gmap.addOverlay(marker); function showDetailBalloon() { showCourseInfoBalloon(this); } function assignPoint() { var point = Seam.Remoting.createType("com.ibm.dw.open18.Point"); point.setLatitude(this.getPoint().lat()); point.setLongitude(this.getPoint().lng()); var courseActionStub = Seam.Component.getInstance("courseAction"); courseActionStub.setCoursePoint(this.courseBean.getId(), point); } GEvent.addListener(marker, 'click', showDetailBalloon); GEvent.addListener(marker, 'dragstart', closeInfoBalloon); GEvent.addListener(marker, 'dragend', assignPoint); } |
雖然還沒(méi)有大功告成，但已經(jīng)離之不遠(yuǎn)了！還需要向服務(wù)器端組件添加一個(gè)方法以保存這個(gè) GLatLng 點(diǎn)。再堅(jiān)持一會(huì)，因?yàn)槟枰匦略L問(wèn) Open 18 應(yīng)用程序的 Spring 集成后才能實(shí)現(xiàn) mashup 的這個(gè)最后的特性。（參看 “無(wú)縫集成 JSF，第 2 部分: 借助 Seam 進(jìn)行對(duì)話” 來(lái)重新訪問(wèn) Spring 集成的詳細(xì)信息。）
|
Spring 集成回顧
正 如之前所討論的，我最初將 Spring 容器集成到 Seam 中所采用的變量解析器方法有其自身的局限。坦白地講，該方法己經(jīng)發(fā)展到了盡頭，現(xiàn)在該是和它說(shuō)再見(jiàn)的時(shí)候了。大多數(shù)的 Seam 特性均涉及到了 JSF，而 Seam 的某些屬性卻工作于 JSF 生命周期之外。要獲得與 Spring 的真正集成，需要比定制變量解析器更好的解決方案。所幸的是，Seam 的開(kāi)發(fā)人員已經(jīng)開(kāi)始著手解決這種需求，并添加了針對(duì) Spring 的 Seam 擴(kuò)展。Spring 集成包利用了 Spring 2.0 中的新特性來(lái)創(chuàng)建基于模式的擴(kuò)展點(diǎn)。這些擴(kuò)展在 bean 定義文件和名稱空間處理程序中啟用了定制 XML 名稱空間，在 Spring 容器的啟動(dòng)過(guò)程中對(duì)這些標(biāo)記進(jìn)行操作。
用于 Spring 的 Seam 名稱空間處理程序（您可能需要大聲讀幾遍才能明白其中的含義）有幾種與 Spring 容器進(jìn)行交互的方式。要去除定制的變量解析器，需要將 Spring bean 作為 Seam 組件公開(kāi)。seam:component 標(biāo)記可專門(mén)用于此目的。將此標(biāo)記放置于 Spring bean 聲明之內(nèi)會(huì)通知 Seam Spring bean 應(yīng)該被代理或包裹成一個(gè) Seam 組件。在這一點(diǎn)上，Seam 雙射機(jī)制會(huì)將這個(gè) bean 視為仿佛它已經(jīng)被 @Name 注釋，只有現(xiàn)在，您才能不需要 FacesContext 來(lái)填補(bǔ) Seam 和 Spring 間的差距！
配置 Seam-Spring 集成異常容易。第一步都完全無(wú)需涉及任何代碼更改！所有您需要做的只是確保使用了 Spring 2.0 和 Seam 1.2.0 或后續(xù)發(fā)布。（自本系列的第一篇文章發(fā)表以來(lái)，Seam 已經(jīng)有了迅速發(fā)展，所以應(yīng)該準(zhǔn)備好進(jìn)行 一次升級(jí)。）IOC 集成打包成一個(gè)單獨(dú)的 JAR，jboss-seam-ioc.jar，所以除了已經(jīng)提到的 JAR 之外，應(yīng)該將它也包含到應(yīng)用程序的類路徑中。
第 二個(gè)步驟也不會(huì)涉及到 Seam 配置。這次，您看到的是 Spring 配置。首先，向其中定義了 bean 的 Spring 配置 XML 添加 Seam XML 模式聲明。這個(gè)文件的標(biāo)準(zhǔn)名稱是 applicationContext.xml，但示例應(yīng)用程序使用了一個(gè)更為合適的名字 spring-beans.xml。接下來(lái)，在任何您想要公開(kāi)給 JSF 的 Spring bean 的定義內(nèi)添加 seam:component 標(biāo)記。在 Open 18 應(yīng)用程序中，將此標(biāo)記嵌套在 courseManager bean 定義內(nèi)。要查看整個(gè) bean 列表，請(qǐng)參考本文 示例應(yīng)用程序 的 spring-beans.xml 文件。
有了改進(jìn)后的 Spring 集成，就無(wú)需在 courseManager 屬性頂上的 @In 注釋中指定值綁定了，亦無(wú)需 required=false 屬性。取而代之的是 create=true 屬性以便 Seam 能夠知道從 Spring 容器中去獲取 bean 并將其裝飾成 Seam 組件。清單 13 中的代碼顯示了 CourseAction 類中支持球場(chǎng)的地理空間點(diǎn)更新的相關(guān)部分：
清單 13. CourseAction 上的新的 setPoint 方法
| @WebRemote public void setCoursePoint(Long id, Point point) { System.out.println("Saving new point: " + point + " for course id: " + id); Course course = courseManager.get(id); course.setPoint(point); courseManager.save(course); } |
現(xiàn)在您盡可以放松一下。沒(méi)錯(cuò)，您已經(jīng)成功地使自己的應(yīng)用程序 “Ajax 化” 了！
|
結(jié)束語(yǔ)
在本文中，您看到 Open 18 應(yīng)用程序從一個(gè)異常簡(jiǎn)單的 CRUD 實(shí)現(xiàn)擴(kuò)展成了一個(gè)十分復(fù)雜的 mashup 并集成了 Ajax 風(fēng)格的頁(yè)面以呈現(xiàn) Google Maps。您也看到了如何利用 Seam Remoting API 和 Ajax4jsf 并學(xué)習(xí)了集成 Seam 和 Spring 框架的一種更為復(fù)雜的方法。
Seam Remoting 和 Ajax4jsf 通過(guò)擴(kuò)展 JFS 組件模型使其包括 Ajax 通信極大地補(bǔ)充了該模型。本文中給出的代碼均無(wú)需直接與 XMLHttpRequest JavaScript 對(duì)象交互。相反，所有工作都藏于較高層 API 背后，讓您可以直接查詢和處理服務(wù)器端組件，也可以調(diào)用動(dòng)作和更新給定頁(yè)面的某些部分。得益于 Ajax 的魔力，所有的工作均可異步發(fā)生。
在本系列的這三篇文章中，您學(xué)習(xí)了大量有關(guān)結(jié)合了 Seam 的 JSF 開(kāi)發(fā)的內(nèi)容，但我還未能盡述 Seam 的所有特性！就讓 無(wú)縫集成 JSF 系列中的討論和示例作為您學(xué)習(xí)如何將 Seam 用在 JSF 項(xiàng)目中以使其更容易創(chuàng)建的很好的開(kāi)始點(diǎn)吧。越多地接觸 Seam，您就越能發(fā)現(xiàn)它的可愛(ài)之處。
|
下載
| j-seam3.zip | 277K | HTTP |
| 關(guān)于下載方法的信息 | ||||
注意：
參考資料
學(xué)習(xí)- 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 。
- “Seam-無(wú)縫集成 JSF，第 1 部分: 為 JSF 量身定做的應(yīng)用程序框架”（Dan Allen，developerWorks，2007 年 4 月）：概述了 Seam 對(duì) JSF 生命周期的增強(qiáng)，包括第 2 部分中使用的內(nèi)容。
- “無(wú)縫集成 JSF，第 2 部分: 借助 Seam 進(jìn)行對(duì)話”（Dan Allen，developerWorks，2007 年 5 月）：使用 Seam 構(gòu)建一個(gè)有狀態(tài)的 CRUD 應(yīng)用程序。
- “使用 JavaServer Faces 構(gòu)建 Apache Geronimo 應(yīng)用程序，第 3 部分：使用 ajax4jsf 添加 Ajax 功能”（Dale de los Reyes，developerWorks，2006 年 10 月）：在無(wú)需編寫(xiě)任何 JavaScript 代碼的前提下將 Ajax 引入到現(xiàn)有的 JSF 應(yīng)用程序。
- “Ajax 技術(shù)資源中心：來(lái)自 developerWorks 社區(qū)的文章、教程、討論、下載等等諸多內(nèi)容。
- Ten Good Reasons To Use Seam：JBoss 給出的原因列表，其中即有富客戶機(jī)開(kāi)發(fā)，又有 “一旦使用就不能釋手”，真是 “包羅萬(wàn)象” 呀。
- “Google Maps API Tutorial”（Mike Williams，Mike 的一個(gè)小 Web 頁(yè)）：學(xué)習(xí)如何定制您的 Google map 的顯示。
- “Integrating the Google Web Toolkit and JSF using G4jsf”（Sergey Smirnov，TheServerSide.com，2006 年 8 月）：G4jsf 是 Ajax4jsf 開(kāi)發(fā)人員帶給您的又一個(gè)令人興奮不已的技術(shù)。
- “AJAX without the J: Thoughts on AJAX from a JSF Perspective”（Sergey Smirnov，Exadel Blogs，2006 年 2 月）：有關(guān)無(wú) JavaScript 的 Ajax 編程的更多信息。
- developerWorks Java 技術(shù)專區(qū)：這里有數(shù)百篇關(guān)于 Java 編程方方面面的文章。
獲得產(chǎn)品和技術(shù)
- 下載 JBoss Seam：獲得完整的發(fā)行版，包括附帶的例子應(yīng)用程序。
- Ajax4jsf：將 Ajax 功能添加給現(xiàn)有的 JSF 組件。
- RichFaces：構(gòu)建在 Ajax4jsf 之上來(lái)為 JSF Web 應(yīng)用程序添加開(kāi)箱即用的豐富性。
- Firebug：該 Firefox 插件是一個(gè)在處理 Ajax 應(yīng)用程序時(shí)不可或缺的工具。
- 下載 Maven 2：源碼示例中使用的軟件工程管理和綜合工具。Maven 會(huì)自動(dòng)在構(gòu)建過(guò)程中下載依賴項(xiàng)。
- Facelets：用于 Seam 應(yīng)用程序的首選 JSF 視圖處理程序。
- Appfuse：實(shí)際上向您提供了非常全面的基于 Maven 2 的項(xiàng)目框架，可用于根據(jù)它構(gòu)建自己的應(yīng)用程序。
討論
- Seam blog：了解其他用戶對(duì) Seam 的看法并在 Seam 社區(qū)論壇 提交反饋。
- developerWorks Ajax 論壇: 面向?qū)W習(xí)或已經(jīng)使用 Ajax 的 Web 開(kāi)發(fā)人員的一個(gè)活躍社區(qū)。
- 通過(guò)參與 developerWorks blogs 加入 developerWorks 社區(qū)。
關(guān)于作者
Dan Allen 目前是 CodeRyte 的一名高級(jí) Java 工程師。他還是一名熱情的開(kāi)放源碼擁護(hù)者，每當(dāng)他看到企鵝時(shí)就會(huì)有一點(diǎn)瘋狂。 從 Cornell 大學(xué)畢業(yè)并獲得材料科學(xué)與工程學(xué)位，Dan 對(duì) Linux 和開(kāi)放源碼軟件非常著迷。從那以后，他就沉浸在 Web 應(yīng)用程序領(lǐng)域，最近幾年則專攻 Java 相關(guān)的技術(shù)，包括 Spring、Hibernate、Maven 2 和豐富的 JSF 堆棧。您可以在 http://www.mojavelinux.com 訂閱 Dan 的 blog，以跟蹤他的開(kāi)發(fā)經(jīng)驗(yàn)。 | ||
轉(zhuǎn)載于:https://www.cnblogs.com/lanzhi/archive/2008/11/23/6469796.html
總結(jié)
以上是生活随笔為你收集整理的Seam - 无缝集成 JSF，第 3 部分: 用于 JSF 的 Ajax的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Ubuntu gbk,utf-8 转换
- 下一篇： 李笑愁体内为什么有两个暴俎虫（李笑愁）