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 and Project: 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 dialog 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.

Modify the Behavior Through Code: Configure a managed bean and generate the Java class file for the backing bean. Use the Bind Action Property dialog to attach an action method to the command button and create the method in the backing bean. Add code to the action method. Then 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 Applica tion 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

   When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator should look like this:  [ 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 and drag JSF Page to the diagrammer, then drop it on the blank canvas to add an icon that represents your first application page. Accept the default file name for now.
4. Click and drag JSF Page again, then drop it on the diagram to add a second page icon.
5. Repeat the procedure in step 4 to add a 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 at the bottom of the editor window to switch back to the diagrammer.
2. On the JSF navigation diagram, click on the text untitled1.jsp to change the default name of the first page to Login.jsp.
3. Double-click the page icon of the page name you just edited to open the Create JSF Page dialog.
4. Under Initial Page Layout and Content, confirm that Blan k Page is selected.
5. Make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK.
   

   Component Binding

   When you create a JSF page using the dialog, 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, then select one of the automatic binding options.   [ tell me more...]

   
   
   
6. In the editor window, select the faces-config.xml tab at the top to bring the navigation diagram forward.
7. Repeat steps 2 through 5 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 page forward.
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 and drag Input Text to the visual editor, then drop it on the blank page 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. Click and drag Command Button to the page, then drop it next to the input field you just added. 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 forward.
6. In the Component Palette, drag and drop Output Text on the blank page in the visual editor. In the Property Inspector, Common section, click in the Value field and change the default text to You have successfully logged in, then press Enter.
7. In the editor window, select the Failure.jsp tab at the top to bring the page forward. 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 forward. Click Design at the bottom of the editor window to make sure the visual editor is in focus.
2. From the main menu, choose Desi gn Page Properties . In the Page Properties dialog, select the Component Binding tab, then select Auto Bind .
   

   Automatic Component Binding

   Automatic component binding for a page can be turned on at initial page creation time. In the Create JSF Page dialog, expand Page Implementation, then select the automatic binding option that uses a new managed bean or an existing managed bean. The option to bind to an existing managed bean is enabled only if the application has a managed bean already configured.  [ tell me more...]

   
   
   
3. Click N ew 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. Leave Scope as request. 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 Me thod dropdown box. Click OK.
5. In the source editor of LoginInfo.java, enter code to set navigation from the Login.jsp page to either the Success.jsp page or Failure.jsp page.
   Use sample code
   

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

   
   
   
6. In the Application Navigator, right-click Login.jsp and choose R un 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, 2009, Oracle. All rights reserved.