Bind a JSF Page to a Managed Bean

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 dialog to create a starter page structure with a JSP page directive, and two taglib directives for the JSF Core and HTML tag libraries.

Create a Java Class: Use the Create Java Class dialog to create a starter java class, and then use the source editor to add sample code to the .java source file.

Register the Class as a Managed Bean: Use the overview editor for faces-config.xml to register the new class as a managed bean.

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.

Bind the UI to the Managed Bean: Use the Expression Builder to bind an attribute value to data using JSF expression language.

Finish the Code and Run the JSF Page: Use the source editor to add additional sample code to the .java source file. Then 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 JSFBeanApp.
  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 Register.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, by default the Application Navigator should look something like this:  [ tell me more...]



 

Create a Java Class

tell me more icon Creating a Java Class

A new class can be created and added to your project after you build the initial set of JSF application files, to create a simple bean object.  [ tell me more...]





  1. In the Application Navigator, select the project you just created and open the Create Java Class dialog [ File > New > General > Simple Files > Java Class] .
  2. Enter the class name as PersonInfo. Accept the remaining defaults and click OK.
  3. In the source editor, edit the new file to add properties.
    code sample icon Use sample code
  4. Right-click the file in the editor and choose Ge nerate Accessors .
  5. In the Generate Accessors dialog, select the PersonInfo class. Make sure public is selected in the S cope dropdown list. Click OK.

    tell me more icon Editing a Java Class

    In the editor window, the tabs at the top of the editor window are the document tabs. Selecting a document tab gives that file focus, bringing it to the foreground of the window in the current editor. The tabs at the bottom of the editor window for a given file are the editor tabs.   [ tell me more...]



  6. Add code to the file to save the data that is entered and display a save message.
    code sample icon Use sample code
  7. Click saveall icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating a Java class, the Application Navigator should look like this:  [ tell me more...]



 

Register the Class as a Managed Bean

tell me more icon Registering the Class as a Managed Bean

Your application needs certain resources, such as files containing the messages and text to be displayed by the application pages, and beans defining the data for the application to work with.   [ tell me more...]





  1. In the Application Navigator, expand Web Content | WEB-INF and double-click webdiagram icon faces-config.xml to open it in the editor window.
  2. Select the Overview tab to use the overview editor to edit the configuration file.
  3. In the overview editor, select Managed Beans in the element list on the left.

    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. Click add icon Add to open the Create Managed Bean dialog.
  5. Enter personData as the bean name.
  6. Click Browse next to the Class Name field to open the class browser. Search for and select PersonInfo ( packagename) and click OK to close the class browser.
  7. In the Create Managed Bean dialog, accept the default package name. Leave Scope as request. Make sure Generate Class If It Does Not Exist is selected, then click OK.

    tell me more icon In the IDE

    When you complete the steps for registering the Java class as a managed bean, you should see the managed bean definition in the overview editor:   [ tell me more...]



 

Design the UI

tell me more icon Designing the UI

In the example, you will design the user interface by adding HTML and JSF UI components to your JSF page. You will use a combination of integrated tools (namely, the Component Palette, JSP/HTML visual editor, and Property Inspector) to design the page. 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 Register.jsp tab at the top to bring the page forward.
  2. In the visual editor, type the text Registration Form at the top of the page.

    tell me more icon Resource Bundle

    By default, JDeveloper does not automatically create text resources in the page's resource bundle when you edit UI components in the visual editor. If you wish to use a resource bundle, select the Automatically Synchronize Bundle option in the Project Properties dialog, Resource Bundle page. The default bundle type is Properties Bundle, which is a PropertyResourceBundle properties file or a plain-text file containing translatable text. A properties file can contain values only for String objects. If you need to store other types of objects, use a ListResourceBundle instead.  [ tell me more...]



  3. In the Component Palette, select the HTML page from the dropdown list and then expand the Common panel.
  4. Click and drag table icon Table to the visual editor, then drop it on the page to add a table.
  5. In the Insert Table dialog, set the number of rows to 3 and the number of columns to 2. Accept the other default values and click OK.

    tell me more icon Working with Tables in the Visual Editor

    Tables can be used to design page layout, as in this example, as well as to lay out data, and position text and graphics on a web page. The Insert Table dialog helps you to add the HTML <table> element and set up the initial properties in the skeleton table.  [ tell me more...]



  6. In the Component Palette, select the JSF page from the dropdown list and then expand the HTML panel.

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



  7. Drag and drop input text icon Input Text on the first row, second column of the table.

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



  8. Drag and drop another input text icon Input Text on the second row, second column.
  9. Drag and drop command button icon Command Button on the third row, second column. In the Property Inspector, Common section, click in the Value field and change the default text to Sign Me Up.
  10. In the visual editor, type text in the first column to create the input field labels. Starting in the first row, first column, click in the cell and type Username:. In the first column, second row, click in the cell and type Email:.

    tell me more icon In the IDE

    When you complete the steps for designing the user interface, the Application Navigator should look like this:  [ tell me more...]



 

Bind the UI to the Managed Bean

tell me more icon Binding the UI to a Managed Bean

In JSF, you send and display dynamic data by binding UI components or component tag attribute values to data in the model layer. This data can be held in any JavaBean within the application. However by registering the bean as a managed bean, at runtime the JSF application automatically instantiates the bean on demand, when the bean is accessed through an expression language (EL) expression from a page for the first time. Property values on the bean can then be displayed, and can also be updated when data from the page is submitted.   [ tell me more...]





  1. In the visual editor, select the first input text field. Then in the Property Inspector, Common section, choose Expression Builder from the property menu icon dropdown menu next to the Value field.
  2. In the Expression Builder, expand JSF Managed Beans, then expand personData. Select username to create an expression using the username variable. Then click OK.

    tell me more icon Binding Using JSF EL Expressions

    Introduced in Java EE 5.0 and JSP 2.1, the unified expression language (EL) is a union of the expression language offered by JSP 2.0 and the expression language created for JSF technology 1.0. The unified EL continues to let page authors use EL expressions to bind UI component values and objects to backing bean properties or reference backing bean methods from UI component tags.  [ tell me more...]



  3. Repeat the procedure on the second input text field, selecting the email variable in the Expression Builder this time.
  4. In the visual editor, double-click the command button to open the Bind Action Property dialog.
  5. In the Managed Bean dropdown list, select personData. Accept the other default values in the dialog and click OK.

    tell me more icon In the IDE

    When you bind the UI to the managed bean using the Expression Builder, JDeveloper adds EL expressions to the Input Text and Command Button components for you.   [ tell me more...]



 

Finish the Code and Run the JSF Page

tell me more icon Finishing the Code and Running the JSF Page

To finish this simple JSF application, you will add code in the Java source file, PersonInfo.java. The sample code calls the business method saveInfo that you added to the bean in an earlier cue card. The method takes two parameters and then, instead of saving the data, simply writes the data to the console.  [ tell me more...]





  1. If necessary, select the PersonInfo.java tab in the editor window to bring the source editor forward.
  2. Add code that calls the business method saveInfo that you previously added to the bean. The method takes two parameters and writes the data to the console.
    code sample icon Use sample code
  3. In the Application Navigator, right-click facespage icon Register.jsp and choose R un to run the JSF page.

    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 run the JSF page, the registration form in your browser should look similar to this:   [ tell me more...]



 



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

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