http://developers.sun.com.cn/Java/petstore.html

?

?

使用 Ajax 創(chuàng)建用于無(wú)縫數(shù)據(jù)交互的 Web 2.0 web 應(yīng)用程序是一項(xiàng)復(fù)雜的任務(wù)，Ajax 是一種包含（但不僅限于）Asynchronous JavaScript 和 XML 的技術(shù)。為了幫助您準(zhǔn)確理解什么是 Web 2.0，以及 Ajax 如何改善用戶體驗(yàn)， Java BluePrints 程序 小組開發(fā)了 Java Pet Store 2.0 參考應(yīng)用程序。通過(guò)探索 Pet Store 2.0 應(yīng)用程序的用例、設(shè)計(jì)和實(shí)現(xiàn)，您將了解構(gòu)建具有類似功能的應(yīng)用程序的更多信息。

Java Pet Store 2.0 演示程序提供了一個(gè)寵物購(gòu)買者、出售者和只想看看寵物的寵物愛好者的聯(lián)系場(chǎng)景。該程序演示了如何使用 Java Platform, Enterprise Edition 5 （Java EE 5）開發(fā)支持 Ajax 的 Web 2.0 應(yīng)用程序。它還附帶了獲得 BSD-style 許可的完整的源代碼，因此您可以使用它進(jìn)行試驗(yàn)，并在您自己的應(yīng)用程序中使用。

同時(shí)，Java Pet Store 2.0 演示程序還演示了支持 Ajax 的 JavaServer Faces 組件庫(kù)和 Java Persistence API、model-view-controller (MVC) 和其他設(shè)計(jì)模式，以及 mashup 的用法，其中 mashup 是組合了多個(gè)源的數(shù)據(jù)的 web 應(yīng)用程序。 試用 Live Java Pet Store 2.0 應(yīng)用程序 并 下載 。

本文對(duì) Java Pet Store 2.0 演示程序中的許多特性進(jìn)行概述，并演示這些內(nèi)容如何由用戶驅(qū)動(dòng)、組織和控制。

Java Pet Store 2.0 演示程序是一個(gè) Web 2.0 應(yīng)用程序。到底什么是 Web 2.0 呢？

在歷史上，web 站點(diǎn)最初只是作為一個(gè) HTML 頁(yè)面的集合，僅僅提供一些與公司或主題有關(guān)的信息。許多這類站點(diǎn)其實(shí)就是在做廣告。隨著時(shí)間的推移，web 站點(diǎn)演變?yōu)榘瑒?dòng)態(tài)的、允許用戶輸入信息或需求、以某類表單形式呈現(xiàn)的頁(yè)面。信息被傳遞到服務(wù)器，服務(wù)器隨后向用戶返回一個(gè)頁(yè)面。用戶的瀏覽器頁(yè)面重新加 載以包含請(qǐng)求的信息。一些流行的動(dòng)態(tài)特性包括投票、調(diào)查和商品搜索。Applet 和類似的應(yīng)用程序也允許用戶在線玩游戲和與他人聊天。無(wú)論大多數(shù)這類站點(diǎn)多么動(dòng)態(tài)，其內(nèi)容始終由站點(diǎn)所有者控制，而且以所有者覺(jué)得最適合 web 特性的方式安排導(dǎo)航。

有了 Web 2.0，web 站點(diǎn)轉(zhuǎn)變?yōu)橛捎脩趄?qū)動(dòng)，而不是由所有者驅(qū)動(dòng)。用戶可以添加自己的內(nèi)容，標(biāo)記自己和其他人添加的內(nèi)容 —— 從而，數(shù)據(jù)根據(jù)公眾的需求進(jìn)行組織。此外，借助 Ajax 這樣的技術(shù)，頁(yè)面不需要完全重新加載，改善了用戶體驗(yàn)。數(shù)據(jù)片段在后臺(tái)異步傳輸，從而只需刷新一小部分頁(yè)面，為用戶提供了更接近于桌面應(yīng)用程序的使用體 驗(yàn)。

