Visual Web JSF Binding and AJAX (10 minutes)


This presentation is part of the NetBeans Day World Tour and is used in the session “Introduction to JavaServer Faces and the Woodstock UI Components”. This demo focuses on the binding capabilities of Visual Web as well as the AJAX functionality.

Product Versions Supported

  • NetBeans 6.0.1 with the Web and Java EE features installed.
  • Dynafaces complib 0.2
  • Woodstock 4.2 components.

Points to Hit

You will be emphasizing the ease of development using Visual Web.

  • Drag-n-drop binding of database tables.
  • Visual value binding.
  • Visual method binding.
  • Visual AJAX development.

Demo Prep

  1. Make sure you've added the Dynafaces 0.2 complib prior to the demo. Here are the steps to do this.
    1. Select "Tools->Component Libraries".
    2. Click on the "Import..." button.
    3. Browse to the "Dynafaces 0.2 complib" and click "OK".
  2. Make sure you are connected to the database "jdbc:derby://localhost:1527/travel travel on TRAVEL".
  3. Install Woodstock 4.2 components. Here are the steps to do this.
    1. Download the Woodstock 4.2 component NBM files, Components and Theme.
    2. Select "Tools->Plugins"
    3. Select the "Downloaded" window and click "Add Plugins...".
    4. Browse to the location where you saved "org-netbeans-modules-visualweb-woodstock-webui-jsf.nbm" and "org-netbeans-modules-visualweb-webui-jsf-defaulttheme.nbm" and choose these to files to add.
    5. Click the "Install" button.


If you forget to install the Woodstock 4.2 components, the AJAX portion of the demo will not work.


1. Create a new Web->Web Application project choosing "Visual Web JavaServer Faces" on the "Frameworks" dialog. Name the project "visualweb2".

2. Drag-n-drop a table component onto the middle of the page.

3. Select the "Services" window. Drill down on the "Databases->jdbc:derby://localhost:1527/travel->Tables" node and drag-n-drop the "TRIP" table onto the UI table.

4. Right-click on the table and select "Table Layout" and do the following.

  * Remove "trip_id" and "person_id".
  * Select the "Options" view and "Enable Pagination" setting the "Page size" to 5.
  * Select "Ok" to close the "table layout" dialog.

5. Drag-n-drop a drop down list above the table.

6. Select the "Services" window. Drill down on the "Databases->jdbc:derby://localhost:1527/travel->Tables" node and drag-n-drop the "PERSON" table onto the drop down list.

7. Right-click the drop down list and select "Bind to data...".

8. Select "PERSON.PERSONID" as the value and "PERSON.NAME" as the display field.

9. Right-click the drop down list and select "Auto-Submit on Change".

10. With the editor opened to "Design" view on "Page1", on the SessionBean1->tripRowSet in the navigator, right-click and select "Edit SQL statement".

11. In the "PERSONID" row, criteria column right-click and select "add query criteria..."

12. Select "parameter" and leave the value "?", press "OK" to close the dialog.

13. Select "Page1" and double-click on "SessionBean1" in the "Navigator" window.

14. Add the following code to SessionBean1.

private Integer personId;

15. select "personId", right-click and select "refactor->encapsulate fields...", take the defaults and select "Refactor".

16. Select "Page1" and double-click on the drop down list component and add the "Samples->Travel:dropdown" code clip inside the method opened to.

17. Scroll up to the "prerender" method and add the "Samples->Travel:prerender" code clip inside the method.

18. Run the project and show how changing the drop down value changes the table values.

Explanation Point:
Now let's look at how easy it is to make this work with AJAX so the page doesn't have to refresh to change the table values.

19. Right-click on the "visualweb2->Component Libraries" node in the "Project" window and select "Add Component Library...".

20. Select the "Dynamic Faces Components (0.2)" Library and click the "Add Component Library" button.

21. Select "Page1" and switch to the "Design" view.

22. Drag-n-drop a "Dynamic Faces->Ajax Transaction" onto the designer.

23. Click on the "Show Virtual Forms" button.

24. Right-click on the drop down list and choose "Configure Ajax Transactions...".

25. Change "Send Input" to "Yes" and click "Ok".

26. Right-click on the table and choose "Configure Ajax Transactions...".

27. Change "Re-Render" to "Yes" and click "Ok".

28. Click on the drop down list and change the "On Change" property to the following.


29. Right-click the drop down list and UNSELECT "Auto-Submit on Change".

30. Run the project and show the table refreshing without a page refresh.

Demo Cleanup


Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo