Creating an Ajax Autocompletion Text Field with Dynamic Faces

This tutorial demonstrates the usage of the Woodstock JSF 1.2 Text Field component with Ajax functionality provided by the Project Dynamic Faces component library. Dynamic Faces, also known as POJC (Plain Old JavaServer Faces Components), are an extension to JavaServer Faces technology that lets you easily implement Ajax functionality. In particular, you use the Ajax Transaction component included with the Dynamic Faces component library (0.2), which lets you visually configure Ajax functionality at design time. No conventional page submissions occur. Specifically, an Ajax request is sent when the user sends a comment by typing text in the text field. The page also uses Ajax requests to poll the server continually in order to update the transcript of comments.

Expected duration: 20 minutes

Contents

• Downloading and Installing the Project Dynamic Faces Component Library
• Creating the Project
• Adding Component Libraries
• Designing the Page
• Adding Components to the Page
• Configuring Ajax Transactions
• Adding a New Ajax Transaction
• Interacting with Databases
• Adding Java Code
• Deploying the Application
• Summary

To follow this tutorial, you need the following software and resources.

Software or Resource	Version Required
NetBeans IDE	6.5 Java version
Java Developer Kit (JDK)	Version 6 or version 5
JavaServer Faces Components/ Java EE Platform	1.2 with Java EE 5* or 1.1 with J2EE 1.4
GlassFish Application Server	V2
Sample Database	Required

* To take advantage of NetBeans IDE's Java EE 5 capabilities, use an application server that is fully compliant with the Java EE 5 specification, such as the GlassFish Application Server V2 UR2. If you are using a different server, consult the Release Notes and FAQs for known problems and workarounds. For detailed information about the supported servers and Java EE platform, see the Release Notes.

Downloading and Installing the Project Dynamic Faces Component Library

Before you can use the Project Dynamic Faces component library in your application, you must download, install, and the Project Dynamic Faces Ajax Components and Samples plugin. You download and install them in the Plugin Manager.

1. In the main toolbar, choose Tools > Plugins.

2. Select the Available Plugins tab and use the search function to locate the correct plugin. Type the first few letters of the plugin and press Enter.

   The Plugin Manager returns matching results as demonstrated in the following figure.

   
3. Click Install.
4. In the NetBeans IDE Installer, click Next.

5. If you accept the terms in all of the license agreements, select the checkbox and click Install again.

   The IDE installs the plugin and notifies you of the installation results.

6. Click Finish
7. Click Close to exit the Plugin Manager.

Creating the Project

In this section you create a Web project that uses Visual Web JSF framework. The Visual Web JSF framework features a drag and drop approach to web development.

1. In the main toolbar, choose File > New Project.

   The New Project wizard opens.
2. Select Java Web as the category and Web Application as the Project Type. Click Next.
3. Name the project AutocompleteTF.
4. (Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the location for the libraries folder. See Sharing Project Libraries for more information on this option.
5. Click Next.
6. Select GlassFish V2 as the Server and click Next.

7. Select the Visual Web JSF Framework as seen in the following figure.

   

8. Click Finish to create the project.

   Page1.jsp opens in the Source Editor.

Adding Component Libraries

In this section, you add the Project Dynamic Faces component library to the IDE. After you add them, the component library will be available for future Visual Web JSF projects.

1. In the Projects window, right-click the Component Libraries node and choose Add Component Library.

2. In the Add Component Library dialog box, make sure that Dynamic Faces Components (0.2) is selected and click Add Component Library.

   

The project can now access the Dynamic Faces Component Library. The Dynamic Faces category appears in the Palette.

Designing the Page

In this section, you design the Web page by adding JSF 1.2 Woodstock components and Ajax functionality to these components.

Adding Components to the Page

Now you design you web page to make it accessible to users. You drag and drop JSF 1.2 Woodstock components from the Palette to the Visual Designer.

1. Click the Design tab to display the Design view in the Visual Designer.
2. Drag and drop a Label component from the Palette to the upper left corner of the Visual Designer.
3. In the Properties window for the label1 component, enter Name: for the text property.
4. Drag and drop a Text Field component from the Woodstock Basic section of the Palette to the Visual Designer. Place it to the right of the Label component.
5. Right-click the Text Field component and choose Add Binding Atrribute.
6. Drag and drop a Label component from the Palette to the Visual Designer. Place it below the first Label component.
7. In the Properties window for the label2 component, enter Results: for the text property.
8. Drag and drop a Listbox component from the Woodstock Basic section of the Palette to below the Text Field component.
9. Right-click the Listbox component and choose Add Binding Attribute.
10. In the Visual Designer toolbar, click Show Virtual Forms .

Configuring Ajax Transactions

The Ajax Transaction component included with the Dynamic Faces component library (0.2) lets you visually configure Ajax functionality at design time, displaying various components with color-coded borders in the Visual Designer. At a minimum, you specify the components that send input to the server when the Ajax Transaction fires as well as the components that re-render when the client receives the Ajax response. The components that send input to the server are displayed with a solid border in the Visual Designer; the components that re-render are displayed with a dashed border. In addition, you must code a line of JavaScript to fire the Ajax Transaction.

In this section, you configure two Ajax Transactions, one for sending comments and another for polling the server. AjaxTransaction1 fires in response to the user typing text in the Text Field component. When AjaxTransaction1 fires, the textField1 sends input to the server via an Ajax request, and the listbox1 component re-renders when the client receives the Ajax response.

1. Expand the Dynamic Faces section of the Palette and drag and drop an Ajax Transaction component onto Page1.

2. In the Visual Designer, right-click the Text Field component and choose Configure Ajax Transactions.

   The Configure Ajax Transactions dialog box opens.

3. Double-click the Send Input value and change the value to Yes and make sure that Re-Render is set to No.

   
4. Click OK.
5. In the Visual Designer, right-click the Listbox component and choose Configure Ajax Transactions.
6. In the Configure Ajax Transactions dialog box, double-click the Re-render value and chnage the value to Yes. Make sure that the Send Input value is set to No.
7. Click OK.

Adding a New Ajax Transaction

The Configure Ajax Transactions dialog box can also be used to add a new Ajax transaction. In this section, you create a new Ajax transaction, then configure the Text Field component component to re-render the input returned by the Listbox component.

1. In the Visual Designer, right-click the Text Field component and choose Configure Ajax Transactions.
2. In the Configure Ajax Transactions dialog box, click New to create a new Ajax transaction.
3. Set the Send Input for ajaxTransaction2 to No and Re-render to Yes.
4. Click OK.
5. In the Visual Designer, right-click the Listbox component and choose Configure Ajax Transactions.

6. In the Configure Ajax Transactions dialog box, set the Send Input for ajaxTransaction2 to Yes and Re-Render to No. When finished, Page 1 resembles the following figure.

   

7. In the Visual Designer, select the Text Field component, and in the Properties window, add the following parameters to the onKeyUp property.

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

8. Select the Listbox component, and in the Properties window, add the following parameter to the onChange property.

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

Setting up the Database

In this section, you set up the vir database and MySQL database server in the IDE.

1. Make sure that the MySQL database server is installed and running on your machine. For more information about connecting to a MySQL database, see Connecting to a MySQL Database

2. In the Services window, right-click the MySQL Server node and choose Create Database.

   The Create New Database dialog box opens.

   

3. From the New Database Name drop down list, select Sample database: vir and click OK.

   In the Services window, the vir database appears under the MySQL Server node.

   

Interacting with Databases

In this section, you connect to the vir database, which is bundled with the IDE. The JSF 1.2 components can access the data in the database and display it on your Web page.

1. In the Service window, expand the Databases node. Locate the vir database, and make sure that the database is connected.

   
2. Expand the vir Database Connection node and drag and drop the employee table onto Page1.

3. In the Navigator window, expand the SessionBean1 node, right-click employeeRowSet, and choose Edit SQL Statement.

   

   The SQL Editor opens.

4. In the SQL Pane of the SQL Editor, replace the existing query to the following query.

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

5. Close the SQL Editor.
6. In the Services window, drag and drop the employee table onto Page1 again.

7. In the dialog box that appears, select Create SessionBean1 employeeRowSet1 as seen in the following figure. Click OK.

   
8. In the Navigator window, right-click employeeRowSet1, and choose Edit SQL Statement.

9. In the SQL Editor, replace the exiting SQL query with the following SQL query.

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

10. Close the SQL Editor.
11. In the Visual Designer, right-click the Listbox component and choose Bind to Data.
12. In the Bind to Data dialog box, click the Bind to Data Provider tab and select employeeDataProvider from the drop down list.
13. Select employee.id from Value field and employee.firstname from Display field and click OK.

Adding Java Code

In this section, you modify the existing Java code to make your application funtion correctly. In the Visual Designer, when you double-click a component, the Source Editor opens to the place in the code where the component's event methods are located. This makes it easy to modify and add new code.

1. Double-click the Text Field component and replace the code with the following code.

   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); } }

2. Right-click anywhere in the Source Editor and choose Fix Imports.

3. Click the Design tab to return to the Design tab of the Visual Editor. Double-click the Listbox component and replace the existing code with the following code.

   The IDE add the java.util.logging.Logger statement.

   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); }

4. Locate the prerender method and replace it with the following code.

   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); } } }

Deploying the Application

In this section, you run your project. In NetBeans IDE, there are several ways to run a project. You can click the run icon in the main toolbar, or you can right-click the project node in the Projects window and choose Run.

Note: By default, the project has been created with the Compile on Save feature enabled, so you do not need to compile your code first in order to run the application in the IDE. For more information on the Compile on Save feature, see the Compile on Save section of the Creating, Importing, and Configuring Java Projects guide.

1. In the Projects window, right-click the project node and choose Run.
2. In the Web browser, enter the first letters of a name. If a name matching those letters is found in the database, the name is listed in the listbox.

Summary

In this tutorial, you created a Visual Web JSF application using JSF 1.2 Woodstock components and the Project Dynamic Faces component library. You connected to a database and the data was displayed in your deployed application. You slao added Ajax funtionality to you project in the form of text completion.

See Also

• Creating an Ajax Application with Script.aculo.us
• Connecting to a MySQL Database
• Getting Started With NetBeans Visual Web JSF Applications
• Using Databound Components to Access a Database
• Building a Tree from Database Data
• Java Web Application Learning Trail

---

Send Us Your Feedback