BluePrints 小組使用 Web 2.0 創(chuàng)建了 Java Pet Store 2.0 參考應(yīng)用程序：其中的所有內(nèi)容都是用戶驅(qū)動(dòng)的，而且允許用戶以對(duì)自己有意義的方式標(biāo)記數(shù)據(jù)。此外，Java Pet Store 演示程序在整個(gè)程序中使用一個(gè) Ajax 用戶界面（UI），提供了一種類似于桌面應(yīng)用程序的更加豐富的用戶體驗(yàn)。最后，Java Pet Store 演示程序包含活動(dòng)服務(wù)的動(dòng)態(tài)數(shù)據(jù)和 mashup。本文將定義所有這些特性并解釋其中涉及的技術(shù)。

您可能訪問(wèn)過(guò)這樣一種 web 站點(diǎn)，每次單擊一個(gè)菜單項(xiàng)或鏈接時(shí)都需要重新加載整個(gè)頁(yè)面。這不僅減緩了應(yīng)用程序，而且會(huì)刺激眼睛，有時(shí)還會(huì)使您不知所措，特別是當(dāng)您在查看一個(gè)包含很多 數(shù)據(jù)的頁(yè)面時(shí)。為了克服其中的一些問(wèn)題，Java Pet Store 演示程序中的所有頁(yè)面都使用 Ajax 創(chuàng)造了一種更加流暢的用戶體驗(yàn)，而且避免了煩人的整個(gè)頁(yè)面重載。

Ajax 在 HTML 頁(yè)面中使用 JavaScript 技術(shù)異步調(diào)用服務(wù)器并取回?cái)?shù)據(jù)。然后，JavaScript 技術(shù)可以使用此數(shù)據(jù)更新或修改 HTML 頁(yè)面的文檔對(duì)象模型（Document Object Model，DOM）。起初，開發(fā)人員使用 Ajax 和 XML 文檔表示數(shù)據(jù)，但是他們逐漸改用其他格式了。

Ajax 交互允許將表示邏輯從數(shù)據(jù)中明確地分離出來(lái)。HTML 頁(yè)面可以只更新所需的小部分?jǐn)?shù)據(jù)，而無(wú)需在顯示每次更改時(shí)都重新加載整個(gè)頁(yè)面。需要一種不同的服務(wù)器端架構(gòu)來(lái)支持這種交互模式。傳統(tǒng)情況下，服務(wù)器端 web 應(yīng)用程序主要用于為導(dǎo)致一個(gè)服務(wù)器調(diào)用的每個(gè)客戶機(jī)事件生成 HTML 文檔。客戶端然后針對(duì)每個(gè)響應(yīng)刷新并重新呈現(xiàn)完整的 HTML 頁(yè)面。富 web 應(yīng)用程序（比如 Java Pet Store 2.0 演示程序）主要關(guān)注一個(gè) HTML 文檔的客戶機(jī)抓取，它用作一個(gè)根據(jù)客戶端事件注入內(nèi)容的模板或容器，使用從服務(wù)器端組件獲取的數(shù)據(jù)。

當(dāng)您使用這個(gè) Java Pet Store 應(yīng)用程序時(shí)，您將會(huì)看到頁(yè)面上的內(nèi)容被無(wú)縫地更改了，無(wú)需重新加載真?zhèn)€頁(yè)面。該應(yīng)用程序也將 Ajax 用于其他特性。圖 1 展示了一些特殊的特性。

Figure 1. Java Pet Store 2.0 主屏幕

?

當(dāng)將鼠標(biāo)放到菜單項(xiàng)上時(shí)，應(yīng)用程序主頁(yè)左側(cè)的導(dǎo)航菜單還顯示了一個(gè) 魚眼（fish-eye） ，一種好像通過(guò)超廣角攝像機(jī)鏡頭看到的可視的畸變。這是一個(gè)使用 Ajax 和 JavaScript 技術(shù)使頁(yè)面更生動(dòng)的有趣的示例。盡管一些查看者可能討厭生動(dòng)的頁(yè)面，但 Ajax 的這種用法顯示了它使頁(yè)面更生動(dòng)的能力。

只要用戶單擊一個(gè)寵物類型，例如 dogs，屏幕中間顯示的鸚鵡將會(huì)被更新為一副狗的圖片，出現(xiàn)新的 Ajax 導(dǎo)航，屏幕底部出現(xiàn)一個(gè)滾動(dòng)條。圖 2 在結(jié)果頁(yè)面上標(biāo)識(shí)了這些部分。

