Create JSF Page Navigation

You can quickly create a project in which to organize your application files. Then work in JDeveloper's IDE to develop and test run your JSF application.

Create a New Application: Use the Create Application wizard to create a generic application.

Create JSF Page Navigation: Use the Create JSF Configuration File dialog to create the configuration file, and then plan out the navigation on the JSF navigation diagram.

Create JSF Pages: Use the Create JSF Page wizard to create the starter page structure with a JSP page directive, and two taglib directives for the JSF Core and HTML tag libraries.

Design the UI: Use the JSP/HTML visual editor and Component Palette to assemble the elements of a user interface (UI) for your JSF application.

Enable Automatic Component Binding: Use the Page Properties dialog to enable automatic component binding through a page backing bean. Then use the Create Managed Bean dialog to add a managed bean configuration and generate the Java class file for the backing bean.

Modify Behavior with Code: Use the Bind Action Property dialog to create a starter action method in the backing bean and attach the method to the command button. Then use the Java source editor to add code to the action method.

Run the Application: Test run the JSF application to see how the page navigation works in a browser.

Create a New Application and Project

1. Open the Create Application wizard [File > New > General > Applications] .
2. To follow along with the example, enter the application name as JSFNavigateApp.
3. Select Generic Application in the Application Template list, and click Finish.
   

   Application Templates

   Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project.   [tell me more...]

   
   

   In the IDE

   The Application Overview window opens by default in the editor window area when you create a new application. All objects that you create within JDeveloper appear in the Application Overview, arranged by object type. You can create new objects, read about new types of objects that you haven't yet created, and initiate actions from the objects' context menus.   [tell me more...]

Create JSF Page Navigation

1. In the Application Navigator, select the project you just created and open the Create JSF Configuration File dialog [File > New > Web Tier > JSF > JSF Page Flow & Configuration] .
2. In the Create JSF Configuration File dialog, accept the default file name faces-config.xml. Make sure Servlet 2.5JSP 2.1 (Java EE 1.5) is selected in the Web Application Version dropdown list. Click OK.
   

   JSF Navigation Diagrams, Rules and Cases

   By default, JDeveloper opens a new faces-config.xml file as a blank JSF navigation diagram, which you will use to define the navigation between the pages of your application.   [tell me more...]

3. In the Component Palette, JSF Diagram Objects page, Components panel, click JSF Page and then click on the diagram in the editor window to add an icon to represent your first application page.
4. In the Component Palette, click JSF Page again and then click on the diagram to add the second page icon.
5. Repeat the procedure in step 4 to add the third page icon.
6. In the Component Palette, click JSF Navigation Case. Then on the diagram, click the first page icon you created and then click the second page icon.
7. In the Component Palette, click JSF Navigation Case again. Then on the diagram, click the first page icon and then click the third page icon.
8. On the diagram, click on the case1 navigation case label between the first and third page icons and change the label to failure.
9. Click Save All to save your work.
   

   In the IDE

   When you complete the steps for creating JSF page navigation on a diagram, the JSF navigation diagram should look something like this:  [tell me more...]

Create JSF Pages

1. If necessary, click the Diagram tab in the editor window of faces-config.xml to switch back to the diagram mode.
2. On the JSF navigation diagram, click on the text untitled1.jsp to change the first default page name to Login.jsp.
3. Double-click the page icon of the page name you just edited to open the Create JSF Page dialog.
4. Expand Page Implementation and make sure Do Not Automatically Expose UI Components in a Managed Bean is selected. Click OK.
   

   Component Binding

   When you create a JSF page using the wizard, you can specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. By default components are not exposed to managed beans. If you wish to bind components to managed beans, expand the Page Implementation section in the Create JSF Page dialog.  [tell me more...]

5. In the editor window, select the faces-config.xml tab at the top to bring the navigation diagram to the front.
6. Repeat steps 2 through 4 on untitled2.jsp and untitled3.jsp to create the second page and then the third page, using Success.jsp and Failure.jsp, respectively, as the new page names.
   

   In the IDE

   When you complete the steps for creating the JSF pages, the Application Navigator should look something like this:  [tell me more...]

Design the UI

1. In the editor window, select the Login.jsp tab at the top to bring the visual editor page to the front.
2. In the Component Palette, select the JSF page from the dropdown list, then expand the HTML panel.
   

   Tag Libraries and Components

   The two JSF libraries that provide the JSF components were included in your page when you created it. They are:   [tell me more...]

3. Click Input Text and then drag it to the page in the visual editor to add an input text field.
   

   Standard JSF Component Tag Attributes

   While working with standard JSF components in JDeveloper, you can view and set component tag attributes in the Property Inspector. Most of the standard JSF component tag attributes accept value expressions, that is, #{expression} using JSF Expression Language (EL). For example, #{personData.username}.   [tell me more...]

4. In the Component Palette, click Command Button and then drag it to the page to add a button next to the input field. In the Property Inspector, Common section, click in the Value field and change the default text to Login.
5. In the editor window, select the Success.jsp tab at the top to bring the page to the front.
6. In the Component Palette, click Output Text and then drag it to the page. In the Property Inspector, Common section, click in the Value field and change the default text to You have successfully logged in.
7. In the editor window, select the Failure.jsp tab at the top to bring the page to the front. Repeat step 6, using the text Login has failed as the output text value.
8. Click Save All to save your work.
   

   In the IDE

   When you have completed the steps for designing the UI, the visual editor for the Login.jsp page should have an input field in which a user can enter text, and a command button to which you will add code to control the page navigation.   [tell me more...]

Modify the Behavior Through Code

1. In the editor window, select the Login.jsp tab to bring the page to the front.
2. From the main menu, choose Design Page Properties. In the Page Properties dialog, select the Component Binding tab, then select the Auto Bind checkbox.
   

   Automatic Component Binding

   Automatic component binding can be turned on for a page in one of these ways:  [tell me more...]

3. Click New next to the Managed Bean dropdown list. In the Create Managed Bean dialog, enter backing_login as the bean name, and LoginInfo as the class name. Then enter project1.backing as the package name. Make sure the Generate Class If It Does Not Exist checkbox is selected, then click OK. Click OK to close the Page Properties dialog.
   

   JSF Managed Beans

   While JSF allows you to bind a component in the user interface directly to any JavaBean, the best choice is to use JSF managed beans.   [tell me more...]

4. In the visual editor, double-click the command button to open the Bind Action Property dialog. In the dialog, ensure backing_login is shown in the Managed Bean dropdown list. You should also see commandButton1_action populated in the Method dropdown box. Click OK.
5. If necessary, select the LoginInfo.java tab at the top of the editor window to bring the Java source editor to the front.
6. In the Java source editor, enter code to set navigation from the Login.jsp page to either the Success.jsp page or Failure.jsp page.
   

   Outcomes for Navigation Cases

   A JSF configuration file can contain a number of navigation rules, and a number of navigation cases for each rule. In the example so far, the following navigation rule and navigation cases were automatically created for you in faces-config.xml when you created the JSF navigation diagram and added navigation cases in a previous cue card:  [tell me more...]

   
   Use sample code
7. Click Save All to save your work.
8. In the Application Navigator, right-click Login.jsp, and choose Run to run the first page of your JSF application.
   

   In the IDE

   When you complete the step, the Application Navigator should look similar to this:  [tell me more...]

Copyright © 1997, 2008, Oracle. All rights reserved.