This practice shows you how to build pages based on different types of data controls, using different types of bindings. It helps you understand where and how bindings are defined, and how they can be accessed programmatically.
show more or lessRead more...

In this practice, you’ll build two implementations of a data model, and build an ADF Faces page bound to these different data controls. You’ll pass values from one binding to another in order to understand bindings and they’re definitions. You’ll access bindings declaratively using expression language, as well as programmatically in code. Finally, you’ll gain experience debugging the most common snags when using ADF bindings.

Before starting this tutorial you should:

  1. Have access to or have installed Oracle JDeveloper 11.1.2.0.0. You can download it from Oracle Technology Network. Install it into a directory of your choice, which, in this tutorial is referred to as JDEVELOPER_HOME.

  2. Ensure you have a database installed and have the HR schema installed and the hr user unlocked.

Purpose Duration Application
This tutorial shows you how to work with data controls. You see how you can build a page that uses data controls that are binding ADF business components or EJB components. You see that the steps for using both types of data controls in a page are exactly the same providing independency between the UI and the Model level. To see the complete application you will create, right-click the Download button to download a zip of the finished application, and unzip it to your JDeveloper mywork folder. 45 minutes labs/hrapplication.zip
Step 1: Launch JDeveloper
  1. Start JDeveloper by selecting Start > Programs > Oracle Fusion Middleware 11.1.2.0.0 > JDeveloper Studio 11.1.2.0.0

    Programs menu for calling JDeveloper

    If a dialog box opens asking if you would like to import preferences from a previous JDeveloper installation, click NO.

  2. In the Select Role dialog, choose Studio Developer and click OK.

    Role selection
    Shaping, which is based on the role of the user, allows the JDeveloper environment to tailor itself. Show more or lessRead more...

    It does this by removing unneeded items from the menus, preferences, new gallery, and even individual fields on dialogs.

    Shaping can even control the default values for fields on dialogs within the tool.

    When you first start JDeveloper, you are prompted to choose a role that describes how you are going to use JDeveloper. If you choose a role of "Java Developer" versus "Database Developer " versus "Customization Developer " you will get a totally different experience!
  3. Close the Tip of the Day window. Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the Start Page displays. You can re-invoke the Start Page later by choosing Help > Start Page.

    Notice the various options available to help you learn about JDeveloper. After exploring some of these options, close the Start Page by clicking the X on its tab (the X appears when you mouse over the tab).

    Start page
