Use a Bean Data Control

You can quickly create a project in which to organize your application files. Then work in JDeveloper's IDE to create a read-only databound table and test run your application.

Create a New Application and Project: Use the Create Application wizard to create a generic application.

Create a Simple JavaBean Class: Use the Create Java Class dialog to create a starter Java class to use in this application, and then paste the sample code in the .java source file.

Create a Service Class: Use the Create Java Class dialog again to create a service class, and then paste the sample code in the .java source file.

Create a Data Control for the Service Cass: Choose Create Data Control from the context menu to define a data control for your business service, the JavaBean you defined earlier.

Create a JSF Page: Use the Create JSF Page dialog to create a starter blank page.

Bind an ADF Faces Table Component to the Service Bean: Use the Data Controls panel to drag and drop a read-only table on your page. Then run the JSF page to see how the table displays in a browser.

Set the Labels: After creating the table, use the Property Inspector, UI Hints section, to add customized labels for each column.

Bind to a Parameterized Method and a Parameter: Use a series of drag-and-drop steps from the Data Controls panel to create a read-only table, input text field, and command button that are bound to a method that takes a parameter.

 

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 [ go to dialog or window icon] .
  2. To follow along with the example, enter the application name as DataBoundApp.
  3. Select Generic Application in the Applica tion Template list.

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



  4. Click Next .
  5. Enter Model as the project name. Then click Finish .

    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 Simple JavaBean Class

tell me more icon Creating a Simple JavaBean Class

To follow along with the example, in this step and throughout the cards, enter values as shown in the instructions. 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 Java Class dialog [ File > New > General > Simple Files > Java Class] .
  2. Enter Contact as the class name, and acme.bean as the package name. Accept the remaining default values and click OK.
  3. In the source editor, add code to create a simple JavaBean class.

    tell me more icon Editing a Java Class

    The new Java class includes only the class and package that you specified.   [ tell me more...]




    code sample icon Use sample code
  4. Right-click in the file and choose Ge nerate Accessors .
  5. In the Generate Accessors dialog, select Contact. Confirm that all member variables and methods are selected, and public is selected in the S cope dropdown list. Then click OK.
  6. In the source editor, add a constructor that instantiates a new object using values passed as arguments.
    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...]



 

Create a Service Class

tell me more icon Creating a Service Class

You will create and add a second Java class to your project. The new class will be a service class that represents the address book. It will return a collection of contacts. The steps are similar to the previous step, however, the second time you create a Java class in a project, the package name you specified earlier ( acme.bean) will display by default.   [ tell me more...]





  1. In the Application Navigator, select the Model project and open the Create Java Class dialog [ File > New > General > Simple Files > Java Class] .
  2. Enter AddressBook as the class name.
  3. Accept the package name as acme.bean, and the remaining default values, then click OK.
  4. In the source editor, add code to create a collection Java class.
    code sample icon Use sample code
  5. Click saveall icon Save All to save your work

    tell me more icon In the IDE

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



 

Create a Data Control for the Service Class

tell me more icon Creating a Data Control for the Service Class

Any JavaBean that publishes business objects and provides methods that manipulate business objects is defined as a business service. Examples of business services include web services, EJB session beans, or any Java class being used as an interface to some functionality.   [ tell me more...]





  1. In the Application Navigator, right-click AddressBook.java and choose Crea te Data Control .
  2. In the Application Navigator, expand the Data Controls panel.

    tell me more icon Data Controls

    Data controls define the data model returned by the business service. Several files are added to the Application Navigator when you create a data control:  [ tell me more...]




    tell me more icon In the IDE

    When you complete the steps for creating a data control, the Application Navigator should look like this when the Data Controls panel is expanded:   [ tell me more...]



 

Create a JSF Page

tell me more icon Creating a JSF Page

The JSF pages you create for your application using ADF Faces can be JSP pages (which have the file extension .jsp) or JSP documents written in XML syntax (which have the file extension .jspx). You will create a JSF page as an XML document in the example.   [ tell me more...]





  1. Launch the Create Generic Project wizard [ File > New > General > Projects > Generic Project]  to create a new generic project for your application.
  2. Enter View as the project name.
  3. Under Project Technologies, select ADF Faces from the Available list and shuttle icon shuttle it to the Selected list. Then click Finish .
  4. In the Application Navigator, select the project you just created and open the Create JSF Page dialog [ File > New > Web Tier > JSF > JSF Page] .
  5. Enter the file name ContactList.jspx and confirm that Create as XML Document (*.jspx) is selected.
  6. Under Initial Page Layout and Content, confirm that Blan k Page is selected.
  7. 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...]



  8. In the Component Palette, ADF Faces page, Layout panel, drag borderlayout icon Panel Stretch Layout and drop it on the blank page in the visual editor.
  9. Click saveall icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating a JSF page, the visual editor should look similar to this:  [ tell me more...]



 

Bind an ADF Faces Table Component to the Service Bean

tell me more icon Binding an ADF Faces Table Component to the Service Bean

