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

tell me more icon Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. While you are developing your application, it stores information about the objects you are working with. At the same time, it keeps track of your projects and all environment settings.  [ tell me more...]





  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 .

    tell me more icon 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...]




    tell me more icon 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

tell me more icon Creating JSF Page Navigation

To follow along with the example, enter values or select options as shown in the instructions throughout the cue cards. Then you will be able to follow the steps in the cue cards exactly as written.   [ tell me more...]





  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.

    tell me more icon 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 icon 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 icon 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 navigation case icon 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 navigation case icon 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 saveall icon Save All to save your work.

    tell me more icon 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

tell me more icon Creating JSF Pages

The JSF pages you create for your application using JavaServer Faces can be JSP pages (which have file extension .jsp) or JSP documents (which have file extension .jspx).   [ tell me more...]





  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.

    tell me more icon 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 webdiagram icon 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.

    tell me more icon 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

tell me more icon Designing the UI

To create the user interface, you add JSF UI components to your JSF page. In the example, you will use a combination of integrated tools (namely, the Component Palette, JSP/HTML visual editor, and Property Inspector) to design the user interface. When you make a change to a page in one of these tools, the change is reflected in the others as well.   [ tell me more...]





  1. In the editor window, select the jsf page icon 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.

    tell me more icon 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 icon Input Text to the visual editor, then drop it on the blank page to add an input text field.

    tell me more icon 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 icon 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 jsf page icon Success.jsp tab at the top to bring the page forward.
  6. In the Component Palette, drag and drop output text icon 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 jsf page icon 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 saveall icon Save All to save your work.

    tell me more icon 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

tell me more icon Modifying the Behavior Through Code

In addition to JSF navigation rules, other resources that your application needs are also specified in the JSF configuration file, faces-config.xml. The resources an application might need include files that contain the text to be displayed by the application pages, and JavaBeans that define the data for the application to work with.   [ tell me more...]





  1. In the editor window, select the jsf page icon 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 then choose Page Properties . In the Page Properties dialog, select the Component Binding tab, then select Auto Bind .

    tell me more icon 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.

    tell me more icon 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.
    code sample icon Use sample code

    tell me more icon 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 jsf page icon Login.jsp and choose R un to run the first page of your JSF application.

    tell me more icon 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.

false ,,,,,,,,,,,,,,,