圖 2. 包含 Ajax 導(dǎo)航、滾動(dòng)條和陰影窗格的第二個(gè)屏幕

?

Java Pet Store 應(yīng)用程序的管理員在主頁(yè)左側(cè)的導(dǎo)航欄中只提供了主要的寵物類別，以及一些基本的導(dǎo)航。用戶提供具體的內(nèi)容：待售的寵物。此外，用戶可以標(biāo)記他們自己的描 述，或者以對(duì)它們有意義的方式將其應(yīng)用到內(nèi)容中。通過(guò)這種方式，Java Pet Store 應(yīng)用程序現(xiàn)在基于用戶驅(qū)動(dòng)內(nèi)容了。

圖 3 展示了單擊一個(gè)類別的狗時(shí)顯示的頁(yè)面。該頁(yè)面包含一些值得注意的特性。屏幕底部的滾動(dòng)條顯示幾種狗的照片。單擊任何一張照片，以前顯示的狗的大圖片就會(huì)被您選擇的狗的圖片無(wú)縫地取代。

圖 3. 在狗類別中導(dǎo)航

?

如果單擊連續(xù)的 Ajax 滾動(dòng)條中的箭頭，后臺(tái)代碼將會(huì)異步地抓取一個(gè)類別中的一組圖片的片段。從而，當(dāng)用戶在照片上滾動(dòng)時(shí)，滾動(dòng)條流暢地顯示似乎是連續(xù)的列表。通過(guò)這種方式，用 戶不必刷新一個(gè)頁(yè)面。這是 Ajax 如何改善用戶體驗(yàn)的一個(gè)很好的示例。在沒(méi)有 Ajax 的 web 應(yīng)用程序中，當(dāng)用戶在圖片列表中滾動(dòng)時(shí)，應(yīng)用程序必須向服務(wù)器發(fā)出另一個(gè)請(qǐng)求，以抓取整個(gè)新頁(yè)面，然后再次顯示頁(yè)面。借助 Ajax，應(yīng)用程序可以抓取下一組數(shù)據(jù) —— 在本示例中為圖像 URL —— 然后僅更新頁(yè)面的一部分取代顯示的圖像。此外，應(yīng)用程序的客戶端可以緩存一些數(shù)據(jù)，并當(dāng)用戶在滾動(dòng)圖片列表中滾動(dòng)時(shí)重用這些數(shù)據(jù)，這樣就避免了再次與服務(wù) 器通信。

滾動(dòng)條上面是陰影窗格。該窗格包含大量特性，其中之一就是另一個(gè)箭頭集，包含一個(gè)向上的箭頭或向下的箭頭。當(dāng)用戶單擊該箭頭集時(shí)，將會(huì)出現(xiàn)一個(gè)顯示了寵物詳細(xì)信息的陰影窗格。這是一個(gè)很普通的 Ajax 用例。陰影窗格并不顯眼，而且可以輕松關(guān)閉或隱藏。

在陰影窗格上，用戶也可以使用 PayPal 服務(wù)向出售者支付費(fèi)用。當(dāng)用戶單擊 Pet Store 2.0 應(yīng)用程序中的 PayPal 按鈕購(gòu)買寵物時(shí)，就會(huì)出現(xiàn) PayPal 開發(fā)人員沙箱頁(yè)面。當(dāng)然，在實(shí)際的應(yīng)用程序中，需要使用一個(gè)允許用戶購(gòu)買寵物的真實(shí)的 PayPal 帳戶。

最后，注意圖 3 左側(cè)的導(dǎo)航欄。滾動(dòng)到任何一項(xiàng)上面時(shí)，將會(huì)打開一個(gè)子類別的 “手風(fēng)琴”，無(wú)需重新加載頁(yè)面。此處，Ajax 允許用戶在各種寵物子類別之間輕松導(dǎo)航。它還允許 BluePrints 小組以一種可視的有效方式呈現(xiàn)一個(gè)大的類別和子類別集。

Java Pet Store 演示程序中的每個(gè)頁(yè)面頂部都有一個(gè)共同的新聞欄，如圖 1 所示。它可以是一個(gè)新聞欄，或滾動(dòng)頂部的 4 個(gè)標(biāo)題的滾動(dòng)欄，這些標(biāo)題來(lái)自 java.net 的 BluePrints 項(xiàng)目 RSS 提要。用戶可以單擊新聞欄的標(biāo)題直接跳轉(zhuǎn)到的 java.net 上的 RSS 項(xiàng)，或者單擊 BluePrints 的文字 News，這將跳轉(zhuǎn)到一個(gè)在應(yīng)用程序 BluePrints News 中創(chuàng)建的頁(yè)面。

