AutoCompleteTextFieldUsingDynaFaces

Autocomplete Text Field using Ajax Transaction Dynamic Faces Component

Contributed By; Bilal Ahamed

---

[[{TableOfContentsTitle=TableOfContents} | {TableOfContents title='Table of Contents'}]]

Creating a Project

---

1. From the Main Menu, choose File > New Project
2. In the New Project wizard, select Web from the Categories list, select Web Application from the Projects list, and click Next.
3. Name the project

   Autocomplete

   and choose a location for the project.
4. Select GlassFish V2 for the Server, Java EE 5 for the Java EE Version click Next
5. Select Visual Web JavaServer Faces and click Finish

Adding Component Libraries...

---

• In the Projects window, right-click the Component Libraries node and choose Add Component Library
• In the Add Components Library dialog box, select Dynamic Faces Components (0.2), and click Add Component Library to close the dialog box a new Dynamic Faces section appears in the Palette window.

Working with Visual Designer and Dynamic Faces Components

---

Virtual Forms in Visual Designer

1. Return to the Visual Designer for Page1.
2. Drag a Text Field component from the Basic section of the Palette, and drop it in Page1
3. Drag a Listbox component from the Basic section of the Palette, and drop it below Text Field
4. In the Visual Designer toolbar, click the Show Virtual Forms button

Dynamic Faces Components

1. Expand the Dynamic Faces section in the Palette and drag an Ajax Transaction component from the Dynamic Faces section onto the Page1
2. In the Visual Designer, select textField1. Then right-click and select Configure Ajax Transactions
3. Set ajaxTransaction1 Send Input Yes and Re Render No
4. In the Visual Designer, select listbox1 Then right-click and select Configure Ajax Transactions
5. Set ajaxTransaction1 Send Input No and Re Render Yes

What to do in Visual Designer?

1. In the Visual Designer, select textField1 again. Then right-click and select Configure Ajax Transactions and click New
2. Set ajaxTransaction2 Send Input as No and Re Render as Yes
3. In the Visual Designer, select listbox1. Then right-click and select Configure Ajax Transactions
4. Set ajaxTransaction2 Send Input as Yes and Re Render as No
5. Select textField1 Properties, select onKeyUp and add

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

6. Select listbox1 Properties, select onChange and add

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

Interaction with Databases

1. Drag the Vir > Tables > EMPLOYEE node from the Services window and drop it on Page1
2. From SessionBean1 double click employeeRowSet and edit query as shown

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

3. Drag the Vir > Tables > EMPLOYEE node from the Services window and drop it on Page1 again.
4. From SessionBean1 double click employeeRowSet1 and edit query as shown SELECT ALL VIR.EMPLOYEE.ID, VIR.EMPLOYEE.FIRSTNAME, VIR.EMPLOYEE.LASTNAME, VIR.EMPLOYEE.EMAIL FROM VIR.EMPLOYEE WHERE VIR.EMPLOYEE.ID = ?
5. In the Visual Designer, select listbox1 Then right-click and select Bind to Data
6. Choose employeeDataProvider from drop down and select EMPLOYEE.ID from value field and EMPLOYEE.FIRSTNAME from Display field and click Ok

Code Samples

---

• Double click textField1 add the following code;

Code Sample 1

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

• Double click listbox1 and add the following code-

Code Sample 2

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

• Scroll in the Java source to the

  prerender

  method and replace it with the following code-

Code Sample 3

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

AutoFormat and Deploy

---

• Right-click in the Java Editor and choose Format to make the code align correctly OR you may use shortcut key combination-

  Alt+Shift+F

  !
• Build, deploy, and run the project

• This page was last modified on 6 November 2009, at 14:42.
• This page has been accessed 2,642 times.