Introduction to JavaServer Faces using JDeveloper
Introduction to JavaServer Faces using JDeveloper
This tutorial takes you through the basics of building a client
application using JavaServer Faces (JSF).
Approximately 20 minutes
The tutorial covers the following topics:
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.
You will create three JSF pages. The first is a Welcome page
that will be 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 manage the persistence of these two values. The third page
returns a Hello message and displays the user name stored in the backing bean.
You will also create a JSF navigation link from the Welcome page to the Login
page and then to the Hello page.
Back to Topic List
Before you begin this tutorial, you should:
| 1. |
Have access to or have installed Oracle JDeveloper 10g
Release 3 (10.1.3) Production version. You can download it from Oracle
Technology Network.
|
| 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. |
Back to Topic List
This topic guides you through the steps to create a web application
that uses JavaServer Faces.
Creating a new application
and project for your JSF view
| 1. |
To create a new application, right-click the Applications node
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. The project is a logical grouping
of associated files; in this case, those representing your JSF-based
view.
|
| 4. |
Click the Save All icon  to
save your work.
|
Back to Topic List
This subtopic guides you through the basics of the JSF page creation.
Back to Topic List
Creating the Welcome JSP page.
| 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 pane,
and JSF JSP in the Items pane.
Click OK.
|
| 3. |
The Create JSF JSP Wizard - Welcome screen displays.
Click Next to continue.
|
| 4. |
In Step 1 of the wizard, choose the Servlet
2.4\JSP 2.0 (J2EE 1.4) option, and click Next
to continue.
|
| 5. |
In Step 2 name the page welcome.jsp and
choose the JSP Page type, then click Next.
Note that the Add Mobile Support allows you to create JSF pages
for mobile applications.
|
| 6. |
In Step 3, select the Do Not Automatically
Expose UI components in a Managed Bean option. Click Next.
|
| 7. |
In Step 4, 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. Click Next.
Note that selection of the libraries merely inserts
the necessary taglib directives for JSF in the page. JDeveloper also
comes with the additional ADF Faces set of JSF components. Users can
add other JSF components through the Manage Libraries option from the
Tools menu.
|
| 8. |
In Step 5, 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 Application 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
.
|
Back to Topic
Adding details to
the Welcome page
| 1. |
Add a heading to your Welcome page.
In the top of the page, enter some text: Welcome
to the JSF Intro Application.
Format the text to H2 by clicking the left-hand dropdown list at the
top of the Visual Editor, and choosing Heading 2.
|
| 2. |
Apply a CSS stylesheet to your page.
To do this, make sure the component palette is visible on the right
side. (If not, use View->Component Palette). Select
the CSS library in the Components
section in the top-right of your screen.
Now drag the JDeveloper stylesheet onto your new JSP.
You should see an immediate change in the appearance of your page.
|
| 3. |
Next, drag and drop a JSF commandButton component onto the page.
In the component palette, select the JSF HTML list
of components.Then drag and drop the Command Button item
onto 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 (View | Property
Inspector)
on the lower right, change the Value attribute of
the CommandButton
to Proceed to Login.
|
| 5. |
Change the Action attribute to login.
When clicked at runtime, this will allow users to proceed to another
page.
As you work in the Visual Editor, notice that JSF components are shown
with their runtime appearance. For example, as a button.
|
| 6. |
Click the Source tab at the bottom of the Visual
Editor to switch over 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. 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 (UIComponent). When the tag executes, it provides
a clickable button which can perform a task such as calling a Java method
or executing a Faces navigation.
In this example, you are going to make it perform a simple navigation
to a second 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 will define a navigation
rule to use that same value to navigate to the login page.
|
Back to Topic
Back to Topic List
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 an entire application's page flow in terms of its navigation rules.
Back to Topic List
Creating the Page
flow and the Login page
| 1. |
Locate the faces-config.xml
file in the Application Navigator (Web Content | WEB-INF folder).
Double-click the file to invoke the page flow editor.
The Visual Editor displays a blank screen.
|
| 2. |
Before continuing, notice there are four tabs for the editor at the bottom
of the screen: Diagram, Overview, Source and
History. The default view is the Diagram view
of the faces-config editor, which allows you to visually edit the navigation
rules of your faces-config.
Clicking on the Overview tab shows a console-type interface
that allows you to register any and all types of configurations into your
faces-config file, including managed beans, navigation rules and other
items such as custom validators or converters. (Note:
you can define navigation rules either visually or by using the overview
editor.) The Source tab allows 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. |
Introduce your initial welcome.jsp
page onto the diagram by dragging and dropping it from the Navigator.
|
| 4. |
Create the login.jsp
in the diagram directly.
To do this, drag and drop a JSF Page item from the Component
Palette onto the page flow diagram. Change its name to
/login.jsp.
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 palette, then clicking the welcome.jsp
icon. You should see a connection line start to appear.
Then click on the login.jsp
to complete the connection.
|
| 6. |
In the Property Inspector, change the default From
Outcome value, success, to login,
to match the value that you set for the Action attribute
of the commandButton on the welcome.jsp
page.
|
| 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 palette, then click the
login.jsp icon.
Click the hello.jsp
to complete the connection.
|
| 9. |
In the Property Inspector, change the default From
Outcome value, success, to hello.
|
| 10. |
Get a feel for the actual syntax of the navigation rule that you just
defined: click the Source tab of the faces-config.xml
file to see the new navigation rule specified.
Note that some of the <to-view-id> and
<from-view-id> tags
are reporting a warning since the login.jsp page and the hello.jsp page
don't exist yet.
|
| 11. |
Click the Diagram tab to return to the Visual Editor,
and create the login.jsp
page.
Do this by double-clicking on the login.jsp page icon
in the Visual Editor 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 Step 1, make sure the JSP Page
option is selected for the login.jsp file name, then
click Next.
|
| 13. |
In Step 2, 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, ensure that the Automatically Expose UI Components
in a New Managed Bean radio button is selected. Accept the
defaults for the Bean name, class and package.
Click Next.
|
| 14. |
Click Next in Step 3 after you've checked
the tag libraries that are enabled for this JSP page. In Step
4, leave the default values and click Finish.
|
| 15. |
The new login page opens in the design editor.
|
Back to Topic
Adding Details to
the Login Page
The purpose of the page is to allow users to pass on to a hello.jsp
page 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 access the jdeveloper.css from
the Application 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
will serve as a table structure to layout the login fields.
Note that an HTML table could also 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, and select Panel Grid from the Component
Palette.
|
| 3. |
As you drag the panel Grid onto the page, a wizard
appears. Click Next to skip the Welcome page. Specify
that you want to create an empty
panel grid with 3
columns.
Click Finish to add the component to the page. You
should then see a rectangle on your page.
|
| 4. |
Drop the following components from the Palette into the panelGrid in
the following order: Output label and Input
Text.
|
| 5. |
Using 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. |
Drop the Message component from the Palette into
the panelGrid. In the Message Properties dialog, select inputText1 from
the drop down list next to the For field. Click OK.
This message returns an error if no value is specified for the User Name
field.
|
| 7. |
Drop the following components from the Palette into the panelGrid in
the following order: Output label and Input Secret.
|
| 8. |
Using the Property Inspector, change the Output Label value attribute
to Password,
and set the Required value of the Input Secret field
to True.
|
| 9. |
Select the JSF Core library and, in the component palette,
drag and drop the Validate Length component in the Input
Secret field.
In the Property Inspector, specify 4 as minimum length
and 8 as maximum.
|
| 10. |
Drop the Message component from the Palette into
the panelGrid. In the Message Properties dialog, select inputSecret1 from
the drop down list next to the For field. Click OK.
This message returns errors if no value is specified or if the length
of the string for the password is lower than 4 or higher than 8 digits.
|
| 11. |
Drop a Command Button in the panelGrid. The page should now look like
this:
|
| 12. |
Change the Value attribute for the Command Button to Hello
Me. Then click within the value of the Action attribute
and using the down arrow icon, select the hello value
from the drop down list.
|
| 13. |
Click the Save All icon to
save your work.
|
Back to Topic
Back to Topic list
| 1. |
Create the third page hello.jsp.
This page illustrates how to use a backing bean to display information
coming from another page.
Double-click the hello.jsp icon in the diagram to create
it directly. The Create JSF JSP Wizard - Welcome screen
displays. Click Next to continue.
|
| 2. |
In Step 1 for the hello.jsp page,
choose the JSP Page type, then click Next.
|
| 3. |
In Step 2, select the Do Not Automatically
Expose UI components in a Managed Bean option. Click Next.
|
| 4. |
In Step 3, you see the tag libraries that are enabled
for this JSP page. Click Next. In Step 4, accept
all defaults. Click Finish.
|
| 5. |
You now see the skeleton of your JSF-enabled JSP (hello.jsp)
in the Visual Editor.
|
| 6. |
Add an H2 heading Hello to the
page, and again add the JDeveloper stylesheet.
|
| 7. |
Next to the Hello text, add a space and drag and drop an Output
Text component
from the JSF HTML library.
|
| 8. |
For the OutputText, delete the value for the Value
attribute in the Property Inspector, then click the Binding to Data icon
 .
