Eclipse Corner Art icle

WTP Tutorials - JavaServer Faces Tools Tutorial

Summary
In this tutorial we will build and execute a JavaServer Faces application, and highlight the features contributed by the JSF Tools Project.

By Raghu Srinivasan, Oracle Corporat ion.

June 18, 2007

Introduction
In this tutorial we will create and execute a web application with JavaServer Faces capabilities. The WTP JSF Tools project has provided features that simplifies
application building, configuration and execution. These include the Web Page Editor for visually editing a JSF- JSP web page, syntactic and semantic validation of a
JSF- JSP page, the Faces Configuration Editor for editing the application configuration resource file.

You may wish to visit Building and Running a Web Application before attempting this tutorial. That tutorial covers setup of the server instance that this tutorial does not.

Setup
The Java SE 5 Development Kit (JDK)
Eclipse 3.3
Eclipse Web Tools Platform Project(WTP) 2.0
Apache Tomcat 6.0
JavaServer Faces RI v1.2
JSP (tm) Standard Tag Library 1.2 implementation

Make the Web Page Editor the default editor for JSP pages
The JSF Tools Project- contributed Web Page Editor (WPE) is NOT registered as the default editor for JSP files. You can make the WPE the default editor for JSP files
by following these steps:

[Link]
 Navigate to "Window" - > "Preferences..." - > "General" - > "Editors" - > "File Associations"
In the "File types" section, select "*.jsp"
In the "Associated editors" section, select "Web Page Editor"
Select the "Default" button

Register JSF libraries

This feature allows for a named sets of jars to be created for use with JSF Applications. We will be creating a library containing the Sun JSF RI
Select Windows- >Preferences- >Web and XML- >- >JavaServer Faces Tools- >Libraries. Click on the New.. button to add a new library. Create the JSF Libraries as
shown in the following figures. Check the is JSF Implement at ion check box when adding the Sun JSF RI library.

[Link]
Create another JSF Library called JSTL that has the JavaServer Pages Standard Tag Library jar as shown below.

[Link]
Create a JavaServer Faces Project
Create a New Dynamic Web Application with the name of JSFTut orial. Set the target runtime to the Apache Tomcat 6.0
In the conf igurat ion section, select the JavaServer Faces Project v1.2 . Skip the next two panels to get to the JSF Capabilities page.

[Link]
On the JSF Capabilities page, select the radio button adjacent to the JSF Library JSF- RI- 1.2. Add the JSTL library.

[Link]
 If you deploy the JSF web application to a server runtime that includes the JSF 1.2 reference implementation, then you should select the Server Supplied
JSF implement at ion option.

Click on the Finish button to create the JavaServer Faces Application. You may be prompted to accept the license for the Web App DTD from Sun. You may also be
asked to choose the J2EE perspective upon completion. In both cases accept.

Your JSF application has been created. Note that the [Link] file has been updated with the Faces Servlet and servlet- mapping, a stub JSF application configuration
file (faces- [Link]) has been created, and the build path has been updated with the implementation jars.

[Link]
 If you have an existing Dynamic Web Application, it is possible to add JSF capabilities by going to:
Project Propert ies > Project Facet s > Add\Remove Project Facet s…

Create a JSF JSP Page

Use the JSP Page wiz ard to create a page called [Link] in the Web Content folder of the new application. In the Select Templates page of the wiz ard, select the
New JSP(ht ml) template. Click Finish. The page will be opened in the Web Page Editor as shown below

[Link]
Open the Properties View. Right- mouse click on the designer canvas and from the context menu, select Show- >Properties. Wait for the ‘Reading Properties’
dialog to disappear.

Ad d a C o mmand B ut t o n t o t he canvas.

[Link]
 In t he Palet t e View, click on t he sect ion JSF HTML t o display t he list of component s.
Drag- and- drop t he CommandBut t on t o t he canvas. Not e t hat t he edit or wraps t he CommandBut t on wit h <f :view> and <h:f orm> t ag.
In t he propert ies view, click on Quick Edit .
Set t he Value at t ribut e t o Login.
Set t he Act ion at t ribut e t o login

Ad d a Pane lG rid

From the Palette View, Drag- and- drop the PanelGrid to the canvas. Notice the feedback on the drop target.
Drop the Panel Grid before the Command Button, but inside the Form tag. The Panel Grid is created with a predefined set of OutputText components.

Mo d if y t he co mp o ne nt s insid e t he Pane l G rid

[Link]
 Click on the OutputText It em2 and hit Delete