Step 2: Create Your First Application and Build the Business Components
  1. Click the New Application link.

    Application Navigator with cursor on New Application menu option
    Create a new workspace named HRApplication. Base the workspace on the Fusion Web Application Template, and name the Model project ADFModel.Show more or less Read more...

    Select General | Applications category and choose Fusion Web Application.


    New Gallery selecting the Fusion Web Application option

    Click OK.

    Type HRApplication as the application name.

    Changing the name of the Application

    Click Next.

    Type ADFModel as the project name.

    Changing the name of the project

    Click Next and then Finish to accept default values.
  2. You want to create the business components for Departments and Employees. Right-click the ADFModel project and select New from context.

    Calling the New Gallery from the New option
  3. In the Business Tier | ADF Business Components, select Business Components from Tables to create new Business Components using the wizard.

    The New Gallery to create Business Components from tables

    Click OK.

  4. Click the Add Add icon icon to create a new database connection pointing to your hr schema.

    The Initialize Business Components Projects dialog
    Type HRConn as the connection name and provide the database connection characteristics for the hr schema. Show more or lessRead more...

    Enter hr as username and password and specify the name of the database you are accessing. Click the Test Connection button to validate your connection.


    Defining the database connection

    Click OK.

  5. Back in the Create Business Components from Tables wizard, click the Query button to retrieve the database objects.

    Business Components from Tables wizard clicking the Query button
  6. Specify a package named adfmodel.entities for the entity objects and create entities for Departments and Employees.

    Shuttling the Departments and Employees as entity objects

    Click Next.

  7. In the Entity-based View Objects step, type adfmodel.queries as the package name and shuttle both objects in the Selected pane.

    Entity-based View Objects step
  8. Click Next. Click Next again, we don’t need to create any read-only view objects.

  9. Specify a package named adfmodel.service for the Application Module. Name the module AppModule.

    Application Module step

    Click Finish to create the business components.

  10. Double-click AppModule to open it in the editor. Click the Data Model tab.

    Opening the AppModule from the Navigator and selecting the Data Model tab
  11. Notice that there are several view object instances created with default names.

    The Data Model of the AppModule
    In the HR schema, the Employees table has a self-referencing key for the Manager_Id, as well as a reference for the Manager’s department. Show more or less Read more...

    The Departments table has a master-detail relation to the Employees table for the Department_Id. The wizard picks up these relationships from the DDL of the tables and creates associations and links accordingly.

    Additionally, by default, a view object instance is added to the data model for each view object and each relationship.

    In a real application, you would rarely need every configuration of view object instances, and you’d want to rename the instances to logical names, as these are the names that will appear in the data controls palette.

  12. Select the DepartmentsView1 node and pressing the Edit button, rename the view Departments.

    Rename DepartmentsView1 to Departments
  13. Proceed the same way to rename the following objects:

    - EmployeesView3 -> EmployeesbyDepartment

    - EmployeesView1 -> Employees

    Then remove the following objects: DepartmentsView2 and EmployeesView2

    The new data model after renaming and removing components
  14. Expand the Data Controls pane and click the Refresh button.

    Refreshing the Data Controls pane
  15. In the Data Controls accordion, expand the nodes to view the controls’ naming and structure.

    Expanding the AppModuleDataControl

    Notice the built-in operations to Create, Delete, Execute, and navigate among the result set, as well as the Commit and Rollback operations at the application module level. Show more or less Read more...

    The application module is the transactional unit (task flows aside), so real-world applications frequently contain multiple application modules to delineate functional as well as transactional use cases.

    For example, it is common to include read-only view object instances for lookup functionality within a separate application module that can be pooled differently from the main application’s module.


Step 3: Build a JPA Data Control

You want to add a new project and create EJB based databindings for the Departments and Employees entities.

  1. In HRApplication, create a new EJB project named JPAModel that uses Enterprise Java Beans 3.0 and annotations.

    App Navigator with the context menu for the project displayed and the New Project option selected
    Give me more details about the steps. Show more or lessRead more...

    In the General | Projects, select EJB Project and click OK.

    The New Gallery with EJB Project option selected

    Name the project JPAModel, and click Next twice.

    Naming the project

    Make sure Enterprise JavaBeans 3.0 and Using Annotations are selected.

    Configure EJB settings step

    Click Finish.
  2. To create the EJB for Departments and Employees, right-click the JPAModel node and select New from context.

    Chosing the New option from the context menu
  3. Use the wizard to create JPA/EJB 3.0 Entities from Tables based on Departments and Employees.

    New Gallery with Entities from tables selected.
  4. Use the proposed persistence unit (JPAModel) and click Next. Choose the Online Database Connection and click Next.

    the Online Database Connection option selected

    Click Next to accept the HRConn connection that you previously created.

  5. Click Query and create Entities based on Departments and Employees.

    Departments and Employees shuttled to the Selected pane

    Click Next.

  6. Accept the default package and class options.

    Changing the Package name

    Click Next then Finish to create the JPA entities.

  7. In the jpamodel package, use the wizard to create a session bean. Right-click the jpamodel and select New to call the New Gallery.

    Calling the New Gallery from the jpamodel selection

    Choose the Session Bean option. Show more or lessRead more...

    Expand the Business Tier | EJB to select Session Bean and click OK.

    Chosing the Session Bean option from the New Gallery

    Click OK.
  8. Name HRFacade the stateless, container-managed session bean and generate session facade methods for JPA Entities.

    Naming the Session Facade

    Click Next then Finish.

    Accept default names and generate all the provided entity methods. Show more or lessRead more...

    Accept the default bean class name and source directory.

    Bean Class name and Source Directory option

    Click Next.

    Implement both the Remote and Local interfaces.

    Naming the Remote and local Interfaces

    Click Finish to create the session facade.

  9. Right-click HRFacadeBean.java and choose Create Data Control.

    Creating Data Control from the context menu
  10. Choose the Local interface as you will be creating a web client.

    Selecting the Local interface creation option

    Click OK.

  11. In the Data Controls accordion, expand the HRFacadeLocal node to view the controls for the JPA-backed session bean.

    The Data Controls pane
    The controls in the Constructors node can be used to create new rows in the entities (though most developers will create their own methods for creating rows). Show more or less Read more...

    The FindAll collections (departmentsFindAll and employeesFindAll) correspond to the built-in FindAll named queries that are created for each entity (and the corresponding method in the session facade).

    The merge, persist, and remove methods are used to update, create, and delete entity rows, respectively..

  12. Click the Save All Save All icon icon to save your work.

