Begining JSF

Introduction to JavaServer Faces using JDeveloper
Purpose
This tutorial takes you through the basics of building a client application using JavaServer Faces (JSF).
Topics
The tutorial covers the following topics:
Overview
Prerequisites
Building a JavaServer Faces project
Building a JavaServer Faces page
Designing the application page flow and the Login
page
Building the Hello page
Running the application
Defining conditional navigation
Summary
Overview
JavaServer Faces (JSF) is a standard Java framework for building Web applications. It simplifies development by providing a
component-centric approach to developing Java Web user interfaces. JSF also ensures that applications are well-designed
with greater maintainability by integrating the well-established Model-View-Controller (MVC) design pattern into its
architecture. The true power of JavaServer Faces lies in its user-interface component model, where applications are built
from collections of components that can render themselves in diverse ways for multiple client types.
In this tutorial you create three JSF pages. The first is a Welcome page that serves as the starting point for the application.
The second page is a Login page with two fields; one for the user name and one for the password. The page uses a Java
bean to make these two values available to other pages in the application. The third page returns a Hello message and
displays the user name that is stored in the backing bean. You also define JSF navigation links from the Welcome page to the
Login page and then to the Hello page.
Prerequisites
Before you begin this tutorial, you should:
1. Have access to or have installed Oracle JDeveloper (10.1.3.1.0). You can download it from Oracle Technology
Network.
file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (1 of 49)2007/5/6 下午 07:27:31

2. Start JDeveloper. Double-click the JDeveloper executable (jdeveloper.exe) found in the root directory where you
unzipped it.
If the Migrate User Settings dialog box opens, click NO.
Close the Tip of the Day window.
Building a JavaServer Faces project
This topic guides you through the steps to create a web application that uses JavaServer Faces. To create a new application
and project for your JSF view, perform the following steps:
1. To create a new application, right-click the Applications node in the Applications Navigator and select the New
Application... option.

2. Name the application JSFIntro. Leave the Application Template field as its default, No Template, and click OK to
create the application.
3. In the Create Project dialog, type view as the project name, and then click OK. A project is a logical grouping of
associated files. This project contains files representing your JSF-based view.
4. Click Save All to save your work.

Building a JavaServer Faces page
This subtopic guides you through the basics of the JSF page creation. First you create the page, and then you add details to
it.
Creating the Welcome page

Adding details to the Welcome page
Creating the Welcome page
To create the Welcome JSF page for the application, perform the following steps:
1. Right-click the view project, and from the context menu, choose New...

2. In the New Gallery, expand the Web Tier node. Select JSF in the Categories list and JSF JSP in the Items list.
Click OK.
3. If the Welcome page of the Create JSF JSP wizard displays, click Next to continue. (If you do not want to see this
page in the future, select the Skip this Page Next TIme checkbox before continuing.)

4. In the Web Application page of the wizard, select the Servlet 2.4\JSP 2.0 (J2EE 1.4) option. Click Next to continue.

5. In the JSP File page of the wizard, name the page welcome.jsp. For Type, select the JSP Page option, and then
click Next.

Note that selecting the Add Mobile Support checkbox would enable you to create JSF pages for mobile applications,
but you do not need to do so for this tutorial.
6. In the Component Binding page of the wizard, select the Do Not Automatically Expose UI components in a
Managed Bean option. Click Next.

7. In the Tag Libraries page of the wizard, you see the tag libraries that are enabled for this JSP page. Since this is to
be a JSF-enabled page, both the JSF Core and JSF HTML libraries are preselected.
Selection of the libraries merely inserts the necessary taglib directives for JSF into the page. JDeveloper also
comes with the additional ADF Faces set of JSF components. You could add other JSF components through the
Manage Libraries option from the Tools menu.
You need only the default taglib directives, so click Next to continue .

8. In the HTML Options page of the wizard, accept all defaults. Click Finish.

9. You now see the skeleton of your JSF-enabled JSP (welcome.jsp) in the Visual Editor.

10. Expand the view project node in the Applications Navigator and notice its content. You can see the welcome.jsp.
In the WEB-INF folder, there is a new file named faces-config.xml .
Adding details to the Welcome page
Now that you have created the page, add details to it by performing the following steps:
1. Add a heading to your Welcome page.
In the top of the page, enter the text: Welcome to the JSF Intro Application.
Format the text to H2 by selecting Heading 2 from the the Block Format dropdown list at the top left of the editor

