HOME / Docs & Support / NetBeans 6.5

使用 Dynamic Faces 创建 Ajax 自动完成文本字段

由 Bilal Ahamed 撰写由 James Branam 编辑和维护

本教程演示 Project Dynamic Faces 组件库提供的支持 Ajax 功能的 Woodstock JSF 1.2 Text Field 组件的使用方法。Dynamic Faces，又称作 POJC (Plain Old JavaServer Faces Components)，是 JavaServer Faces 技术的一个扩展，它允许您轻松地实现 Ajax 功能。尤其要指出的是，您将使用 Dynamic Faces 组件库 (0.2) 中包括的 Ajax 事务组件，该组件允许您在设计时以可视方式配置 Ajax 功能。在该页中，不会发生常规的页面提交操作。尤其是，当用户在文本字段中键入文本来发送评论时，页面会发送一个 Ajax 请求。该页还使用 Ajax 请求来不断地轮询服务器，以便更新评论记录。

预计时间：20 分钟

本页上的内容适用 NetBeans IDE 6.5

下载和安装 Project Dynamic Faces 组件库
创建项目
添加组件库
设计页面
添加 Java 代码
部署应用程序
结束语

要学习本教程，您需要具备以下软件和资源。

软件或资源	要求的版本
NetBeans IDE	6.5 Java 版本
Java 开发工具包 (Java Developer Kit,JDK)	版本 6 或版本 5
JavaServer Faces 组件/ Java EE 平台	1.2（带有 Java EE 5*）或 1.1（带有 J2EE 1.4）
GlassFish 应用服务器	V2
样例数据库	必需

* 要利用 NetBeans IDE 的 Java EE 5 功能，请使用完全符合 Java EE 5 规范的应用服务器，例如GlassFish Application Server V2 UR2。如果使用的是其他服务器，请查阅发行说明和常见问题解答，了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

下载和安装 Project Dynamic Faces 组件库

在应用程序中使用 Project Dynamic Faces 组件库之前，您必须下载和安装 Project Dynamic Faces Ajax 组件和样例插件。您可以在插件管理器中下载和安装它们。

在主工具栏中，选择“工具”>“插件”。
选择“可用插件”标签并使用搜索功能查找正确的插件。键入插件的前几个字母，然后按下 Enter 键。
插件管理器将返回匹配结果，如下图所示。
单击“安装”。
在 NetBeans IDE 安装程序中，单击“下一步”。
如果您接受所有许可协议中的条款，选中复选框并再次单击“安装”。

IDE 会安装插件并向您通知安装结果。
单击“完成”。
单击“关闭”退出插件管理器。

创建项目

在本节中，您将创建一个使用 Visual Web JSF 的 Web 项目。Visual Web JSF 框架在 Web 开发中引入了一种拖放式的方法。

在主工具栏中，选择“文件”>“新建项目”。
此时将打开“新建项目”向导。
选择“Java Web”类别，并选择“Web 应用程序”作为项目类型。单击“下一步”。
将项目命名为 AutocompleteTF。
（可选）选中“使用专用文件夹存储库”复选框并指定库文件夹的位置。有关此选项的更多信息，请参见共享项目库。
单击“下一步”。
选择 GlassFish V2 作为服务器并单击“下一步”。
选择“Visual Web JSF 框架”，如下图所示。
单击“完成”以创建项目。
Page1.jsp 将在源编辑器中打开。

添加组件库

在本节中，您将在 IDE 中添加 Project Dynamic Faces 组件库。完成添加之后，组件库将可以在未来的 Visual Web JSF 项目中使用。

在“项目”窗口中右键单击“组件库”节点，然后选择“添加组件库”。
在“添加组件库”对话框中，确保已经选中了“Dynamic Faces Components (0.2)”，然后单击“添加组件库”。

现在，项目已经可以访问 Dynamic Faces 组件库。Dynamic Faces 类别将出现在组件面板中。

设计页面

在本节中，您将在这些组件中添加 JSF 1.2 Woodstock 组件和 Ajax 功能，以设计 Web 页。

在页面中添加组件

现在，您将设计用户能够访问的 Web 页。您需要将组件面板中的“JSF 1.2 Woodstock”组件拖放到可视设计器中。

