本教程向您介紹如何使用 NetBeans Visual Web Pack 5.5 構建包含使用 Java BluePrints Ajax 技術創建的文本字段組件的 Web 頁。當在文本字段中鍵入內容時，將根據包含 180,000 個詞條的英語詞典所提供的可能擴展列表來嘗試進行自動完成。該詞典通過 Web 服務提供；您必須下載和安裝詞典服務。
注意：目前本教程不支持任何非英文版的 DictionaryService.war 文件。該文本字段組件只支持 ASCII 字符。
目錄目錄
l 小結
| 本教程中使用的外部代碼 |
| »詞典服務 |
本教程將使用以下技術和資源
| JavaServer Faces 組件/ | | |
| Travel 數據庫 | | |
| | ||
* 該教程發佈時，只有 Sun Java System Application Server 支持 Java EE 5。
本教程與 Sun Java Application Server PE 9.0 Update Release 1 配合使用。
添加自動完成文本字段
下圖顯示了您在本教程中開發完成的應用程序。
| |
要創建該頁面，應該首先添加 Auto Complete Text Field 組件。該組件所包含的源代碼顯示文本“Hello”，並在文本字段中顯示所鍵入文本的大寫形式。
1. 下載並導入 BluePrints AJAX 組件（如果您尚未執行此操作）。
2. 從主菜單中，選擇 File > New Project。
3. 創建一個新的可視 Web 應用程序項目並將其命名爲 AutoCompleteApp。
4. 選擇 Sun Java System Application Server 9，併爲 Java EE 版本選擇 Java EE 5 或 J2EE 1.4。
注意：本教程只使用 Sun Java System Application Server。
5. 在 Projects 窗口中，右鍵單擊 AutoCompleteApp > Component Libraries 節點，然後從彈出菜單中選擇 Add Component Library。選擇 BluePrints AJAX Components 並單擊 Add Component Library。
IDE 將該組件庫複製到項目中並將組件添加到 Palette 中。
6. 拖動 Palette 的 Basic 部分中的 Label 組件並將其放到頁面上。將其 text 屬性設置爲 Type a word:。
7. 從 Palette 的 BluePrints AJAX Components 部分中，拖動 Auto Complete Text Field 組件並將其放到頁面上 Label 組件的旁邊。
8. 雙擊 Auto Complete Text Field 組件會在 Java 編輯器中打開其源代碼，可以從中添加事件處理程序。
Java 編輯器打開後，插入點位於 autoComplete1_complete 方法中。
9. 刪除以 result 開頭的兩行註釋符 (//)，以使 autoComplete1_complete 方法如下所示：
| 代碼示例 1: 事件處理程序代碼 |
public void autoComplete1_complete(FacesContext context, String prefix, CompletionResult result) { result.addItem("Hello"); result.addItem(prefix.toUpperCase()); } |
10. 部署並運行該應用程序。
請注意，在文本字段中鍵入時，將顯示鍵入文本的大寫形式，如下圖所示。服務器將對鍵入的文本執行大寫轉換計算，而無需提交任何頁面。文本字段將動態顯示結果，如下圖所示。
| 圖 2：文本完成初始頁 |
添加詞典服務客戶端
可以增強文本完成組件的功能，使用詞典服務顯示一小組單詞，這些單詞以 Auto Complete Text Field 中鍵入的文本開頭。詞典 Web 服務使用一個接口與兩個方法進行交互。一個方法查找單詞定義，另一個方法爲用戶輸入返回十個匹配程度最高的項。要訪問詞典服務客戶端，您必須下載並解壓縮詞典服務壓縮文件，將 DictionaryService.war 部署到應用程序服務器，然後將該 Web 服務添加到應用程序中。
如上所述，目前 DictionaryService.war 不支持非英文的語言環境。
1. 下載並解壓縮詞典服務壓縮文件的內容。
2. 部署 DictionaryService.war 到您的服務器。
3. 在 IDE 中，選擇 File > Open File 並導航到保存 DictionaryService.wsdl 文件的位置，打開該文件。
4. 驗證默認部署的 URL 和端口號 http://localhost:8080 是否匹配您的應用程序服務器設置。如有必要，編輯該文件以匹配您的應用程序服務器設置，然後保存該文件。
5. 在 Projects 窗口中，右鍵單擊 AutoCompletionApp 項目節點，然後選擇 New > Web Service Client。
將打開 New Web Service Client，如圖 2 所示。
6. 在 New Web Service Client 嚮導中，單擊 Local File 並將路徑添加到 DictionaryService.wsdl 文件中。
7. 對於 Package 選擇 autocompleteapp 包，如果 Client Type 字段處於活動狀態，則爲該設置選擇 IDE-generated static stub，然後單擊 Finish。
IDE 將編譯這些庫並向 Project 菜單中添加一個 Web Service References 節點。
|
|
添加代碼以顯示一組單詞
現在，需要修改上述代碼，以便該代碼使用詞典服務顯示一小組單詞，這些單詞以在 Auto Complete Text Field 中鍵入的文本開頭。在無需提交任何頁面的情況下就可以再次動態顯示這些單詞。
1. 在 Java Editor 中，刪除以 result 開頭的行。
2. 將光標放在 autoComplete1_complete 方法處，右鍵單擊，然後選擇 Web Service Client Resources > Call Web Service Operation。
注意：如果 Call Web Service Operation 對話框爲空，則關閉並重新打開該窗口。
3. 在 Select Operation to Invoke 對話框中，單擊 matchPrefix，然後單擊 OK。
|
|
4. 一個調用 DictionaryServiceSEIPort:matchPrefix 操作的 try-catch 塊便添加到 autoComplete1_complete 方法中。
5. 如果您的項目爲 J2EE 1.4 項目，則跳過步驟 5。對於 Java EE 5 項目，需要刪除行 java.util.List 並複製和粘貼代碼示例 2 中以粗體顯示的代碼。
該代碼定義了包含結果的變量類型、將前綴傳遞給匹配方法，以及添加輸出結果對象。
| 代碼示例 2：通過參數調用詞典 Web 服務（用於 Java EE 5 項目） |
public void autoComplete1_complete(FacesContext context, String prefix, CompletionResult result) { |
6. 如果您的項目是 Java EE 5 項目，則跳過該步。對於 J2EE 1.4 項目，刪除行 dictionaryServiceSEIPort.matchPrefix(/* TODO enter operation arguments*/); 並複製粘貼代碼示例 3 中以粗體顯示的代碼。
此新代碼向 try 語句中輸入一個操作，並向 catch 語句中添加一個自定義的異常。
| 代碼示例 3：通過參數調用詞典 Web 服務（用於 J2EE 1.4 項目） |
public void autoComplete1_complete(FacesContext context, String prefix, CompletionResult result) { try { // This code block invokes the DictionaryServiceSEIPort:matchPrefix operation on web service autocompleteapp.DictionaryService dictionaryService = new autocompleteapp.DictionaryService_Impl(); autocompleteapp.DictionaryServiceSEI dictionaryServiceSEIPort = dictionaryService.getDictionaryServiceSEIPort(); String[] items = dictionaryServiceSEIPort.matchPrefix(prefix); result.addItems(items); } catch(javax.xml.rpc.ServiceException ex) { // TODO handle ServiceException } catch(java.rmi.RemoteException ex) { // TODO handle remote exception } catch(Exception ex) { log("Exception getting the matching words", ex); String[] items = new String[] {"Exception getting the matching words"}; result.addItems(items); } } } |
7. 部署並運行該應用程序。
在 Auto Complete Text Field 中鍵入內容時，將從詞典服務中返回包含十個單詞的列表，並且它們會顯示在該文本字段中，如下圖所示：
| 圖 5：詞典服務返回的前十個單詞 |
8. 在文本字段中鍵入 java。
列表將顯示單詞 Java 和詞典服務提供的後九個單詞，如下圖所示：
| 圖 6：鍵入 Java 之後返回的十個單詞列表 |
在接下來的步驟中，用戶可以查找從列表中選定的單詞定義。
添加代碼以顯示單詞定義
此時需要向頁面添加 Static Text 組件和 Button 組件。向按鈕處理程序中添加 DictionaryServiceSEIPort:define 操作以使用詞典服務中的定義。當用戶單擊 Button 時，所選單詞的定義將顯示在 Static Text 組件中。
1. 返回到 Visual Designer。
2. 將另一個 Label 組件拖動到 Visual Designer 上並將其放在第一個 Label 組件的下面。將其 text 屬性設置爲 Definition:。
3. 將 Static Text 組件拖動到頁面上並將其放在 Auto Complete Text Field 組件的下面。
4. 調整 Static Text 組件的寬度，使其略寬於 Auto Complete Text Field。
這樣，當文本顯示在部署的應用程序中時，就不會顯示爲一個很長的列，其寬度只能容納若干個單詞（與該組件的默認寬度一樣）。
5. 在 Properties 窗口的 Data 部分中，將 Static Text 組件的 escape 屬性設置爲 False。
值爲 False 表示關閉對 HTML 的轉義，這樣，<、> 和 & 字符就不會被轉換爲 HTML 實體 <、> 和 &。由於詞典服務返回的單詞定義包含 HTML 標記，因此該操作是非常必要的。HTML 標記需要瀏覽器進行解釋，而不是像純文本那樣顯示。
6. 將 Message Group 組件拖動到頁面上並將其放在 Static Text 下面。
7. 將 Button 組件拖動到頁面上並將其放在 Auto Complete Text Field 的右側。將 Button 的 id 屬性設置爲 lookUpButton 並將其 text 屬性設置爲 Look Up。
8. 雙擊 Look Up 按鈕以顯示其事件處理程序代碼。
9. 在 Java Editor 中右鍵單擊，然後選擇 Web Service Client Resources > Call Web Service Operation。
10. 在 Select Operation to Invoke 對話框中，單擊 define，然後單擊 OK。
一個調用 DictionaryServiceSEIPort:define 操作的 try-catch 塊便添加到了 lookUpButton_action 方法中。
11. 如果您的項目是 J2EE 1.4 項目，則跳到步驟 12。對於 Java EE 5 項目，通過刪除 java.lang.String string1 = ""; 這一行並複製粘貼代碼示例 4 中以粗體顯示的代碼替換該行來修改 lookUpButton_action 方法。
| 代碼示例 4: Button 處理程序（用於 Java EE 5 項目） |
public String lookUpButton_action() { // TODO: Process the button click action. Return value is a navigation // case name where null will return to the same page. try { // This code block invokes the DictionaryServiceSEIPort:define operation on web service new autocompleteapp.DictionaryService(); dictionaryService.getDictionaryServiceSEIPort(); } } |
12. 如果您的項目是 Java EE 5 項目，則跳過該步。對於 J2EE 1.4 項目，通過刪除 dictionaryServiceSEIPort.define(/* TODO enter operation arguments*/); 這一行並用代碼示例 5 中以粗體顯示的代碼替換該行來修改 lookUpButton_action 方法。
| 代碼示例 5: Button 句柄（對於 J2EE 1.4 項目） |
public String lookUpButton_action() { // TODO: Process the button click action. Return value is a navigation // case name where null will return to the same page. try { // This code block invokes the DictionaryServiceSEIPort:define operation on web service autocompleteapp.DictionaryService dictionaryService = new autocompleteapp.DictionaryService_Impl(); autocompleteapp.DictionaryServiceSEI dictionaryServiceSEIPort = dictionaryService.getDictionaryServiceSEIPort(); String definition = dictionaryServiceSEIPort.define(autoComplete1.getText()); staticText1.setText(definition); } catch(javax.xml.rpc.ServiceException ex) { // TODO handle ServiceException } catch(java.rmi.RemoteException ex) { // TODO handle remote exception } catch(Exception ex) { log("Dictionary Service Error:", ex); error("Error accessing Dictionary Service"); } return null; } } |
13. 部署並運行該應用程序。
14. 在該文本字段中鍵入單詞 Java，然後單擊 Look Up 按鈕。