Step 4: Build a data-bound UI
In this section, you create a simple UI that uses bindings.
  1. Right-click in the ViewController project and select New from context.

    Calling the New Gallery from the Application Navigator
    Create a JSF page, name it ViewDeptEmp.jspx and base it on the Oracle Three Column layout.Show more or lessRead more...

    In the New Gallery, select JSF/Facelets and choose Page as the Item.

    Selecting the Page option from the New Gallery

    Type ViewDeptEmp.jspx as the name of the page and select the Oracle Three Column Layout.

    The Create JSF Page dialog using the Oracle Three Column Layout template

    Click OK. Your page should look like the following:

    The JSF Page in the editor
  2. Insert a ADF Faces | panelTabbed onto the Facet center.

    Dropping the Panel Tabbed component onto the Facet Center

    Have two showDetailItem’s labeled ADFModel and JPAModel.Show more or lessRead more...

    Right-click the showDetailItem1 tab and select Insert Inside Panel Tabbed | Show Detail Item.

    Adding a Show Detail Item

    In the Property pane, change the Text field for the Show Detail Item to ADFModel for the first tab and JPAModel for the second one.

    The Property pane for the Show Detail Item component
  3. From the AppModuleDataControl, drag the EmployeesbyDepartment collection onto the ADFModel tab in the visual editor.

    Dropping the EmployeesbyDepartments data control onto the Facet Center
  4. From the Master-Detail menu select ADF Master Form, Detail Table.

    Selecting Master-Detail --> ADF Master Form, Detail Table
  5. The page should look like the following:

    Page rendering in the visual editor
  6. Click the JPAModel tab in the display editor.

    Selecting the JPAModel tab in the visual editor
  7. From the HRFacadeLocal data control, drag the departmentsFindAll | employeesList1 collection onto the JPAModel tab in the visual editor.

    Dropping the employeesList1 data control onto the page
  8. From the Master-Detail menu, choose ADF Master Form, Detail Table.

    Selecting Master-Detail --> ADF Master Form, Detail Table

    Notice that the same gestures are used to create the components, regardless of the underlying implementation (JPA or business components).

  9. Your page should look like the following:

    The page rendering
  10. Open the Bindings tab of the ViewDeptEmp.jspx. Notice that 5 executables are created, one for each implementation’s version of departments and employees, and one to access the session facade (the iterators for the EJB-based departments and employees finder methods are actually accessor iterators that depend upon the session facade iterator). The variables node is the sixth one and is always created.

    Page Data Binding Definition
    Click on the various bindings to understand how they are related to the executables. Show more or lessRead more...

    Notice that there are attribute bindings for the form elements (Departments) and tree bindings for the table elements (Employees). You can select a bindings and see how it relates to Data Control through which Executable.

    Page Data Binding Definition

    Notice that the Structure pane displays a similar information in a different way with the executables components.

    Page definition in the Structure pane

    And also with the bindings components.

    Page definition in the Structure pane

  11. Click the Save All Save All icon icon to save your work. Right-click the page and choose Run to test the functionality.

    Running the page from the Application Navigator
  12. If prompted for, enter a password and confirm it for web logic administrator id.

    WebLogic Create Default Domain dialog
  13. Click the Next button to browse through department numbers and display the related employees.

    Clicking the Next button on the page displayed in your browser
  14. Click the JPAModel tab. This will display the same info using session facade this time.

    Clicking the JPAModel tab in the page displayed in your browser
  15. Click the Next button to browse through department numbers and display the related employees.

    Clicking the Next button on the page displayed in your browser