RSS 是一個(gè)輕量型 XML 文檔，設(shè)計(jì)用于共享標(biāo)題和其他 web 內(nèi)容。RSS 語(yǔ)法定義一個(gè)包含一組類似 HTML 的標(biāo)記 XML 文檔，用于共享新聞標(biāo)題、文章標(biāo)題等內(nèi)容。每個(gè) RSS XML 文件包含關(guān)于站點(diǎn)的靜態(tài)信息和關(guān)于新事件的動(dòng)態(tài)信息，所有信息都位于一對(duì)開始和結(jié)束標(biāo)記之間。web 站點(diǎn)然后將這些 RSS 提要向想要這些數(shù)據(jù)的標(biāo)題鏈接的人公開。一旦關(guān)于每個(gè)項(xiàng)的信息是 RSS 格式，稱為新聞聚合器的 RSS 感知的程序可以檢測(cè)到更改的提要，并用適當(dāng)?shù)姆绞交貞?yīng)這些更改。

在本例中，java.net 提供了 RSS 服務(wù)，因此 XML 文檔和 Java Pet Store 應(yīng)用程序就是一個(gè)聚合器，它們可以將 XML 文件解碼為適合作為新聞欄的格式，新聞欄作為到新聞和博客的活動(dòng)鏈接。

新聞欄分散在 Java Pet Store 演示程序的所有頁(yè)面，而且它包含一個(gè)到新聞頁(yè)面的鏈接，以及到一些流行故事和博客的鏈接，這些故事和博客來(lái)自 java.net 上的 BluePrints 活動(dòng)公告 RSS 提要。用戶可以單擊 Next 和 Previous 按鈕獲得更多故事。Ajax 的使用避免了刷新整個(gè)頁(yè)面。相反，只替換了新聞項(xiàng)，允許讓頁(yè)面模板保持原樣。

Java Pet Store 演示程序允許用戶使用一個(gè)描述性單詞為寵物添加標(biāo)記，比如 awesome ，或者使用毛的顏色、種類名稱或其它特征。如圖 1 所示，主頁(yè)右側(cè)顯示了一個(gè)標(biāo)記集（tag cloud）。這允許用戶通過(guò)用戶驅(qū)動(dòng)的內(nèi)容分類瀏覽內(nèi)容。

當(dāng)用戶為寵物創(chuàng)建了一個(gè)標(biāo)記，標(biāo)記將存儲(chǔ)在數(shù)據(jù)庫(kù)中，并關(guān)聯(lián)到該寵物。系統(tǒng)跟蹤用戶輸入的所有標(biāo)記和輸入同一個(gè)標(biāo)記的次數(shù)。標(biāo)記然后出現(xiàn)在標(biāo)記集中，并根據(jù)該標(biāo)記的流行程度為其分配一個(gè)顏色和字體大小。當(dāng)用戶單擊標(biāo)記集中的一個(gè)標(biāo)記時(shí)，應(yīng)用程序檢索一組相關(guān)聯(lián)的寵物。

出售者頁(yè)面允許用戶上傳寵物照片和關(guān)于該寵物的信息，以在 Java Pet Store 應(yīng)用程序內(nèi)部共享。用戶必須在一個(gè)表單中提供待售寵物的信息，該表單中嵌入了一個(gè)富文本編輯器，允許用戶為寵物的描述設(shè)置文本格式，比如粗體或斜體。圖 4 展示了富文本編輯器。

圖 4. 出售者表單

?

當(dāng)用戶填寫完表單，Ajax 將無(wú)縫地跳轉(zhuǎn)到下一個(gè)表單。該頁(yè)面要求輸入出售者信息。在該頁(yè)面上使用了 Ajax，允許在表單的 city 字段使單詞完備化。這簡(jiǎn)化了從下拉菜單中選擇正確城市的過(guò)程。

