NBDemoJSFWoodstock

Woodstock UI Components (5 minutes)

Description

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 introduces the Woodstock UI components.

Product Versions Supported

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


Points to Hit

You will be emphasizing the richness of the Woodstock UI components. This is an introductory demo showing the audience what the Woodstock components are about.

  • NetBeans JSP editor recognizes the Woodstock components.
  • The Woodstock components provide out-of-the-box features saving a developer time.

Demo Prep

  1. Download the Woodstock JSF Page.jspx file.
  2. Open "Tools->Templates".
  3. Select the "JavaServer Faces" node and click "Add...".
  4. Point to the Woodstock JSF Page.jspx file.


Gotchas

While changing the "Welcome file" in the web.xml editor, the syntax might be corrupted. See issue # .


Demo

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

2. Right-click the "Web Pages" node and choose "New->Other...->JavaServer Faces->Woodstock JSF Page.jspx". Name the file "woodstockPage" and click "Finish".

3. Open the "Configuration Files" node and double-click on "web.xml".

4. Select the "Pages" view.

5. Change the "faces/welcomeJSF.jsp" to be "faces/woodstockPage.jspx".

6. Select the "XML" view.

Explanation Point:
We need to add a Theme servlet for the Woodstock components to reference since the components require theme support.


7. Add the following code after the last "</servlet-mapping>".

    <servlet>
        <servlet-name>ThemeServlet</servlet-name>
        <servlet-class>com.sun.webui.theme.ThemeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ThemeServlet</servlet-name>
        <url-pattern>/theme/*</url-pattern>
    </servlet-mapping>
Explanation Point:
We need to add runtime libraries for the Woodstock components to function properly.


7. Right-click the "woodstock" project node and select "Properties".

8. Select the "Libraries" category on the left and add the following libraries.

  • Web UI Components
  • Web UI Default Theme
  • JSF 1.1/1.2 Support

9. Copy the following code into the woodstockPage.jspx file after the line "Woodstock JavaServer Faces components".

	<p/>
	<webuijsf:textField id="textFieldName" label="textField" required="true"/>
	<p/>
	<webuijsf:calendar id="calendar1"/>
	<p/>
	<webuijsf:button id="button1"/>
	<p/>
	<webuijsf:messageGroup id="messagegroup1"/>
}
Explanation Point:
Point out that the textfield "required" property is set to "true".


10. Run the project.

Explanation Point:
Show how you can select a date in the calendar component. Click the button and show how the textfield label automatically changes and the messagegroup component shows the error. Explain that there was no coding required to do this and also point out that there was no backing bean involvement.


Demo Cleanup

None.

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