Add a InputText (Text Input in the Palette view) tag after It em1 and before It em3
Delete the OutputText, It em 4
Add a InputSecret (Secret Input in the Palette view) tag after It em3
Click on the OutputText, It em1. Change its value in the Source View to Name
Click on the OutputText, It em3. Change its value in the Source View to Password
Click on the Preview tab to see the page rendered in a browser
Click on the InputText tag next to Name. In the Property View, set the value attribute to # {[Link]}.
Save the page. The editor will flag a warning indicating that the variable, loginBean cannot be resolved.

In the Project Explorer, expand the node, JSFTutorial- >WebContent. Double- click on f aces- conf [Link] . This will launch the Faces Configuration editor. Select the
ManagedBean tab.

[Link]
Click on the Add button. This will launch the New Managed Bean wiz ard. Select the option, Creat e a new Java class . In the next wiz ard panel, enter the package
as, com.t ut orial and the Name of the class as LoginBean . Click the Finish button.

[Link]
This will create the Java class and register it as a managed bean. Save the Faces Configuration [Link] edit the Java class, click on the hyperlink, ManagedBean
class in the Managed bean page as shown in the figure below. This will launch the Java editor.

Edit the Java class, com.t ut [Link]. Add the following code and save.

[Link]
In the Project Explorer view, right- mouse click on the JSP page, [Link] and from the context menu, select the Validat e option. Note that the page should now be
valid.

In the Source Page of the Web Page Editor, add the JSF tag, <h:input Secret value= "# {}"></h:input Secret > . With the cursor inside the brackets, hit
Ct rl+ spacebar . You should see a pop- up with a list of all the implicit objects plus the managed bean defined above. Select the managed bean, loginBean

[Link]
Enter the name of a property, say x, that is not defined in the managed bean and save the change. The editor will report a warning that the property cannot be
resolved.

Delete the invalid property. Hit Ct rl+ spacebar after the '.' in the bean name. You should see a pop- up listing the properties defined in the managed bean. Select
password from the menu.

Create a Java class, com.t ut [Link] ePassword that implements the Validat or interface and save.

[Link]
In the Project Explorer, expand the node, JSFTutorial- >WebContent. Double- click on f aces- conf [Link] . This will launch the faces- config editor. Select the
Component tab. Expand the Validat ors section.

[Link]
Click on the Add button. Select the Browse button associated with the Validat or Class field and select the com.t ut [Link] ePassword class. Save the
changes.

[Link]
Add the JSF tag, <f :validat or id= ""></f :validat or > . With the cursor inside the double- quote, hit Ct rl+ spacebar . You should see a pop- up with a list of all the
standard validators plus those registered in the faces- config file. Select Validat e Password .

We will now move the static strings we have used in the page to a resource bundle. To do this, add a file called, [Link] ies in the folder com.t ut orial .
Define the properties as shown below and save the file.

[Link]
Add the JSF tag, loadBundle as shown below. You can drag- and- drop the tag from the JSF Core section of the Palette View.

Delete the string, Name in the value attribute of the out put Label tag. Position the curson inside the brackets and hit Ct rl+ spacebar . You should see a pop- up with
a list that includes the msg variable that you defined in the loadBundle tag. Select it.

Enter a dot after msg and and hit Ct rl+ spacebar . You should see a pop- up with a list of properties defined in the [Link] ies file. Select the property,
name .

[Link]
Complete the login page as shown below.

Create a new JSF page, [Link] as shown below.

[Link]
Faces Configuration Resource Editor
The JSF Tools project includes a special editor for the faces configuration resource files. The following section gives a brief introduction to the editor. A
comprehensive tutorial detailing all the features of the editor will be published soon.
Double- click on the f aces- conf [Link] file to launch the Faces configuration editor. Switch to the Navigat ion tab.

[Link]
Add the [Link] and [Link] to the Navigation tab. Select the Page control from the Palette and drop it on the Navigation tab. Choose the page in the
resulting Select JSP File dialog.
Connect the two pages. Click on the Link control in the Palette, select the login page and draw a line to the welcome page. Select the line in the Navigation
tab and in the property view, set the value of the f rom- out come to login .

[Link]
Testing the JSF JSP Page
1) We will now execute the page against the Apache Tomcat server. Choose Run on Server using the context menu while selecting the [Link] page in the
navigator.

[Link]
2) Choose your Apache Tomcat server and set it up as required if you had not already done so.

3) Click Finish. You should see from the Console view that the Tomcat server starts and then you should see the executing login page appear in the Web Browser like
below.

[Link]
Click on the login button. You should navigate to the welcome page.

Congrat ulat ions! You have creat ed and execut ed your f irst JavaServer Faces applicat ion using t he new Eclipse WTP JSF Tools.

[Link]