Step 5: Create a UI that integrates multiple bindings

In this step, you’ll add functionality to enable the department id to be selected from the ADFbc-backed data control and pass the department id to a method on the session bean to return employees for that department.

  1. In the JPAModel project, paste the following code to create a new named query in the Employees entity,
    within the NamedQueries annotation:

    Double-click the Employees.java node to open it in the editor. Show more or lessRead more...


    Employees.java in the Application Navigator

    Expand the @Entity statement and add a NamedQuery so that the code looks like the following:

    Adding the NamedQuery syntax in the java code

    Watch the syntax including a comma to separate the two named queries.

  2. Click the Save All Save All icon icon to save your work, and Make to compile the class to verify that no errors are reported.

  3. Right-click HRFacadeBean and choose Edit Session Facade... to bring up the options dialog.

    Selecting the Edit Session Facade option from context
  4. Expose the getEmployeesFindByDept method in the facade

    Selecting the new method in the facade dialog

    Click OK.

  5. Click Make to compile your project and validate it.

    Selecting the Make option to recompile the project
  6. Recreate the data control for the local interface of the HRFacadeBean.

    Select the Create Data Control option from context
    Select the Local interface. Show more or lessRead more...

    Choose EJB Interface dialog with Local option

    Click OK.

    The new Data Control appears in the Data Controls pane.

    Data Controls pane
  7. In the ViewController project, right-click and select New.

    Select the New option for the New Gallery
    Create a JSF page. Name the page ViewDeptEmp1.jspx and base it on the Oracle Three Column layout. Show more or lessRead more...

    Select the Page option in the new gallery

    Name the page ViewDeptEmp1.jspx and base it on the Oracle Three Column layout.

    Naming the page and choosing the Three Columns template


    Click OK.
  8. Insert a panelTabbed with two showDetailItems labeled ADFModel and JPAModel. From the ADF Faces | Layout, drag and drop a Panel Tabbed onto the Facet center.

    Dropping a Penel Tabbed onto the Facet Center
    In the Property pane for the Show Detail Item, type ADFModel in the Text field. Show more or lessRead more...

    Property pane for the Show Detail Item

    Right-click the ADFModel tab and select Insert After Show Detail Item --> Show Detail Item.

    Insert a Show Detail Item

    Type JPAModel in the Text field.

    Naming the tab JPAModel from the property pane

  9. From the AppModuleDataControl, drag Departments onto the ADFModel tab.

    Drag Departments onto the ADFModel tab
    Create an ADF Read-only table with Single row selection enabled.Show more or lessRead more...


     Select Table -->  ADF Read-only table

    In the Edit Table Columns, select Single row


  10. Since the tabs only have one child component (table), set the StretchChildren property for each of the showDetailItem components to first.

    The Property pane
  11. From the HRFacadeLocal data control, drag the return (Employees) of the getEmployeesFindByDept method onto the JPAModel tab as an ADF Read-only table.

    Draging the return (Employees) of the getEmployeesFindByDept method onto the JPAModel tab as an ADF Read-only table
    Remove the duplicated employee attributes from the table bindings. Show more or lessRead more...


    Deleting unwanted columns

    The dialog should look like the following:

    Edit Table Columns dialog


    Click OK.
  12. An Edit Action Binding dialog pops up. In the Action binding dialog, you are prompted to enter the value for the department Id argument of the getEmployeesFindByDept method. You will enter expression language for this value in the next step, but it’s always a good idea to test with a static value first. Enter 40 as the value and click OK.

    Edit Action Binding dialog
  13. Run the page to view the functionality.

    Context menu for the page, with Run menu option selected.
  14. The ADFModel tab displays all departments. By defaul department 10 should be selected. Click the JPAModel tab to check what the JPA displays.

    The page displayed in the browser
  15. You should see a table for employee(s) with department id = 40.

    The JPAModel showing the employee(s) for department 40
  16. Close your browser window.

    Now that you know that it works with a predefined department value, you can use EL to implement the functionality where the department id value is passed to the JPAModel from the selection you do when you select a department in the ADFModel pane.

