Build a Simple JSF Application

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 a JSF Page: Use the Create JSF Page wizard to create a 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 other design tools to easily 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 page to see how it displays 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 JSFApplication.
  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 a JSF Page

tell me more icon Creating a JSF Page

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 Page dialog [ File > New > Web Tier > JSF > JSF Page] .
  2. Enter Start.jsp as the file name.
  3. Do not select Create as XML Document (*.jspx) .
  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...]

    tell me more icon In the IDE

    When you complete the steps for creating a JSF page, 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. If not already open, double-click JSF page icon Start.jsp in the Application Navigator to open the page in the visual editor.
  2. In the Component Palette, select JSF 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.
  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 Click here.

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

  5. In the Component Palette, select HTML from the dropdown list, then expand the Common panel. Drag and drop line break icon Line Break next to the command button on the page.
  6. In the Structure window, right-click br and choose Insert after br then choose JSF HTML . In the Insert JSF HTML Item dialog, select output text icon Output Text and click OK. This should add the output text field below the input text field.
  7. In the Property Inspector of the output text component, Common section, delete the default text in the Value field and press Enter, leaving the output text field blank on the page.
  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 Start.jsp page should have an input field in which a user can enter data, and a button to initiate an action. The output text field is no longer visible on the page because you have deleted the default output text value.   [ tell me more...]


Modify the Behavior Through Code

tell me more icon Modifying the Behavior Through Code

In the example, you will create a method and attach it to the command button component on the Start.jsp page. The method will capture the value entered by the user in the input text field, then display the value in the output text field below the input field.   [ tell me more...]

  1. Click the Design tab 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_start as the bean name, and StartInfo as the class name. Then enter project1.backing as the package name. Leave Scope as request. Make sure Generate Class If It Does Not Exist 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_start is shown in the Managed Bean dropdown list. You should also see commandButton1_action populated in the Me thod dropdown box. Click OK.
  5. If necessary, select the javanode icon tab at the top of the editor window to bring the source editor forward.
  6. In the source editor, enter code to retrieve the value entered in the input text field and display it in the output text field.
    code sample icon Use sample code
  7. In the Application Navigator, right-click JSF page icon Start.jsp, and choose R un .

    tell me more icon Running and Testing a JSF Page

    By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages.  [ tell me more...]

    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 ,,,,,,,,,,,,,,,