带组件的 Page1.jsp 视图

单击“设计”标签，在可视设计器中显示“设计”视图。
从组件面板中拖放一个“标签”组件到可视设计器的左上方。
在 label1 组件的“属性”窗口中，输入 Name: 作为文本属性。
从组件面板的“Woodstock 基本”部分中拖放一个“文本字段”组件到可视设计器中。将它放置在“标签”组件右侧。
右键单击“文本字段”组件并选择“添加绑定属性。
将标签组件从组件面板拖放到画可视设计器中。将它放置在第一个“标签”组件的下方。
在 label2 组件的“属性”窗口中，输入 Results: 作为文本属性。
从组件面板的“Woodstock 基本”部分拖放一个“列表框”组件到“文本字段”组件下方。
右键单击“列表框”组件并选择“添加绑定属性”。
在可视设计器工具栏中，单击“显示虚拟表单”。

配置 Ajax 事务

使用 Dynamic Faces 组件库 (0.2) 中包括的 Ajax 事务组件，可以在设计时以可视方式配置 Ajax 功能，从而在可视设计器中通过不同的颜色编码边框来显示各种组件。您应至少指定当触发 Ajax 事务时将输入发送至服务器的组件，以及当客户端接收到 Ajax 响应时重新呈现的组件。在可视设计器中，将输入发送至服务器的组件以实线边框显示，重新呈现的组件以虚线边框显示。此外，您还必须编写一行 JavaScript 代码来触发 Ajax 事务。

在本节中，您将配置两个 Ajax 事务，一个用于发送评论，另一个用于轮询服务器。AjaxTransaction1 将触发以响应用户在“文本字段”组件中键入文本的操作。当 AjaxTransaction1 触发时，textField1 会通过 Ajax 请求将输入发送至服务器，并且 listbox1 组件会在客户机接收到 Ajax 响应时呈现出来。

展开组件面板的 "Dynamic Faces" 部分，拖放一个 "Ajax Transaction" 组件到 Page1 上。
在可视设计器中，右键单击“文本字段”组件并选择 "Configure Ajax Transactions"。
此时将打开 "Configure Ajax Transactions" 对话框。
双击 Send Input 值，将该值更改为 Yes 并确保将 Re-Render 设置为 No。
单击“确定”。
在可视设计器中，右键单击“列表框”组件并选择 "Configure Ajax Transactions"。
在 "Configure Ajax Transactions" 对话框中，双击 Re-render 值并将该该更改为 Yes。确保将 Send Input 值设置为 No。
单击“确定”。

添加新 Ajax 事务

"Configure Ajax Transactions" 对话框还可以用于添加新 Ajax 事务。在本节中，您将创建一个新的 Ajax 事务，然后配置“文本字段”组件来重新呈现“列表框”组件返回的输入。

在可视设计器中，右键单击“文本字段”组件并选择 "Configure Ajax Transactions"。
在 "Configure Ajax Transactions" 对话框中，单击 "New" 创建新的 Ajax 事务。
将 ajaxTransaction2 的 Send Input 值设置为 No 并将 Re-render 值设置为 Yes。
单击“确定”。
在可视设计器中，右键单击“列表框”组件并选择 "Configure Ajax Transactions"。
在 "Configure Ajax Transactions" 对话框中，将 ajaxTransaction2 的 Send Input 值设置为 Yes，并将 Re-Render 值设置为 No。完成后，Page1 应如下图所示。

在可视设计器中，选择“文本字段”组件，然后在“属性”窗口中，将以下参数添加到 onKeyUp 属性中。

DynaFaces.Tx.fire("ajaxTransaction1", "textField1")

选择“列表框”组件，然后在“属性”窗口中，将以下参数添加到 onChange 属性中。

DynaFaces.Tx.fire("ajaxTransaction2", "listbox1")

设置数据库

在本节中，您将在 IDE 中设置 vir 数据库和 MySQL 数据库服务器。

确保已经在您的机器中安装和运行 MySQL 数据库服务器。有关连接到 MySQL 数据库的更多信息，请参见连接到 MySQL 数据库
在“服务”窗口中，右键单击“MySQL 服务器”节点，然后选择“创建数据库”。

