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

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 configure a managed bean 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 Page: Test run the JSF page to see how it displays 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 JSFApplication.
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 a JSF Page

1. In the Application Navigator, select the project you just created and launch the Create JSF Page wizard [File > New > Web Tier > JSF > JSF Page] .
2. In the Create JSF Page dialog, enter Start.jsp as the file name.
3. 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...]

   
   

   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

1. If not already open, double-click 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.
   

   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.
4. Click Command Button, then drag and 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.
   

   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. Click Line Break, then drag and drop it next to the command button on the page.
6. In the Structure window, right-click br and choose Insert after br JSF HTML. In the Insert JSF HTML Item dialog, select 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, click in the Value field. Then delete the text outputText1, leaving the output text field blank on the page.
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 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

1. In the editor window, click the Start.jsp tab at the top to make sure the page is the current focus.
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_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 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_start 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 StartInfo.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 retrieve the value entered in the input text field and display it in the output text field.
   Use sample code
7. Click Save All to save your work.
8. In the Application Navigator, right-click Start.jsp, and choose Run.
   

   Running and Testing a JSF Page

   The JDeveloper IDE includes a Java EE runtime service for packaged archive deployment called Integrated WLS. Based on zero-copy deployment, Integrated WLS lets you run and test an application and its projects as a Java EE application in a Java EE container. Integrated WLS server instances can be bound to applications and then started, stopped, and debugged.   [tell me more...]

   
   

   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.