0) { obj.className = "imgborder_on"; } } } function hideImage(obj) { if (obj.className.substr(0, 10) == "imgborder_") { obj.src = eyeglass.src; obj.className = "imgborder_off"; } } function showAllImages() { imgs = document.images; for (i=0; i < imgs.length; i++) { showImage(imgs[i]); } } function hideAllImages() { imgs = document.images; for (i=0; i < imgs.length; i++) { hideImage(imgs[i]); } } //-->

Introduction to JavaServer Faces using JDeveloper

Purpose

This tutorial takes you through the basics of building a client application using JavaServer Faces (JSF).

Time to Complete:

Approximately 20 minutes

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

Viewing Screenshots

 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.

Back to Topic List

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.

 

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

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.

Back to Topic List

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

Back to Topic List

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 Nex t 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 .

 

11. Click Save All  to save your work.

Back to Topic

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.

 

8. Click Save All  to save your work.

Back to Topic

Back to Topic List

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

Back to Topic List

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.

 

15.

Click Save All  to save your work.

Back to Topic

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.

 

13.

Click Save All  to save your work.

Back to Topic

Back to Topic list

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 ".

 

10.

Click Save All  to save your work.

Back to Topic List

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!

Back to Topic List

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

Back to Topic List

 Place the cursor over this icon to hide all screenshots.

 

 

 

Left Curve
Popular Downloads
Right Curve
Untitled Document