NetBeans下使用Ajax文本完成组件

<iframe align="center" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog336280.html" frameborder="0" width="336" scrolling="no" height="280"></iframe>

本教程向您介绍如何使用 NetBeans Visual Web Pack 5.5 构建包含使用 Java BluePrints Ajax 技术创建的文本字段组件的 Web 页。当在文本字段中键入内容时，将根据包含 180,000 个词条的英语词典所提供的可能扩展列表来尝试进行自动完成。该词典通过 Web 服务提供；您必须下载和安装词典服务。

注意：目前本教程不支持任何非英文版的 DictionaryService.war 文件。该文本字段组件只支持 ASCII 字符。

目录目录

l 添加自动完成文本字段

l 添加词典服务客户端

l 添加代码以显示一组单词

l 添加代码以显示单词定义

l 小结

本教程中使用的外部代码

»词典服务

本教程将使用以下技术和资源

JavaServer Faces 组件/ Java EE 平台	<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 10.5pt; HEIGHT: 11.25pt; mso-wrap-distance-left: 2.25pt; mso-wrap-distance-right: 2.25pt" alt="works with" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/check.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image001.gif"></imagedata></shape>1.2 with Java EE 5* <shape id="_x0000_i1026" style="WIDTH: 10.5pt; HEIGHT: 11.25pt; mso-wrap-distance-left: 2.25pt; mso-wrap-distance-right: 2.25pt" alt="works with" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/check.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image001.gif"></imagedata></shape>1.1 with J2EE 1.4
Travel 数据库	<shape id="_x0000_i1027" style="WIDTH: 10.5pt; HEIGHT: 11.25pt; mso-wrap-distance-left: 2.25pt; mso-wrap-distance-right: 2.25pt" alt="not required" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/spacer.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image002.png"></imagedata></shape>不是必需的
BluePrints AJAX 组件库	<shape id="_x0000_i1028" style="WIDTH: 10.5pt; HEIGHT: 11.25pt; mso-wrap-distance-left: 2.25pt; mso-wrap-distance-right: 2.25pt" alt="required" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/spacer.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image002.png"></imagedata></shape>必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程与 Sun Java Application Server PE 9.0 Update Release 1 配合使用。

添加自动完成文本字段

下图显示了您在本教程中开发完成的应用程序。

<shape id="_x0000_i1029" style="WIDTH: 387pt; HEIGHT: 289.5pt" alt="Figure 1: Final Design of Page" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/vwp-textcompletion/finaldesign.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image004.png"></imagedata></shape>图 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. 部署并运行该应用程序。

请注意，在文本字段中键入时，将显示键入文本的大写形式，如下图所示。服务器将对键入的文本执行大写转换计算，而无需提交任何页面。文本字段将动态显示结果，如下图所示。

<shape id="_x0000_i1030" style="WIDTH: 417.75pt; HEIGHT: 260.25pt" alt="Figure 2: Text Completion Initial Page" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/vwp-textcompletion/first-deploy.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image006.png"></imagedata></shape> 图 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 节点。

<shape id="_x0000_i1031" style="WIDTH: 431.25pt; HEIGHT: 282pt" alt="Figure 3: New Web Service Client Wizard" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/vwp-textcompletion/webservice.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image008.png"></imagedata></shape> 图 3：New Web Service Client 向导

添加代码以显示一组单词

现在，需要修改上述代码，以便该代码使用词典服务显示一小组单词，这些单词以在 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。

<shape id="_x0000_i1032" style="WIDTH: 296.25pt; HEIGHT: 353.25pt" alt="Figure 4: Select Operation to Invoke Dialog" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/vwp-textcompletion/matchprefix.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image010.png"></imagedata></shape> 图 4：Select Operation to Invoke 对话框

4. 一个调用 DictionaryServiceSEIPort:matchPrefix 操作的 try-catch 块便添加到 autoComplete1_complete 方法中。

5. 如果您的项目为 J2EE 1.4 项目，则跳过步骤 5。对于 Java EE 5 项目，需要删除行 java.util.List<java.lang.string> result = port.matchPrefix(string1);</java.lang.string> 并复制和粘贴代码示例 2 中以粗体显示的代码。

该代码定义了包含结果的变量类型、将前缀传递给匹配方法，以及添加输出结果对象。

代码示例 2：通过参数调用词典 Web 服务（用于 Java EE 5 项目）

public void autoComplete1_complete(FacesContext context, String prefix, CompletionResult result) { // TODO: Return your own list of items here based on the prefix, like this: try { // Call Web Service Operation autocompleteapp.DictionaryService service = new autocompleteapp.DictionaryService(); autocompleteapp.DictionaryServiceSEI port = service.getDictionaryServiceSEIPort(); // TODO initialize WS operation arguments here java.lang.String string1 = ""; // TODO process result here java.util.List items = port.matchPrefix(prefix); result.addItems(items); System.out.println("Result = "+result); } catch (Exception ex) { // TODO handle custom exceptions here } } }

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 中键入内容时，将从词典服务中返回包含十个单词的列表，并且它们会显示在该文本字段中，如下图所示：

<shape id="_x0000_i1033" style="WIDTH: 405pt; HEIGHT: 246pt" alt="Figure 4: First Ten Words Returned by the Dictionary Service" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/vwp-textcompletion/deploy1stlist.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image012.png"></imagedata></shape> 图 5：词典服务返回的前十个单词

8. 在文本字段中键入 java。

列表将显示单词 Java 和词典服务提供的后九个单词，如下图所示：

<shape id="_x0000_i1034" style="WIDTH: 404.25pt; HEIGHT: 246.75pt" alt="Figure 5: List of Ten Words Returned After Typing Java" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/vwp-textcompletion/deployedjavalist.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image014.png"></imagedata></shape> 图 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 autocompleteapp.DictionaryService dictionaryService = new autocompleteapp.DictionaryService(); autocompleteapp.DictionaryServiceSEI dictionaryServiceSEIPort = dictionaryService.getDictionaryServiceSEIPort(); String definition = dictionaryServiceSEIPort.define(autoComplete1.getText()); staticText1.setText(definition); } catch(Exception ex) { log("Dictionary Service Error:", ex); error("Error accessing Dictionary Service"); } return null; } }

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 按钮。