最后，包含一個(gè) CAPTCHA，以阻止虛假內(nèi)容的輸入。CAPTCHA 是 Completely Automated Public Turing test to tell Computers and Humans Apart 的縮寫，需要用戶輸入扭曲的圖片中的文字，有時(shí)會(huì)在屏幕上添加一個(gè)模糊的文字或數(shù)字序列。圖 5 展示了單詞完備化下拉菜單和 CAPTCHA。

圖 5. Ajax 下拉菜單和 CAPTCHA

?

當(dāng)用戶單擊 Submit 按鈕時(shí)，在用戶的數(shù)據(jù)和圖像被上傳到服務(wù)器的過(guò)程中，將顯示一個(gè)進(jìn)度條。當(dāng)完成該過(guò)程時(shí)，一個(gè) Thank You 頁(yè)面顯示用戶上傳的照片和到顯示該照片的頁(yè)面的鏈接。本文的一位作者上傳了一張 Harry 的照片，這是她在佛羅里達(dá)遇到并拍下一種梭魚，我們可以在活動(dòng)應(yīng)用程序演示中看到。顯然，她不會(huì)真的出售 Harry，此示例只是演示 Java Pet Store 應(yīng)用程序中的出售者頁(yè)面和上傳功能。圖 6 展示了 Harry 最終的寵物頁(yè)面。

圖 6. Harry，一種梭魚

?

出售者頁(yè)面還允許用戶將桌面上的圖像上傳到 Java Pet Store 服務(wù)器，在這里可供其他用戶查看。圖像和描述都需要經(jīng)過(guò)表單和服務(wù)器驗(yàn)證，應(yīng)用程序然后自動(dòng)創(chuàng)建圖像的縮略圖，下一節(jié)將詳細(xì)展示這些功能。

允許用戶以一種易用的內(nèi)容交付機(jī)制提供內(nèi)容，這使 Java Pet Store 真正屬于 Web 2.0 應(yīng)用程序，還有其他一些特性使得界面轉(zhuǎn)換（比如使用 Ajax 重新加載頁(yè)面的部分區(qū)域）和更新過(guò)程變得更加流暢和生動(dòng)。但是，允許用戶向 web 站點(diǎn)輸入內(nèi)容，而且其他人可以立即訪問(wèn)這些內(nèi)容，這又帶來(lái)了新的問(wèn)題。

可以在幾個(gè)級(jí)別對(duì)內(nèi)容進(jìn)行驗(yàn)證，首先使用用戶提供寵物信息的表單，檢查合適的文本格式和合適的圖像大小和格式，以及檢查用戶可能輸入表單中的惡意代碼。在數(shù)據(jù)庫(kù)級(jí)別，針對(duì)合適的存儲(chǔ)和檢索對(duì)數(shù)據(jù)進(jìn)行檢查。

表單驗(yàn)證包括兩個(gè)方面：

• 客戶端驗(yàn)證
• 服務(wù)器端驗(yàn)證

客戶端驗(yàn)證

客戶端驗(yàn)證的第一部分是使用典型的 web 技術(shù)來(lái)完成的，通過(guò)編寫 JavaScript 在提交之前檢查表單數(shù)據(jù)。該方法能夠快速響應(yīng)用戶，而且不會(huì)引起傳輸延遲。它不會(huì)增加任何不必要的網(wǎng)絡(luò)流量。如果用戶還有任何必須字段未填或輸入的格式錯(cuò) 誤，將會(huì)向用戶顯示一條消息并終止表單提交。應(yīng)用程序在顯示給用戶的頁(yè)面上一次性指出所有錯(cuò)誤，而不是一次顯示一個(gè)錯(cuò)誤。通過(guò)這種方式，用戶可以一次性修 改所有錯(cuò)誤，無(wú)需一次修改一個(gè)錯(cuò)誤并重新提交表單以查看是否還有其他錯(cuò)誤存在。此驗(yàn)證部分包括確保上傳的文件具有合適的后綴 —— .jpg 、 .gif 或 .png —— 以及為了安全起見，描述字段沒(méi)有包含腳本或鏈接標(biāo)記。如果應(yīng)用程序允許用戶在其中包含腳本元素，那么黑客就可以使用這類安全漏洞劫持頁(yè)面或者濫用服務(wù)器的資源。

服務(wù)器端驗(yàn)證

客戶端執(zhí)行的驗(yàn)證會(huì)在服務(wù)器端重新執(zhí)行。這項(xiàng)功能是為了發(fā)現(xiàn)用戶在瀏覽器上禁用 JavaScript 代碼的情形，或者嘗試通過(guò)某種替代方法直接向服務(wù)器發(fā)送請(qǐng)求以攻擊一個(gè)提交過(guò)程的情形。

這種初級(jí)的應(yīng)用程序攻擊可以輕易地克服。借助服務(wù)器端驗(yàn)證，可以一次性向用戶顯示上傳過(guò)程中的所有錯(cuò)誤，而不是一次顯示一個(gè)錯(cuò)誤。如果一次顯示一個(gè)錯(cuò)誤，那么用戶必須不斷提交并忍耐著傳輸延遲，才能查看下一個(gè)錯(cuò)誤。此功能是在每個(gè)實(shí)體的特定類中實(shí)現(xiàn)的。例如， Address 類驗(yàn)證自己的數(shù)據(jù)，但是由于 Item 類是一個(gè)合成的類，所以它不但驗(yàn)證自己的數(shù)據(jù)，還會(huì)調(diào)用其包含的任何類的驗(yàn)證方法，比如 Address 類。

除了包含客戶端的驗(yàn)證之外，服務(wù)器端驗(yàn)證還包含檢查客戶端不可能發(fā)生的情形。例如，在服務(wù)器端針對(duì) JavaScript 攻擊的 SQL 注入進(jìn)行檢查。

驗(yàn)證還檢查提交的圖片是否有效，以及其大小是否小到可以發(fā)布。為了維護(hù)和安全性目的，應(yīng)用程序?qū)⑸蟼鞔笮∠拗茷榇蠹s 100k。這個(gè)限制會(huì)阻止用戶上傳可能導(dǎo)致維護(hù)問(wèn)題的圖像，這些問(wèn)題包括磁盤空間和向服務(wù)器添加不必要的負(fù)載，這將會(huì)導(dǎo)致一種拒絕服務(wù)攻擊。由于上傳是多 部分 mime 格式，所以允許隨附的數(shù)據(jù)和多部分 mime 開銷。總體上傳大小限制為 150k，這為上傳 100k 圖像的用戶提供了充足的空間。如果上傳大小小于 150k，上傳就會(huì)成功。如果大于 150k，就會(huì)設(shè)置一個(gè)包含該錯(cuò)誤的狀態(tài)對(duì)象，以讓客戶機(jī)能夠讀取并向用戶顯示。應(yīng)用程序然后中斷上傳過(guò)程。

出售者頁(yè)面始終位于頂部菜單中，如圖 1 所示，用于解決一些驗(yàn)證問(wèn)題。應(yīng)用程序的其他部分也可以解決這些問(wèn)題。

在陰影窗格上還有一個(gè)寵物評(píng)定系統(tǒng)，使用星形圖標(biāo)表示，如圖 2 所示。默認(rèn)情況下，顯示用戶對(duì)該項(xiàng)的評(píng)定的平均值。要評(píng)定一個(gè)寵物，用戶只需單擊一個(gè)星形圖標(biāo)。一旦用戶進(jìn)行了評(píng)定，評(píng)定信息就會(huì)傳送到服務(wù)器，然后與其 他用戶提供的信息盡心組合，服務(wù)器計(jì)算出一個(gè)新的綜合評(píng)定等級(jí)。這個(gè)新評(píng)定等級(jí)將會(huì)向所有后續(xù)查看者顯示。

由于用戶提供了在 Java Pet Store web 站點(diǎn)上顯示的內(nèi)容，應(yīng)用程序執(zhí)行一些步驟來(lái)確保用戶不會(huì)填入不適當(dāng)?shù)膬?nèi)容。除了允許戶添加自己的內(nèi)容之外，站點(diǎn)必須允許用戶清除不好的內(nèi)容。用戶還擁有控 制功能，任何人都可以將圖像標(biāo)記為不適當(dāng)，只需單擊 “Flag as inappropriate” 鏈接即可，如圖 3 所示。

