Visual Web JSF Simple Demo (5 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 helps introduce the Visual Web JSF development features of the NetBeans IDE.

Product Versions Supported

  • NetBeans 6.0.1 with the Web and Java EE features installed.

Points to Hit

You will be emphasizing the ease of development using Visual Web. This is an introductory demo showing the audience what the Visual Web functionality in the NetBeans IDE is about.

  • Drag-n-drop functionality building pages.
  • Visual editing via property editors.
  • Ability to dive into the action method code.
  • Visual JSF Navigation.

Demo Prep





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

2. Drag a textfield onto the designer.

3. Drag a statictext onto the designer.

4. Drag a button onto the designer.

5. Double-click the button.

Explanation Point:
Explain how the visual part is intuitive in that it creates the action method, does the binding, and takes you to the source code to input the action logic.

6. Add this code


7. Run the project.

8. Add another button to Page1 and change the label to "Page 2". Change the "id" property to "btnPage2".

Explanation Point:
Now let's take a look at how easy JSF navigation is with Visual Web.

9. Right-click the "Web Pages" node and select "New->Visual Web JSF Page".

10. Take the default name of "Page 2" and click "Finish".

11. Add a statictext component and change the text to "Page 2".

12. Add a button and change the label to "Back". Change the "id" property to "btnBack".

13. Right-click in the page and select "Page Navigation".

14. Expand Both Pages by clicking the "+".

15. Connect Page1->btnPage2 to "Page2".

16. Connect Page2->btnBack to "Page1".

17. Select the "XML" view.

Explanation Point:
You can see how visual web has done all the work for you in the faces-config.xml file.

18. Run the project.

19. Show how the navigation works.

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