window .
2. Apply a style sheet to your page. To do this, select the CSS library in the Component Palette dropdown list. (If the
the Component Palette is not visible, select View > Component Palette.)
Now drag the JDeveloper style sheet from the Component Palette to your page. You should see an immediate
change in the appearance of the page (if not, select the page and then select View > Refresh ).

3. Next, drag a JSF commandButton component to the page.
In the Component Palette, select the JSF HTML list of components. Then drag the Command Button component to
the page below your header text.
Notice the Help text that appears when you position your mouse over a component in the Component Palette.

4. In the Property Inspector (select View > Property Inspector if it is not visible), change the Value attribute of the
CommandButton to Proceed to Login.
As you work in the visual editor, notice that JSF components are shown with their run-time appearance (for
example, as a button) and that components are synchronized with the attributes in the Property Inspector.
5. Change the Action attribute to login. When clicked at run time, this enables users to proceed to another page,
based on a navigation rule that you create later.

6. Click the Source tab at the bottom of the Visual Editor to switch to the source view of the page.
Near the top of the source page, there are two taglib directives for the standard or base JSF component libraries
that were selected by default in the wizard that you used to create the page. These libraries are part of the
specification and come with the reference implementation of JSF. The specific libraries are the Core library and the
HTML library.
7. Scroll down the body of the page to see the tag:
<h:commandButton value="Proceed to Login" action="login"/>
This is the JSP tag that provides a hook to the JSF commandButton user interface component. When the tag
executes, it provides a clickable button which can perform a task such as calling a Java method or executing a JSF
navigation rule.
In this example, the button performs navigation to another page. This is done by setting the Action attribute of the
commandButton in the Property Inspector and then later defining a navigation rule that corresponds to the action's
value. In this case, you have already set the Action attribute with a value of login. Later you define a navigation
rule to use that same value to navigate to the Login page.
Designing the application page flow and the Login page
This subtopic guides you through using the JSF page flow editor to visually design the application. The JSF page flow editor

enables you to design the page flow of an entire application by defining navigation rules.
Creating the page flow and the Login page

Adding details to the Login page
Creating the Page flow and the Login page
You can control the page flow for the application on a JSF Navigation Diagram, which is a visual representation of the faces-
config.xml file. The faces-config.xml file is the primary JSF application configuration file in which navigation rules and
managed beans are defined.
In the JSF Navigation Diagram visual editor, which can also be referred to as a page flow editor, you can incorporate existing
pages by dragging them to the diagram. You can also use the Component Palette to create new pages directly on the
diagram.
Also defined in faces-config.xml are managed beans, which are a key part of JSF. Any Java object can be a managed
bean as long as it has a no-arg constructor. When you create a page, you can automatically create a managed bean with
references to the objects you create on the page. This type of managed bean is called a backing bean, and it also provides a
place to put code. In many cases the backing bean contains only action code with no references to the UI components, or
references to only a few of the components that you need to manipulate programmatically. Managed beans can also be used
to hold information for the request, application, or session. In this application you use a managed bean to hold the value of
the user name and to execute code that validates the password.
To define the page flow and create the Login page, perform the following steps:
1. Locate the faces-config.xml file in the Applications Navigator (Web Content > WEB-INF folder). Double-click
the file to invoke the JSF Navigation editor.
The Visual Editor displays a screen that displays a help message.

Note: An alternate way to open the page flow editor is to right-click the view project and select Open JSF
Navigation from the context menu.
2. Before continuing, notice that there are four tabs for the editor at the bottom of the screen:
● The default view is the Diagram view of the faces-config editor, which enables you to visually edit the
navigation rules of your application. You can define navigation rules either visually or by using the overview
console.
● Clicking on the Overview tab shows a console-type interface where you can register any and all types of
configurations into your faces-config.xml file, including managed beans, navigation rules, and other
items such as custom validators or converters.
● The Source tab enables you to edit the XML directly with enhanced XML editing capabilities, including tag
completion.
● The History tab is common to all editor windows and shows a history of recent edits.
3. Add your initial welcome.jsp page to the diagram by dragging it from the Applications Navigator.