Step 6: Access binding values with EL

There are many ways to access binding values with EL. The easiest way to ensure you are working with the correct binding value is to create a new attribute value binding and access that binding’s value.

  1. Open ViewDeptEmp1 and click the Bindings tab.

    Clicking the Bindings tab for the ViewDeptEmp1 page
  2. Click the Add Add icon icon and create a new attributeValues binding.

    Adding an attributeValues as control binding

    Click OK.

  3. Bind the attribute to the AppModuleDataControl.Departments data source and the DepartmentId attribute.

    Binding the attribute to the AppModuleDataControl.Departments data source and the DepartmentId attribute

    Click OK.

  4. You can trace the bindings of the new attribute.

    Looking at the bindings
  5. Select the getEmployeesFindByDept binding and click the pencil Pencil icon icon to edit.

     Clicking the Edit icon
  6. Click the down-arrow to use the expression builder.

    The Edit Action Binding dialog and selecting the expression builder option
  7. Set the value to #{bindings.DepartmentId.inputValue}.

    Entering a binding variable

    Click OK. Back in the Edit Action Binding dialog, click OK.

  8. Right-click within the page and select Run from context.

    Selecting the Run option for the page
  9. To confirm that the application works correctly, in the ADFModel table, select a row (40 for instance) then click the JPAModel tab.

    Selecting a department in the page beeing displayed in your browser
  10. The JPAModel displays the employee(s) related to the selected departmentId.

    Clicking the JPAModel tab and see the employees related to the departement selected
  11. Now that you can confirm that it's working correctly, click the ADFModel tab and test with other department numbers. Click the JPAModel tab to check.

    Select another row in the Departments table. Show more or lessRead more...

    Selecting a new department

    Click the JPAModel tab to display the employees.

    Looking at the corresponding list of employees

  12. Close your browser window.

Step 7: Access bindings with EL