此时将打开“创建新数据库”对话框。
在“新数据库名称”下拉列表中，选择 "Sample database: vir" 并单击“确定”。

在“服务”窗口中，vir 数据库已出现在“MySQL 服务器”节点下方。

与数据库交互

在本节中，您将连接到 vir 数据库，该数据库已绑定在 IDE 中。JSF 1.2 组件可以访问数据库中的数据并在 Web 页上显示它。

在“服务”窗口中，展开“数据库”节点。找到 vir 数据库，并确保已连接到该数据库。
展开 vir 的“数据库连接”节点，将 employee 表拖放到 Page1 上。
在“导航”窗口中，展开 "SessionBean1" 节点，右键单击 " employeeRowSet",然后选择“编辑 SQL 语句”。

此时将打开 SQL 编辑器。

在 SQL 编辑器的 SQL 窗格中，将现有查询替换为以下查询。

SELECT ALL EMPLOYEE.ID, EMPLOYEE.FIRSTNAME, EMPLOYEE.LASTNAME,
EMPLOYEE.EMAIL FROM EMPLOYEE WHERE EMPLOYEE.FIRSTNAME LIKE ?

关闭 SQL 编辑器。
在“服务”窗口中，再次将 employee 表拖放到 Page1 上。
在出现的对话框中，选择 "Create SessionBean1 employeeRowSet1"，如下图所示。单击“确定”。
在“导航”窗口中，右键单击 employeeRowSet1，然后选择“编辑 SQL 语句”。

在 SQL 编辑器中，将现有 SQL 查询替换为以下 SQL 查询。

SELECT ALL EMPLOYEE.ID, EMPLOYEE.FIRSTNAME, EMPLOYEE.LASTNAME,
EMPLOYEE.EMAIL FROM EMPLOYEE WHERE EMPLOYEE.ID = ?

关闭 SQL 编辑器。
在可视设计器中，右键单击“列表框”组件并选择“绑定到数据”。
在“绑定到数据”对话框中，单击“绑定到数据提供器”并从下拉列表中选择 "employeeDataProvider"。
从值字段中选择 "employee.id"，并从显示字段中选择 "employee.firstname",然后单击“确定”。

添加 Java 代码

在本节中，您将修改现有 Java 代码，让应用程序能够正常运行。在可视设计器中，当您双击某个组件时，“源编辑器”将定位到该组件的事件访问所在的代码位置。这便于修改和添加新代码。

双击“文本字段”组件，然后将其代码替换为以下代码。

public void textField1_processValueChange(ValueChangeEvent event) {
        if (textField1.getText().toString() != null || textField1.getText().toString().length() >  0) {
            listbox1.setVisible(true);
        }
        String prefix = textField1.getText().toString();
        String doctName = prefix.substring(0, 1).toUpperCase() + prefix.substring(1) + '%';
        try {
            getSessionBean1().getEmployeeRowSet().setObject(1, doctName);
            employeeDataProvider.refresh();
        } catch (SQLException ex) {
            Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);
        }
                        }

在源代码编辑器中单击鼠标右键，然后选择“修复导入”。

单击“设计”标签返回可视编辑器的“设计”视图。双击“列表框”组件，然后将现有代码替换为以下代码。

IDE 将添加 java.util.logging.Logger 语句。

public void listbox1_processValueChange(ValueChangeEvent event) {
        try {
            getSessionBean1().getEmployeeRowSet1().setObject(1, listbox1.getSelected());
            employeeDataProvider1.refresh();
        } catch (SQLException ex) {
            Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);
        }
        String emptName = (String) employeeDataProvider1.getValue("EMPLOYEE.FIRSTNAME");
        textField1.setText(emptName);
        listbox1.setVisible(false);
}

找到 prerender 方法，并将它替换为以下代码。

public void prerender() {
        if (textField1.getText() == null || textField1.getText().toString().length() == 0) {
            listbox1.setVisible(false);
            try {
                getSessionBean1().getEmployeeRowSet().setObject(1, "");
            } catch (SQLException ex) {
                Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);
            }
        }
    }