當(dāng)用單擊此鏈接時(shí)，顯示一個(gè)彈出框，詢問(wèn)用戶是否要?jiǎng)h除該圖片。當(dāng)用戶單擊 OK 按鈕時(shí)，圖片就會(huì)消失，從而被刪除。但是，在后臺(tái)，應(yīng)用程序只標(biāo)記了該圖片，所以應(yīng)用程序管理員可以在以后決定是否將圖像從數(shù)據(jù)庫(kù)永久刪除。這阻止了用戶 刪除所有內(nèi)容，只能標(biāo)記確實(shí)不雅或不合適的內(nèi)容。

對(duì)用戶驅(qū)動(dòng)內(nèi)容進(jìn)行控制可以阻止無(wú)關(guān)的或者不受歡迎的圖像或文本。必須將一些標(biāo)記為不合適的內(nèi)容刪除，如前面討論的陰影窗格所示。此外，必須有一種方式來(lái)阻止垃圾信息發(fā)送者添加信息。

應(yīng)用程序頁(yè)面還提供了一個(gè)基于關(guān)鍵字的搜索功能。在 Pet Store 頁(yè)面頂部的主菜單中單擊 Search，可以體驗(yàn)該功能，如圖 1 所示。Pet Store 實(shí)現(xiàn)使用 Apache Lucene 搜索引擎對(duì)存儲(chǔ)的每項(xiàng)的名稱、描述和標(biāo)記進(jìn)行索引。如果只想根據(jù)名稱和描述搜索，不想使用標(biāo)記，用戶應(yīng)該取消 Also Search Tags 復(fù)選框。

在搜索頁(yè)面上，將會(huì)看到典型的搜索框。默認(rèn)情況下，框中的內(nèi)容為單詞 cat 。單擊 Submit 按鈕，就會(huì)出現(xiàn)一個(gè)結(jié)果頁(yè)面。將鼠標(biāo)停留在結(jié)果頁(yè)面上的每個(gè)寵物名稱的鏈接上，可以獲得一個(gè)包含特定寵物信息的彈出菜單，信息包括圖片和地址，如圖 7 所示。此外，在結(jié)果頁(yè)面右側(cè)的 Tags 列中，可以看到用戶為每個(gè)寵物輸入的標(biāo)記，也可以在此添加您自己的標(biāo)記。單擊 Add Tags，出現(xiàn)一個(gè)對(duì)話框。輸入一個(gè)標(biāo)記，就會(huì)看到它和該寵物的其他標(biāo)記一起顯示。注意，每個(gè)寵物的價(jià)格也會(huì)出現(xiàn)在這些搜索結(jié)果最右側(cè)的 Price 列中。

圖 7. 搜索結(jié)果頁(yè)面

?

Java Pet Store 搜索功能使您不僅可以根據(jù)特定寵物類型關(guān)鍵字搜索，還可以定制在您的臨近地區(qū)進(jìn)行搜索。隨后，搜索結(jié)果與 Google Maps 服務(wù)進(jìn)行 mashup，以提供針對(duì)用戶定制的詳細(xì)結(jié)果。

mashup 是將特定于內(nèi)容的數(shù)據(jù)和另一個(gè) web 站點(diǎn)的服務(wù)組合起來(lái)的結(jié)果，這個(gè) web 站點(diǎn)可能來(lái)自一個(gè)或多個(gè)提供者，從而提供一種綜合體驗(yàn)。Mashup 與簡(jiǎn)單地繼承一個(gè)服務(wù)不同。例如，java.net RSS 提要是一種在 Java Pet Store 應(yīng)用程序內(nèi)部提供和使用的服務(wù)。java.net 提供的 XML 文件的數(shù)據(jù)被拉入應(yīng)用程序中，經(jīng)過(guò)格式化并作為鏈接添加到 web 頁(yè)面中。當(dāng)用戶單擊一個(gè)鏈接時(shí)，瀏覽器就會(huì)轉(zhuǎn)到 java.net web 站點(diǎn)，以閱讀該文章或博客。

但是，使用 mashup，服務(wù)不僅被添加到 Java Pet Store 應(yīng)用程序中，它還會(huì)與用戶提供的數(shù)據(jù)交互，然后在應(yīng)用程序中顯示定制的結(jié)果。通過(guò)這種方式，搜索結(jié)果的數(shù)據(jù)與來(lái)自 Google Maps 的服務(wù)混合起來(lái)，并且方便地顯示在應(yīng)用程序中。