|
| 9. |
In the Value dialog, expand JSF Managed Beans | backing_login
| inputText1,
the select value. Press the Right arrow button to shuttle the selection
in the Expression field. Click OK.
|
| 10. |
On a new line below the Hello line, add the new text " You've
successfully completed this Intro to JSF tutorial".
|
| 11. |
Click the Save All icon to
save your work. |
Back to Topic List
| 1. |
Right-click the /welcome.jsp
page in the page flow diagram and select Run from the
context menu.
|
| 2. |
The embedded OC4J server launches. Note the messages displayed in
the Log window.
|
| 3. |
The Welcome page displays in your default browser. Click the Proceed
to Login
button.
|
| 4. |
The Login page displays. Don't type any value,
but click the Hello Me button to test if the Required
field constraint violation returns errors.
The page display should look like this:
|
| 5. |
Test your login page specifying a value for the User Name field and
a single character for the password entry, then click the Proceed
to Login button.
The page display should now look like this:
|
| 6. |
Retest your login page 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 Login page then to Hello page
is successful!
|
Back to Topic List
In this section, you 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 Page
flow diagram.
|
| 2. |
Create a navigation rule by clicking the
JSF Navigation Case item in the palette, then clicking the
login.jsp icon.
Click the welcome.jsp
to complete the connection.
|
| 3. |
In the Property Inspector, change
the default From Outcome value, success, to failed.
|
| 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 pane, remove the hello value for the Action property
by setting it to default.
|
| 5. |
In the Structure pane, 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.
|
| 6. |
Accept defaults and click OK.
|
| 7. |
The Login.java class opens in the Source editor, showing the new statements
added for the commandButton.
|
| 8. |
Below the // Add event code comment, remove the return
null statement
and type ife
then use CTRL
+ Enter key combination to automatically generate the if
- else statements structure.
|
| 9. |
Since there are 2 possible target pages that you can reach from the
commanButton, you need to programmatically set the rule on which navigation
will be done to the Hello page or the Welcome page.
Change the if code
so that your statement is now:
if (inputSecret1.getValue().toString().equals("welcome"))
{
return "hello";
|
| 10. |
Change the else code so that your statement is now:
} else { String message
= "Invalid login";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
return "failed";
|
| 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. |
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
and drop a Messages component.
|
| 13. |
Open the page flow diagram, right-click the Welcome
page and select the Run option from the context menu.
|
| 14. |
Click the Proceed to Login button and test the Login
page by providing a wrong password value.
|
| 15. |
The Welcome page should now display like this.
|
| 16. |
You can play with your application and test it again. |
In this tutorial, you learned how to build a web interface
using JavaServer Faces.
You've learned how to:
 |
Build
JavaServer Faces pages |
|
Add navigation cases
between pages |
|
Use a backing bean to pass information from
one page to another |
|
Apply basic validation rules to data entry
fields |
|
Add code to determine a page to display |
Back to Topic List
Place the cursor over this icon to hide all screenshots.
|
Bookmark