You use the Data Controls panel to insert databound components into your page in the visual editor. When you insert a component from the Data Controls panel, a new Oracle ADF binding will be defined in the page's UI model and the inserted component will contain references to Oracle ADF bindings, using EL (expression language) syntax.   [ tell me more...]





  1. In the Data Controls panel, expand data control palette icon AddressBook, then expand find by contact icon findAllContacts() , and select contact icon Contact.
  2. Drag contact icon Contact to the center facet on the page in the visual editor.
  3. From the context menu, choose Table then choose ADF Read- only Table .
  4. In the Edit Table Columns dialog, select S orting . Accept the remaining default values and click OK.

    tell me more icon Additional Files that Support ADF Faces Table

    Since this is the first databound page in the project, the file DataBindings.cpx is added to the View project; and because this is the first databound component on the page, ContactListPageDef.xml is created. Both files are located in the Application Sources folder in the View project.   [ tell me more...]



  5. In the Application Navigator, right-click ContactList.jspx 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 steps for adding a databound table to the JSF page, the visual editor should look similar to this:   [ tell me more...]



 

Set the Labels

tell me more icon Setting the Labels

Oracle ADF control hints provides a centralized mechanism for any JavaBeans-based business service data item to be rendered in a consistent manner across all client types. This mechanism, known as control hints, permits application developers to centralize certain UI settings across clients and thereby control many aspects of the way the UI interacts with the data item. Because the control hints are set at the level of the business service, it can also reduce the amount of UI coding.   [ tell me more...]





  1. In the Application Navigator, Model project, select Contact.xml (the definition file that contains the JavaBean attributes you want to modify).
  2. In the Structure window, select the attribute name under Contact.
  3. In the Property Inspector, UI Hints section, enter Contact Name in the Label field and press Enter.

    tell me more icon Generated Resource Bundles

    The file that defines the value for the control hints you set depends on the specific business service used for the project. In the case of beans-based business services, (including JavaBeans, Enterprise JavaBeans, and Oracle TopLink), by default JDeveloper generates a standard .properties file for the project and saves the control hint definitions as translatable strings.   [ tell me more...]



  4. In the Application Navigator, select Contact.xml again.
  5. In the Structure window, select email. In the Property Inspector, enter Email Address in the Label field.

    tell me more icon Control Hints

    You can also use the Edit Attribute dialog to add ADF control hints. To open the Edit Attribute dialog, first you double-click the .xml definition file (for example, Contact.xml) in the Application Navigator to open the file in the default overview editor.  [ tell me more...]



  6. In the Application Navigator, right-click ContactList.jspx and choose R un .

    tell me more icon In the IDE

    When you run the JSF page again, it should look similar to this table in the browser, with the new labels you added displayed in the column headers:   [ tell me more...]



 

Bind to a Parameterized Method and a Parameter

tell me more icon Binding to a Parameterized Method and a Parameter

In addition to inserting complete tables, you can use the Data Controls panel to insert individual databound components such as input text fields and command buttons into your JSF page.   [ tell me more...]





  1. In the Application Navigator, select the View project and open the Create JSF Page dialog [ File > New > Web Tier > JSF > JSF Page] . Enter the file name ContactLookup.jspx and confirm that Create as XML Document (*.jspx) is selected.
  2. Under Initial Page Layout and Content, confirm that Blan k Page is selected. Then make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK.
  3. In the Component Palette, ADF Faces page, Layout panel, drag Decorative Box and drop it on the blank page in the visual editor.
  4. In the Data Controls panel, expand data control palette icon AddressBook, then expand find by contact icon findContactsByName(String) .
  5. Drag contact icon Contact to the center facet on the page in the visual editor. From the context menu, choose Table then choose ADF Read- only Table . In the Edit Table Columns dialog, select S orting . Accept the remaining default values and click OK.
  6. In the Edit Action Binding dialog, accept the default values and click OK.

    tell me more icon Action Binding

    When you drag and drop a parameterized method from the Data Controls panel, the Edit Action Binding dialog displays for you to set parameter values, if you so desire. The rest of the fields in the dialog are set for you declaratively.  [ tell me more...]



  7. In the Component Palette, Layout panel, drag and drop flowlayout icon Panel Group Layout into the top facet on the page. In the Property Inspector, Common section, change the Layout value to scroll.
  8. In the Component Palette, drag another flowlayout icon Panel Group Layout and drop it into the panel group layout component you just added. In the Property Inspector, change the Layout value to horizontal.
  9. In the Data Controls panel, under find by contact icon findContactsByName(String), expand Parameters. Drag name icon name and drop it into the panel group layout component (horizontal) you just added. From the context menu, choose Text then choose ADF Input Text w/ Label .
  10. In the Property Inspector, Common section, delete the default Label value and replace with Enter part of name: followed by two spaces.
  11. In the Data Controls panel, drag find by contact icon findContactsByName(String) and drop it into af:panelGroupLayout - horizontal in the Structure window. From the context menu, choose Method then choose ADF Button .
  12. In the Property Inspector, delete the default Text value and replace with Find.
  13. In the Structure window, select af:panelGroupLayout - scroll. In the Property Inspector, Style and Theme section, enter padding:5.0px in the InlineStyle field.
  14. In the Application Navigator, right-click ContactLookup.jspx and choose R un .

    tell me more icon In the IDE

    When you complete the steps for binding to a parameterized method and parameter, the ContactLookup.jspx page in the visual editor should look similar to this:   [ tell me more...]



 

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