要嘗試對(duì)基于位置的搜索進(jìn)行 mashup，請(qǐng)單擊頂部菜單欄中的 Search。在搜索結(jié)果頁(yè)面中，通過(guò)在 Map 列中勾選一些復(fù)選框選擇一些寵物，然后滾動(dòng)到頁(yè)面底部。在文本字段下面輸入您的地址或一個(gè)建議的地址，然后單擊 Map Checked Items。在瀏覽器底部，當(dāng)應(yīng)用程序調(diào)用 Google Maps 服務(wù)并將您的數(shù)據(jù)結(jié)果拉入該頁(yè)面上的地圖窗體中時(shí)，將會(huì)看到閃爍的 Google URL。通過(guò)這種方式，應(yīng)用程序提供了特定于內(nèi)容的寵物搜索與 Google Maps 的一種 mashup，從而在您的區(qū)域找到可以購(gòu)買到的寵物。

在應(yīng)用程序的任何頁(yè)面的頂部菜單欄中單擊 Map，也可以做一些類似的事情。這個(gè)頁(yè)面將會(huì)轉(zhuǎn)到 Google Maps 客戶端 mashup 頁(yè)面，以在地圖上顯示您所選類別的寵物位置。通過(guò)輸入一個(gè)可選的中心點(diǎn)位置和一定距離的搜索范圍，用戶可以將顯示的內(nèi)容進(jìn)一步限制到中心點(diǎn)周圍的特定區(qū)域 內(nèi)。然后，地圖頁(yè)面讓您選擇搜索哪種寵物類型、想要搜索的區(qū)域，以及搜索區(qū)域離中心點(diǎn)的距離范圍。然后會(huì)獲得一個(gè)結(jié)果頁(yè)面，如圖 8 所示。

圖 8. 地圖顯示頁(yè)面

?

Google Maps 頁(yè)面的左側(cè)提供了與地圖上特定點(diǎn)對(duì)應(yīng)的超鏈接。用戶可以單擊此位置或使用超鏈接選擇特定點(diǎn)。當(dāng)用戶將鼠標(biāo)停留在超鏈接上時(shí)，一個(gè)彈出菜單就會(huì)顯示該項(xiàng)的細(xì) 節(jié)，應(yīng)用程序使用 Ajax 請(qǐng)求檢索到的信息。每個(gè)項(xiàng)的鏈接發(fā)送編目頁(yè)上的項(xiàng)的用戶信息，顯示關(guān)于該項(xiàng)的詳細(xì)信息。

Java Pet Store 2.0 應(yīng)用程序由大量技術(shù)和一個(gè)服務(wù) mashup 組成：

• 使用 Ajax、DHTML 和一個(gè)數(shù)據(jù)庫(kù)進(jìn)行客戶端緩存
• Java EE 5 技術(shù)： JavaServer Faces 、 JavaServer Pages (JSP) 、 Java Servlet 技術(shù) 、 Java Database Connectivity (JDBC) 、 Java EE 注釋 、 Java 持久性 API ，以及 Java 事務(wù) API
• 開源工具集、實(shí)用程序和服務(wù)：Dojo 工具集、Dojo 部件、Rome for RSS 閱讀器、Apache 文件上傳 、Apache Lucene 搜索、RSS 提要、Google Maps、Yahoo Geocoding

本文概述了 Web 2.0 Java Pet Store 應(yīng)用程序如何由用戶內(nèi)容驅(qū)動(dòng)，以及如何利用 Ajax 通過(guò)大量不同特性提供更加流暢的用戶體驗(yàn)。此外，還了解了驗(yàn)證和控制用戶驅(qū)動(dòng)數(shù)據(jù)的考慮因素，而且提供了服務(wù) mashup，除了常規(guī)服務(wù)（比如 RSS 提要和 PayPal）之外，還包括 Google Maps。最后，您還了解了用于此應(yīng)用程序的 Java 技術(shù)和其他技術(shù)。

本系列的后續(xù)文章將會(huì)詳細(xì)討論如何將各種技術(shù)用于 Java Pet Store 應(yīng)用程序，以及需要考慮哪些設(shè)計(jì)選項(xiàng)。

?

轉(zhuǎn)載自：http://thinktothings.iteye.com/blog/850362

Java Pet Store 2.0 應(yīng)用程序簡(jiǎn)介