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

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 .
   

   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 a JSF Page

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.
   

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

   
   
   
   

   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

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

   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.
   Use sample code
7. Click Save All to save your work.
   

   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

1. In the Application Navigator, expand Web Content | WEB-INF and double-click 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.
   

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

   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

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.
   

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

   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.
   

   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 on the first row, second column of the table.
   

   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 on the second row, second column.
9. Drag and drop 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:.
    

    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

1. In the visual editor, select the first input text field. Then in the Property Inspector, Common section, choose Expression Builder from the 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.
   

   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.
   

   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

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.
   Use sample code
3. In the Application Navigator, right-click Register.jsp and choose R un to run the JSF page.
   

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

   
   
   
   

   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.