4. Create the login.jsp in the diagram directly.
To do this, drag a JSF Page item from the Component Palette onto the diagram.
Change its name to /login.jsp by clicking its name on the diagram and overtyping. You have to type only
login; when you press [Enter], JDeveloper adds the leading forward slash and the .jsp extension.

Notice that the page has a yellow marker on it to designate that it hasn't actually been created yet, but exists only in
the diagram.
5. Create a navigation rule by clicking (don't drag) the JSF Navigation Case item in the Component Palette, then
clicking welcome.jsp in the diagram . You should see a connection line start to appear. Then click login.jsp to
complete the connection.
6. In the Property Inspector, change the default From Outcome value, success, to login, matching the value that
you set for the Action attribute of the commandButton on the welcome.jsp page.
An alternate way to rename the navigation case is to click its name on the diagram and overtype it. You do not need
to type the leading hyphen; JDeveloper adds it automatically when you press [Enter].

7. Create the Hello page on the diagram. Drag and drop a JSF Page item onto the page flow diagram, and name it /
hello.jsp.
8. Create a navigation rule by clicking the JSF Navigation Case item in the Component Palette, then clicking login.
jsp on the diagram . Click hello.jsp to complete the connection.
9. In the Property Inspector, change the From Outcome value to hello, or change it by overtyping the name in the
diagram.

10. Examine the syntax of the navigation rules that you just defined. Click the Source tab of the faces-config.xml
file to see the new navigation rules specified.
Note that some of the <to-view-id> and <from-view-id> tags are reporting a warning because login.jsp and
hello.jsp don't exist yet.
11. Click the Diagram tab to return to the visual editor.
Create the login.jsp page by double-clicking login.jsp in the diagram to invoke the JSF JSP Wizard that you
used earlier.

12. Click Next to skip the Welcome page of the Create JSF JSP Wizard.
In the JSP File page of the wizard, make sure that the JSP Page option is selected, and then click Next.
13. In the Component Binding page of the wizard , specify that you want the page's components to be automatically
bound to a managed bean that you create at the same time.
To do this, select the Automatically Expose UI Components in a New Managed Bean option. Accept the defaults
for the bean name and class. Ensure that the package is named view.backing. Click Finish.

14. The new login page opens in the design editor.

Adding Details to the Login Page
The purpose of the page is to allow users to navigate to hello.jsp once they enter a valid username and password.
1. Add a heading text Application Login and format it with H2 as before. Then apply the JDeveloper CSS as
before.
Note that you can also apply the JDeveloper style sheet by dragging jdeveloper.css to the diagram from the
Applications Navigator (in the Web Content > css folder).

2. To build the Login page, you use a set of basic components provided in the JSF specification: panelGrid,
outputLabel, inputText, inputSecret, message and the commandButton, which you used earlier.
The panelGrid serves as a table structure to lay out the login fields. (Alternatively, an HTML table could be used as a
container for the login fields, but the panelGrid code is more compact.)
In the Component Palette, make sure the JSF HTML Palette page is displayed. Drag the Panel Grid component to
the page beneath the heading to invoke the Create PanelGrid wizard.
3. Click Next to skip the Welcome page of the wizard.
On the PanelGrid Options page of the wizard, select the Create empty panel grid option and set the Number of
Columns to 3. Click Finish to add the component to the page.

You should then see a rectangle on your page.
4. Drop the following components in order from the Component Palette into the panelGrid on the page:
Output Label
Input Text

5. In the Property Inspector for the Output Label, change the Value attribute to User Name.
For the Input Text, set the Required value to true.

6. Drag the Message component from the Component Palette into the panelGrid on the page. In the Insert Message
dialog, select inputText1 from the dropdown list next to the For field. Click OK.
This message component displays an error if no value is specified for the User Name field.
7. Drag the following components in order from the Component Palette into the panelGrid on the page:
Output Label
Input Secret
8. In the Property Inspector, change the Value attribute of the Output Label to Password,

and set the Required value of the Input Secret field to true.
9. Select JSF Core from the Component Palette dropdown list. Drag the Validate Length component from the
Component Palette to the Input Secret field on the page.
In the Property Inspector, specify 8 as maximum length and 4 as minimum.

10. Select JSF HTML from the Component Palette dropdown list. Drop the Message component from the Component
Palette into the panelGrid on the page.In the Insert Message dialog, select inputSecret1 from the drop down list next
to the For field. Click OK.
This message returns errors if no value is specified for the password or if the length of the string for the password is
lower than 4 or higher than 8 digits.
11. Drag a Command Button into the panelGrid. The page should now look like this:
12. Change the Value attribute for the Command Button to Hello Me. Then select hello from the Action attribute
dropdown list.

The dropdown list contains all valid From Outcomes for the page, as you specified in the JSF Navigation Diagram.
Building the Hello page
Next you create the third page, hello.jsp. This page illustrates how to use a backing bean to display information coming
from another page. The Hello page displays the username that was entered into the Login page by the user. The username is
stored in the backing bean for the Login page.
To build the Hello page, perform the following steps:
1. Click the faces-config.xml tab in the editor to switch to the JSF Navigation Diagram. Double-click hello.jsp in the
diagram to invoke the Create JSF JSP wizard.

2. If the Welcome page of the wizard displays, click Next to continue.
On the JSP File page of the wizard, select the JSP Page option, and then click Next.
3. On the Component Binding page of the wizard, select the Do Not Automatically Expose UI components in a
Managed Bean option. Click Finish.

4. The skeleton of your JSF-enabled JSP (hello.jsp) opens in the Visual Editor.

5. Add an H2 heading Hello to the page, and again add the JDeveloper style sheet.
6. Next to the Hello text add a space, and then drag an Output Text component from the JSF HTML library in the
Component Palette to the page on the same line as the text, just to the right of the space.
7. For the OutputText, select the Value attribute in the Property Inspector, and then click Bind to Data in the
Property Inspector toolbar.

8. In the Value dialog, expand JSF Managed Beans > backing_login > inputText1, then select value. Click the right
arrow to shuttle the selection to the Expression field. Click OK.

9. On a new line below the Hello line, add the new text " You've successfully completed this Intro to
JSF tutorial".
Running the application
1. Click the faces-config.xml tab in the editor to switch to the JSF Navigation Diagram. Right-click /welcome.jsp in
the diagram and select Run from the context menu.

2. The embedded OC4J server launches. Note the messages that are displayed in the Log window. (If the Log window
is not visible, then select View > Log.)

Note: To wrap the messages in the window, right-click in the log window and select Wrap from the context menu.
3. The Welcome page displays in your default browser. Click Proceed to Login.
4. The Login page displays. Don't type any value, but click Hello Me to test if the Required field constraint violations
return errors.
The page display should look like this:

5. Test your login page by specifying a value for the User Name field and a single character for the password entry,
then click Hello Me.
The page display should now look like this:
6. Retest your login page by specifying a value for the User Name field and a valid String for the password (length
must be between 4 and 8 digits), then click the Proceed to Login button. The Hello page displays, returning your
User Name.
The navigation from your Welcome page to the Login page and then to the Hello page is successful!
Defining conditional navigation
In this section, you add code to the backing bean for the Login page to test if the password entered matches the expected
value. If it does, then you display a page. Otherwise, an error message should be displayed.
1. Return to JDeveloper and open the JSF Navigation Diagram by clicking the faces-config.xml tab in the editor.

2. Create a navigation rule by clicking the JSF Navigation Case item in the Component Palette, then clicking login.
jsp in the diagram. Click welcome.jsp to complete the connection, clicking interim points where you want elbows
to appear in the line.
Note: To add an elbow to an existing connector, you can Shift+click on the line where you want to create a new
elbow. To remove an elbow, you can Shift+click the elbow that you want to remove.
3. In the Property Inspector, change the default From Outcome value to failed, or change it by overtyping the name
in the diagram.

4. Click the login.jsp tab in the editor to open the Design view for the page, and select the Hello Me button.
In the Property Inspector, remove the hello value for the Action property by selecting <default> from the dropdown
list.
5. In the Structure window (displayed below the Applications Navigator by default ), right-click the h:commandButton
that corresponds to the Hello Me button, and select the Create Method Binding for Action option from the context
menu. (If the Structure window is not visible, select View > Structure.)

6. In the Bind Action Property dialog, accept the defaults and click OK.

7. The Login.java class, which is the backing bean for the Login page, opens in the Source editor and shows the new
statements that were added for the commandButton.
8. Below the // Add event code here comment, remove the return null statement and type ife ...
...and then press [Ctrl] + [Enter] to automatically generate the if - else statement's structure.

9. There are two possible target pages that you can reach from the commandButton, because there are two navigation
cases for the Login page. You need to programmatically navigate to either the Hello page or the Welcome page
based on a condition. You do this by returning a string that corresponds to one of the From Outcomes for the Login
page: hello or failed.
Change the if statement code as follows:
if (inputSecret1.getValue().toString().equals("welcome")) {
return "hello";

10. Change the else statement code as follows:
} else { String message = "Invalid login";

FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
return "failed";
Press [Alt]+[Enter] twice to accept the suggestions to import javax.faces.context.FacesContext. and

javax.faces.application.FacesMessage.
11. Your code should now look like this:
if (inputSecret1.getValue().toString().equals("welcome")) {
return "hello";
} else {
String message = "Invalid login";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
return "failed";
}

12. Click the welcome.jsp tab in the editor and then click the Design tab to open the design view for the Welcome
page. Above the Proceed to Login button, add a new empty line. Then, from the JSF HTML library in the
Component Palette, drag a Messages component to the blank line.
At run time, the Messages component displays any error messages that may be returned for the page.
13. Open the JSF Navigation Diagram, right-click the Welcome page and select Run from the context menu.

14. Click Proceed to Login and test the Login page by providing your name and a wrong password value. Then click
Hello Me.
15. The Welcome page should now display the login error.
16. Click Proceed to Login and this time enter your name and a password of welcome. Click Hello Me .

The Hello page should display with your name.
Summary
In this tutorial, you learned how to use JavaServer Faces to build a web interface.
You've learned how to:
Build JavaServer Faces pages

Add navigation cases to control navigation between pages
Use a backing bean to pass information from one page to another
Apply basic validation rules to data entry fields
Add backing bean code to determine which page to display based
on a condition

Begining JSF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Begining JSF

Uploaded by

Copyright:

Available Formats

Introduction to JavaServer Faces using JDeveloper

Introduction to JavaServer Faces using JDeveloper

The tutorial covers the following topics:

Before you begin this tutorial, you should:

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (1 of 49)2007/5/6 下午 07:27:31

If the Migrate User Settings dialog box opens, click NO.

Close the Tip of the Day window.

Building a JavaServer Faces project

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (2 of 49)2007/5/6 下午 07:27:35

4. Click Save All to save your work.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (3 of 49)2007/5/6 下午 07:27:35

Building a JavaServer Faces page

Creating the Welcome page

Creating the Welcome page

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (4 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (5 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (6 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (7 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (8 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (9 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (10 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (11 of 49)2007/5/6 下午 07:27:35

11. Click Save All to save your work.

Adding details to the Welcome page

1. Add a heading to your Welcome page.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (12 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (13 of 49)2007/5/6 下午 07:27:35

3. Next, drag a JSF commandButton component to the page.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (14 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (15 of 49)2007/5/6 下午 07:27:35

7. Scroll down the body of the page to see the tag:

<h:commandButton value="Proceed to Login" action="login"/>

8. Click Save All to save your work.

Designing the application page flow and the Login page

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (16 of 49)2007/5/6 下午 07:27:35

Creating the page flow and the Login page

Creating the Page flow and the Login page

The Visual Editor displays a screen that displays a help message.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (17 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (18 of 49)2007/5/6 下午 07:27:35

4. Create the login.jsp in the diagram directly.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (19 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (20 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (21 of 49)2007/5/6 下午 07:27:35

11. Click the Diagram tab to return to the visual editor.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (22 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (23 of 49)2007/5/6 下午 07:27:35

14. The new login page opens in the design editor.

15. Click Save All to save your work.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (24 of 49)2007/5/6 下午 07:27:35

Adding Details to the Login Page

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (25 of 49)2007/5/6 下午 07:27:35

3. Click Next to skip the Welcome page of the wizard.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (26 of 49)2007/5/6 下午 07:27:35

You should then see a rectangle on your page.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (27 of 49)2007/5/6 下午 07:27:35

For the Input Text, set the Required value to true.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (28 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (29 of 49)2007/5/6 下午 07:27:35

In the Property Inspector, specify 8 as maximum length and 4 as minimum.

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (30 of 49)2007/5/6 下午 07:27:35

file:///C|/Documents and Settings/sky.chan/桌面/jsfintro.htm (31 of 49)2007/5/6 下午 07:27:35