NetBeans下使用Ajax文本完成组件

本教程向您介绍如何使用 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 平台

1.2 with Java EE 5*
1.1 with J2EE 1.4

Travel 数据库

不是必需的

BluePrints AJAX 组件库

必需的

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

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

添加自动完成文本字段

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

图 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 节点。

图 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。

图 4：Select Operation to Invoke 对话框

 

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

5.       如果您的项目为 J2EE 1.4 项目，则跳过步骤 5。对于 Java EE 5 项目，需要删除行 java.util.List result = port.matchPrefix(string1); 并复制和粘贴代码示例 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 中键入内容时，将从词典服务中返回包含十个单词的列表，并且它们会显示在该文本字段中，如下图所示：

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