Place the cursor over this icon to load and view all the screenshots for this tutorial.
(Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)
Note: Alternatively, you can place the cursor
over an individual icon in the following steps to load and view only the screenshot
associated with that step. You can hide an individual screenshot by clicking it.
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.
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.
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
.
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 ProceedtoLogin.
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.
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.
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 UserName.
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.
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".
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!
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";
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
Bookmark
to
save your work. 
in the Property Inspector toolbar.
to shuttle the selection to the Expression field. Click OK.