In this section, you use EL to access binding components and display the selected department id and the number of corresponding employees for that department.

  1. Open ViewDeptEmp1.jsf and then open the ADFModel tab in the visual editor. In the Structure window, right click af:table and select Surround With… to surround the table with a panelCollection.

    The Binding field cleared out
    The Binding field cleared out
  2. In the panelCollection statusbar facet, insert a toolbar.

    The Binding field cleared out
  3. Add an outputText item within the toolbar.

    The Binding field cleared out
  4. Click the down arrow in the Partial Triggers property and select Edit.

    The Binding field cleared out
  5. Shuttle the table from the first tab (t1) to the selected area and click OK to add a partial trigger for the table component.

    Selecting the table t1 in the Edit Property dialog

    Click OK.

  6. In the property inspector, click the down arrow in the Binding property and click
    Edit….

    Create a new managed bean named ViewDeptEmp1 and the class name ViewDeptEmp1.

    The Binding field cleared out

    Then add Property named outputText1.

    The Binding field cleared out

  7. In the ViewDeptEmp1.java bean, create a method to access the binding container.

    public BindingContainer getBindings() {
    return
    BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    Then import oracle.adf.model.BindingContext and
    oracle.binding.BindingContainer

    The Binding field cleared out

  8. In the setOutputText1 method, add code to access the getEmployeesFindByDeptIterator from the binding container and retrieve the estimatedRowCount. Set the outputText1 value to include the text “Number of Rows” and the estimatedRowCount for the iterator. Then let JDeveloper import the appropiate packages.

    public void setOutputText1(RichActiveOutputText outputText1) {
    oracle.binding.BindingContainer bindings = getBindings();
    DCBindingContainer bindingsImpl = (DCBindingContainer) bindings;
    DCIteratorBinding dciter = bindingsImpl.findIteratorBinding("getEmployeesFindByDeptIterator" );
    outputText1.setValue("Number of Rows: " + dciter.getEstimatedRowCount());
    }

    The Binding field cleared out
  9. Add accessor code below for a RowCount.

    public void setRowCount(String rowCount) {
    this.rowCount = rowCount;
    }

    public String getRowCount() {
    BindingContainer bindings = getBindings();
    DCBindingContainer bindingsImpl = (DCBindingContainer) bindings;
    DCIteratorBinding dciter = bindingsImpl.findIteratorBinding("getEmployeesFindByDeptIterator" );
    return ("Number of Rows: " + dciter.getEstimatedRowCount());
    }

    The Binding field cleared out

  10. Back in the ViewDeptEmp1.jspx page, navigate to the outputTest and in the Property pane, clear out the Value field. Then click the down arrow and select Expression Builder from the list.

    The Binding field cleared out
  11. In the Expression Builder, select ADF Managed Beans | ViewDeptEmp1 | rowCount and click OK.

    The Expression Builder dialog
  12. In the panelCollection | toolbar facet, insert a toolbar.

    Selecting the Toolbar option
  13. Right-click the toolbar component and select Insert Inside | ADF Faces.

    Selecting the ADF Faces option
  14. Add a message within the toolbar.

    Selecting Message in the Insert ADF Faces Item dialog

    Click OK.

  15. In the Message field of message component, click the down-arrow and select Expression Builder from the list.

    Selecting Expression Builder option for the Message field
  16. Use the expression editor to set the message property to the text Selected and the EL to #{bindings.DepartmentId.inputValue}.

    Combining a literal and a binding value in the Expression Builder dialog

    Click OK.

  17. Click the Save All Save All icon icon to save your work, and Run the ViewDeptEmp1 page to test the functionality. Notice the value of the selected department being displayed.

    Displaying the page in the browser with the indication of the department id selected
  18. Select another row in the table. Notice the changes in the department number and in the row count value.

    Source editor showing declaration of IntAnimal
Step 8: Access operation bindings

The easiest way to add a button that calls an operation is to drag and drop it from the data control palette. In some cases, however, you will need to access an operation binding programmatically.

  1. In the panelCollection | facet:menus, insert a Menu.

    Adding a new Menu to the menu facet
  2. Change the text to Jump.

    Typing Jump as the Text for the menu
  3. From the AppModuleDataControl, drag the Next operation from the Departments | operations onto the menu.

    Dropping the Next operation from the Data Controls pane onto the Jump menu in the structure pane
  4. Create an ADF Menu Item.

    Selecting ADF Menu Item
  5. Repeat the drag and drop step for the Previous operation.

    Dropping the Previous operation from the Data Controls pane onto the Jump menu in the structure pane
  6. Select an ADF Menu Item.

    Selecting ADF Menu Item
  7. In the Bindings tab, note the two action bindings that were created.

    The bindings tab of the page showing both operations

  8. Use the Structure window to create an additional Menu Item.

    Inserting a Menu Item in the Jump menu
  9. Set the Text property Next 3.

    Typing Next 3 as the Text for the menu item
  10. Click Edit in the ActionListener property.

    Selecting the Edit option for the ActionListener field
  11. Select the ViewDeptEmp1 managed bean click New to add a new method.

    The Edit Property dialog
  12. Create a new method named Next3Action in the ViewDeptEmp1 managed bean.

    The Create Method dialog

    Click OK, then OK again.

  13. Open the ViewDeptEmp1.java class to display the new method code.

    The java source code
  14. In the Next3Action method, add code to access the Next operation and call it three times:

  15. Confirm the following import statement was included: import oracle.binding.OperationBinding;.

    The java source code with import statements
  16. Re-run the page and select the Jump | Next menu option to test the new navigation functionality.

    The page in the browser with the Jump menu expanded
  17. The next row is now highlighted.

    The page displaying a new row after the Next action menu option
  18. Select the Jump | Next 3 menu option to test the navigation functionality.

    Selecting the Next 3 menu action
  19. The new selection is highlighted in the table.

    The new highlighted row after the Next 3 jump action

You've successfully performed this practice.

Summary

IIn this tutorial you learned how to work with Business Components and JPA bindings. You learned how to::


Bookmark Print Expand all | Hide all
Back to top
Copyright © 2011, Oracle and/or its affiliates. All rights reserved.