Skip Headers
Oracle® Application Development Framework Developer's Guide
10g Release 3 (10.1.3.0)

Part Number B28967-02
Go to Documentation Home
Home
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
View PDF

13 Adding ADF Bindings to Existing Pages

This chapter describes how to use the Data Control Palette to add ADF bindings to existing UI components. Instead of using the Data Control Palette to design your application pages, you can design the UI first using other tools, such as the Component Palette, and add the ADF bindings later.

This chapter includes the following sections:

13.1 Introduction to Adding ADF Bindings to Existing Pages

While the Data Control Palette enables you to design and create bound components in a single drag and drop action, in some cases, it may be preferable to create the basic UI components first and add the bindings later. For example, if a development team includes UI designers, the designers can create the basic pages using JDeveloper tools, such as the Component Palette, and the developers can add the page functionality afterwards, including the ADF bindings.

Read this chapter to understand:

13.2 Designing Pages for ADF Bindings

When designing and creating a web page that will have ADF bindings added later, use the JDeveloper wizards, visual editors, and design tools (such as the Component Palette).

You can design your pages using any tags that you want; however, if you plan to add ADF bindings to certain components, you may want to design those components using tags that work with ADF bindings. Otherwise, the components will have to be entirely replaced when the bindings are added later.

When you add ADF bindings to an existing component, ADF preserves as much of the original component's properties as possible. However, the binding may overwrite such things as labels, column headings, and range navigation.

If a label value contains a static text string, the ADF binding overwrites the value with an EL expression that binds to an attribute name in the data control. However, if you define your UI labels using EL expressions that reference managed beans (for example, a standard binding on a resource bundle), that label is preserved when you add the ADF binding to that component. In many cases, it is preferable to design your basic UI components using labels that are bound to resource bundles, especially if you will be localizing your pages. For more information about resource bundles, see Section 14.4, "Internationalizing Your Application".

Range navigation is another property that is overwritten by the ADF binding, because the iterator referenced by the binding manages the current rowset. Later sections in this chapter discuss how to add ADF bindings to specific UI components and how those specific components are affected by the ADF bindings.

13.2.1 Creating the Page

When you use the Create JSF JSP wizard to create a page to which you intend to add ADF bindings, be sure to do the following actions to make future binding easier:

  • Choose the Do not Automatically Expose UI Components in a Managed Bean option.

    This option turns off JDeveloper's auto-binding feature, which automatically associates every UI component in the page to a corresponding property in the backing bean for eventual programmatic manipulation. If you intend to add ADF bindings to a page, Oracle recommends that you do not use the auto-binding feature. If you use the auto-binding feature, you will have to remove the managed bean bindings later, after you have added the ADF bindings. The managed bean UI component property bindings do not affect the ADF bindings, but their presence may be confusing in the JSF code. For information about managed beans, see Section 4.5, "Creating and Using a Backing Bean for a Web Page".

  • Add the ADF Faces tag libraries.

    While you can add ADF bindings to JSF components, the ADF Faces components provide greater functionality, especially when combined with ADF bindings.

  • Add the desired page-level physical attributes such as background color, style sheets, or skins.

    The ADF bindings do not affect your page-level attributes. For information about using ADF Faces skins, see Section 14.3, "Using Skins to Change the Look and Feel".

13.2.2 Adding Components to the Page

When designing web pages, keep in mind that ADF bindings can be added only to certain ADF Faces tags or their equivalent JSF HTML tags. Table 13-1 lists the ADF Faces and JSF tags to which you can later add ADF bindings. On the Component Palette, the ADF Faces tags are available on the ADF Faces Core page, and the JSF tags are available on the JSF HTML page.

Tip:

To enable the use of JSF Reference Implementation UI component tags with ADF bindings, you must choose the Include JSF HTML Widgets for JSF Databinding option in the ADF View Settings of the project properties. However, using ADF Faces tags, especially with ADF bindings, provides greater functionality than does using the reference implementation JSF tags.

Table 13-1 Tags That Can Be Used for ADF Bindings

ADF Faces Tags Used in ADF Bindings Equivalent JSF HTML Tags

Text Fields

 

af:·inputText

h:inputText

af:outputText

h:outputText

af:outputLabel

h:outputLabel

Tables

 

af:table

h:dataTable

Actions

 

af:commandButton

h:commandButton

af:commandLink

h:commandLink

Selection Lists

 

af:selectOneChoice

h:selectOneMenu

af:selectOneListbox

h:selectOneListbox

af:selecOneRadio

h:selectOneRadio

af:selectBooleanRadio

h:selectBooleanCheckbox

Trees

 

af:tree

n/a

af:treeTable

n/a


13.2.3 Other Design Considerations

When designing pages using the JDeveloper wizards and editors to which you will later add ADF bindings, you can either:

  • Choose options that enable you to bind later and, instead, enter static labels and values. This approach enables you to design your UI using placeholder labels and values that will be replaced later by the values and labels returned by the ADF bindings.

    OR

  • Bind labels to resource bundles, which contain the actual text to be displayed in the label. When you later add an ADF binding to a component, ADF retains any existing label bindings on resource bundles (or managed beans). For information about using resource bundles, see Section 14.4, "Internationalizing Your Application".

For information about creating JSF and ADF Faces components, see Section 4.4.1, "How to Add UI Components to a JSF Page".

13.2.3.1 Creating Text Fields in Forms

For text field labels, you can either enter static placeholder values or bind to resource bundles. If you are not binding labels to resource bundles, then use the Property Inspector or source editor to add or modify placeholder labels and values in text fields. Use placeholder labels and values that make it easier for the developer, who will later add the bindings, to determine the intent of the field. Static placeholder values will be replaced by the ADF bindings. However, as mentioned previously, any bindings to resource bundles will be retained.

For example, if you are creating a form that displays user information, you might use User First Name, User Last Name, and User Address as placeholder text field labels. The developer who adds the ADF bindings would then match the placeholder labels to actual attributes in a data source on the data control.

13.2.3.2 Creating Tables

When you drag a table component from the Component Palette and drop it on a page, JDeveloper displays a table wizard to help you define the table. Choose the Bind Later option in the ADF Faces Table wizard (or, for JSF tables, the Number of Columns option in the Create Data Table wizard), which enables you to specify the number of columns needed in the table instead of binding to a data source. If you are unsure of the total number of columns needed, enter an estimate. Later, when the bindings are added, the number of columns can easily be adjusted.

As with text fields, use placeholder labels or bindings on resource bundles in the column headings. If you are using the ADF table component, you can specify the column headings in the Header Text field on the Column Details page of the ADF Faces Table wizard. For JSF tables, you can enter the column headings directly in the table displayed in the visual editor.

13.2.3.3 Creating Buttons and Links

For the button or link label, use the Property Inspector or the source editor to add a static placeholder or a binding on a resource bundle. If the button or link will perform page navigation, you can specify an outcome value in the action attribute, to enable page navigation in your initial pages. However, when the ADF bindings are added, the action attribute is overwritten, and the action will have to be re-entered.

13.2.3.4 Creating Lists

When you drag a selection list from the Component Palette and drop it on a page, JDeveloper displays the Insert dialog to help you define the list. Use the Create List option on the Insert dialog to define the list. Only enter item labels or values if you will ultimately create a static list. If you intend to populate the list from a binding on a data collection, leave the item labels and values blank. For the list label, use the Property Inspector to enter a static placeholder or a binding on a resource bundle. For example, if you are creating a dropdown list of products, you might enter Products as the label for the list. Later, when the binding is added, static placeholder labels are replaced by an ADF binding expression.

13.2.3.5 Creating Trees or Tree Tables

When creating trees, use the value attribute to identify the root node and the var value to identify the branch node. When creating a tree table, choose the Bind Later option in the ADF Faces Tree Table wizard. You can specify a number of columns, but when the ADF binding is added all data is displayed in a single column.

13.3 Using the Data Control Palette to Bind Existing Components

To bind existing components to ADF data controls, you must add ADF binding expressions to the component tags. While you could manually add ADF binding expressions to existing tags, it is easier to use the Data Control Palette. Using the Data Control Palette ensures that all the necessary binding objects and references are automatically created for you. (For more information see, Section 13.3.2, "What Happens When You Use the Data Control Palette to Add ADF Bindings".)

13.3.1 How to Add ADF Bindings Using the Data Control Palette

The following procedure is a general description of how to use the Data Control Palette and the Structure window to add ADF bindings to existing components. Later sections in this chapter describe how to add ADF bindings to specific types of components.

To add ADF bindings using the Data Control Palette and Structure Window:

  1. With your page displayed in the Design page of the visual editor, open the Structure window.

    Tip:

    You can drop the data control object on the component displayed in the Design page of the visual editor, but using the Structure window provides greater accuracy and precision. For example, if you try dropping a data control object on a component in the visual editor and do not get the Bind Existing <component name> option in the context menu, this means you did not drop the data control on the correct tag in the visual editor. In this case, try using the Structure window where each tag is clearly delineated.
  2. In the Design page of the visual editor, select the UI component to which you want to add ADF bindings.

    The component must be one of the tags listed in Table 13-1. When you select a component in the visual editor, JDeveloper simultaneously selects that component tag in the Structure window, as shown in Figure 13-1. Use the Structure window to verify that you have selected the correct component. If the incorrect component is selected, make the adjustment in the Structure window.

    Figure 13-1 Structure Window with Tag Selected

    Structure window with tag selected
  3. Drag the appropriate data control object from the Data Control Palette to the Structure window and drop it on the selected UI component. (For information about the nodes on the Data Control Palette, see Section 5.2.1, "How to Understand the Items on the Data Control Palette".)

    Tip:

    As you position the data control object over the UI component in the Structure window, a horizontal line with an embedded up or down arrow appears at the top or bottom of the component, as shown in Figure 13-2. Whenever either of these lines appears, you can drop the data control object: in this case, it does not matter which direction the arrow is pointing.

    Figure 13-2 Dropping a Data Control Object on a UI Component in the Structure Window

    Dropping a data control in the Structure window.
  4. From the Data Control Palette context menu, choose the Bind Existing <component name> option, where <component name> is the name of the component, such as text field or table, as shown in Figure 13-3.

    Tip:

    If the context menu does not display a Bind Existing <component name> option, you have not dropped the data control object on the correct tag in the Structure window. You can add bindings only to the tags shown in Table 13-1.

    Figure 13-3 Context Menu for Binding to an Existing Component

    Context menu for binding to an existing component

13.3.2 What Happens When You Use the Data Control Palette to Add ADF Bindings

When you use the Data Control Palette all of the required ADF objects are automatically created for you:

  • The DataBindings.cpx file is created and a corresponding entry for the page is added to it.

  • The ADF binding filter is registered in the web.xml file.

  • The ADF phase listener is registered in the faces-config.xml file.

  • A page definition file is created and configured with the binding object definitions for component on the page.

All of these objects are required for a component with ADF bindings to be rendered correctly on a page. If you do not use the Data Control Palette, you will have to create these things manually. For more information about these objects, see Chapter 5, "Displaying Data on a Page".

13.4 Adding ADF Bindings to Text Fields

You bind forms or other container components by binding the individual text fields that comprise the component: you cannot bind an entire form at one time. You bind a text field to an attribute in a collection.

13.4.1 How to Add ADF Bindings to Text Fields

To add ADF bindings to a text field, you drag an attribute from the Data Control Palette and drop it on the text field component displayed in the Structure window. For general tips about dropping items from the Data Control Palette onto the Structure window, see Section 13.3.1, "How to Add ADF Bindings Using the Data Control Palette".

To add ADF bindings to a text field:

  1. With the page displayed in the Design page of the visual editor, open the Structure window.

  2. In Design page of the visual editor, select the text field.

    This simultaneously selects the tag in the Structure window. The text field tag must be one of the tags listed previously in Table 13-1. If the incorrect tag is selected, make the adjustment in the Structure window.

  3. From the Data Control Palette, drag an attribute to the Structure window and drop it on the selected text field.

  4. On the Data Control Palette context menu, choose Bind Existing Input Text.

    The binding is added to the text field.

13.4.2 What Happens When You Add ADF Bindings to a Text Field

Example 13-1 displays an input text field component before the ADF bindings are added. The example is a simple inputText tag with a static label value of First Name.

Example 13-1 Text Field Component Before ADF Bindings

<af:inputText label="First Name"/>

Example 13-2 displays the same text field after the firstName attribute of the User data collection from the SRDemo data control was dropped on it. The User collection is returned by the findAllStaff method. Notice that the label was replaced with a binding expression. To modify the label displayed by an ADF binding, you can use control hints. Other tag attributes have been added with bindings on different properties on the FirstName attribute. For a description of each binding property, see Appendix B, "Reference ADF Binding Properties".

Example 13-2 Text Field Component After ADF Bindings Are Added

<af:inputText label="#{bindings.FirstName.label}"
              value="#{bindings.FirstName.inputValue}"
              required="#{bindings.FirstName.mandatory}"
              columns="#{bindings.FirstName.displayWidth}">
   <af:validator binding="#{bindings.FirstName.validator}"/> 
</af:inputText>

In addition to adding the bindings to the text field, JDeveloper automatically adds entries for the databound text field to the page definition file. The page definition entries include an iterator binding object defined in the executables element and a a value binding defined in the bindings element. For more information about databound text fields and forms, see Chapter 6, "Creating a Basic Page".

13.5 Adding ADF Bindings to Tables

You can add ADF bindings to an entire table at one time. In fact, it is recommended to bind the entire table instead of the individual components that comprise the table. When you add a binding to a table, you can drag an entire collection from the Data Control Palette onto the table. You can bind an individual column, but only if the table is already bound to an iterator.

13.5.1 How to Add ADF Bindings to Tables

To add ADF bindings to a table, you drag a data collection from the Data Control Palette and drop it on the table tag displayed in the Structure window. For general tips about dropping items from the Data Control Palette onto the Structure window, see Section 13.3.1, "How to Add ADF Bindings Using the Data Control Palette".

To add ADF bindings to a table:

  1. With the page displayed in the Design page of the visual editor, open the Structure window.

  2. In the Design page of the visual editor, select the table.

    The tag selected in the Structure window must be one of the tags listed previously in Table 13-1. JDeveloper simultaneously selects the corresponding tag in the Structure window. If the incorrect tag is selected, make the adjustment in the Structure window. For example, if a column tag is selected, select the table tag instead.

  3. From the Data Control Palette, drag a collection to the Structure window and drop it on the selected table tag.

  4. On the Data Control Palette context menu, choose Bind Existing ADF Table or Bind Existing ADF Read-only Table. The Edit Table Column dialog appears, as shown in Figure 13-4.

    Figure 13-4 Edit Table Column Dialog

    Edit Table Column dialog

    The Display Label column in the dialog displays the placeholder column headings entered when the table was created. In the example, the placeholder column headings are First Name, Last Name, Email, and User ID. The Value Binding column displays the attributes from the data collection. The Component to Use column displays the types of components each table column will contain.

  5. In the Edit Table Columns dialog, use the dropdowns in the Value Binding fields to choose the attributes from the data collection to be bound to each column in the table, as shown in Figure 13-5. If placeholder column headings were entered when the table was created, match the attributes to the appropriate column headings. For example, if a column heading is First Name, you would choose the firstName attribute from the Value Binding dropdown next to that column heading.

    Figure 13-5 Value Binding Dropdown in the Edit Table Columns Dialog

    Value Binding Dropdown in the Edit Table Columns dialog.

    Tip:

    If you need to add additional columns to the table, click New.

    For more information about tables, see Chapter 7, "Adding Tables".

13.5.2 What Happens When You Add ADF Bindings to a Table

Example 13-3 displays a table before the ADF bindings are added. The table defines four columns and uses static placeholder values as column headings: First Name, Last Name, Email, and User ID. The table also defines a range navigation of 15 rows, table banding, and a selection facet.

Example 13-3 ADF Faces Table Before ADF Bindings

<af:table emptyText="No items were found" rows="15" banding="none"
          bandingInterval="1">
     <f:facet name="selection">
       <af:tableSelectOne/>
     </f:facet>
     <af:column sortable="false" headerText="First Name">
       <af:outputText value="#{row.col1}"/>
     </af:column>
     <af:column sortable="false" headerText="Last Name">
       <af:outputText value="#{row.col2}"/>
     </af:column>
</af:table>

Example 13-4 displays the same table after the User data collection returned by the findAllStaff method from the SRDemo data control was dropped on it. Notice that since the placeholder column headings were static values, they have been replaced with a binding on the findAllStaff1 iterator. However, the selection facet and banding from the original table remain intact. The selectionState and selectionListener attributes have been added with bindings on the binding object.

The range navigation value is replaced by a binding on the iterator, which manages the current row. The rangeSize binding property, which defines the number of rows can be set in the page definition file. For a description of each binding property, see Appendix B, "Reference ADF Binding Properties".

Example 13-4 ADF Faces Table After ADF Bindings Are Added

<af:table emptyText="#{bindings.findAllStaff1.viewable ? 'No rows yet.' : 'Access
                        Denied.'}"
          rows="#{bindings.findAllStaff1.rangeSize}" banding="none"
          bandingInterval="1"
          value="#{bindings.findAllStaff1.collectionModel}" var="row"
          first="#{bindings.findAllStaff1.rangeStart}"
          selectionState="#{bindings.findAllStaff1.collectionModel.
                            selectedRow}"
          selectionListener="#{bindings.findAllStaff1.collectionModel.
                                makeCurrent}">
     <f:facet name="selection">
       <af:tableSelectOne/>
     </f:facet>
     <af:column sortable="false"
                headerText="#{bindings.findAllStaff1.labels.firstName}"
                sortProperty="firstName">
        <af:outputText value="#{row.firstName}"/>
     </af:column>
     <af:column sortable="false"
                headerText="#{bindings.findAllStaff1.labels.lastName}"
                sortProperty="lastName">
        <af:outputText value="#{row.lastName}"/>
     </af:column>
</af:table>

In addition to adding the bindings to the table, JDeveloper automatically adds entries for the databound table to the page definition file. The page definition entries include an iterator binding object defined in the executables element and the value bindings for the table in the bindings element. By default, the RangeSize property on the iterator binding is set to 10. This value is now bound to the range navigation in the table and overrides the original range navigation value set in the table before the bindings were added. In the example, the original table set the range navigation value at 15. If necessary, you can change the RangeSize value in the page definition to match the original value defined in the table.

The bindings element contains a methodAction, which encapsulates information about how to invoke the method iterator, and value bindings for the attributes available to the table. The value bindings include all the attributes of the returned collection, even if the table itself is displaying only a subset of those attributes.

13.6 Adding ADF Bindings to Actions

You can add ADF bindings to buttons or links. When you add a binding to a button or link, you use a method or operation from the data control. When a user clicks the button or link, the method or operation is invoked.

If you want the button or link to perform page navigation, after adding the ADF binding you must bind the action attribute of the component tag to a backing bean, which will handle the navigation. The backing bean must inject the ADF binding container and return an outcome value. For information about creating navigation rules and binding navigation components to backing beans, see Chapter 9, "Adding Page Navigation".

13.6.1 How to Add ADF Bindings to Actions

To add ADF bindings to a button or link, you drag a method or operation from the Data Control Palette and drop it on the button or link tag displayed in the Structure window. For general tips about dropping items from the Data Control Palette onto the Structure window, see Section 13.3.1, "How to Add ADF Bindings Using the Data Control Palette".

To add ADF bindings to a button or link:

  1. With the page displayed in the Design page of the visual editor, open the Structure window.

  2. In the Design page of the visual editor, select the button or link.

    The tag selected in the Structure window must be one of the tags listed previously in Table 13-1. JDeveloper simultaneously selects the corresponding tag in the Structure window. If the incorrect tag is selected, make the adjustment in the Structure window.

  3. From the Data Control Palette, drag a method or operation to the Structure window and drop it on the selected button or link tag.

  4. On the Data Control Palette context menu, choose Bind Existing CommandButton or Bind Existing CommandLink.

  5. If the method requires a parameter, the Action Binding Editor appears where you define the parameter values to pass to the method. (For more information about passing parameters to methods, see Chapter 10, "Creating More Complex Pages".)

13.6.2 What Happens When You Add ADF Bindings to an Action

Example 13-5 displays a command button before the ADF bindings are added.

Example 13-5 ADF Faces Command Button Before ADF Bindings

<af:commandButton text="Display User"/>

Example 13-6 displays the same button after the findAllStaff() method from the SRDemo data control was dropped on it. The findAllStaff method returns the User collection. Since the original label was a static value, the binding replaced it with the name of the method; you can change the button label using the Property Inspector. An actionListener attribute was added with a binding on the findAllStaff method. The actionListener detects when the user clicks the button and executes the method as a result. If you want the button to navigate to another page, you can bind to a backing bean or add an action value. For more information, see Chapter 9, "Adding Page Navigation".

Example 13-6 ADF Faces Command Button After ADF Bindings Are Added

<af:commandButton text="findAllStaff"
                  actionListener="#{bindings.findAllStaff.execute}"
                  disabled="#{!bindings.findAllStaff.enabled}"/>

In addition to adding the bindings to the button, JDeveloper automatically adds a methodAction binding object to the page definition file.

For more information about databound buttons and links, see Chapter 6, "Creating a Basic Page".

13.7 Adding ADF Bindings to Selection Lists

You can add ADF bindings to any of the selection lists previously shown in Table 13-1. A databound selection list displays values from a data control collection or a static list and updates an attribute in another collection or a method parameter based on the user's selection. When adding a binding to a list, you use an attribute from the data control that will be populated by the selected value in the list.

13.7.1 How to Add ADF Bindings to Selection Lists

To add ADF bindings to a selection list, you drag an attribute from the Data Control Palette and drop it on the selection list tag displayed in the Structure window. For general tips about dropping items from the Data Control Palette onto the Structure window, see Section 13.3.1, "How to Add ADF Bindings Using the Data Control Palette".

To add ADF bindings to a selection list component:

  1. With the page displayed in the Design page of the visual editor, open the Structure window.

  2. In the Design page of the visual editor, select the selection list component.

    The tag selected in the Structure window must be one of the tags listed previously in Table 13-1. JDeveloper simultaneously selects the corresponding tag in the Structure window. If the incorrect tag is selected, make the adjustment in the Structure window.

  3. From the Data Control Palette, drag an attribute to the Structure window and drop it on the selected selection list tag. Use the attribute in the data collection that you want to populate when the user selects an item from the list.

  4. On the Data Control Palette context menu, choose Bind Existing <component name>.

  5. In the List Binding Editor, define the data collection that will be updated by the list (Base Data Source), the data collection that will populate the list (List Data Source), and the attributes that will be displayed in the list. For information about using the List Binding Editor to define lists, see Section 11.7, "Creating Databound Dropdown Lists".

13.7.2 What Happens When You Add ADF Bindings to a Selection List

Example 13-7 displays a single-selection dropdown list before the ADF bindings are added. Notice that the component defines a label for the list, but that it does not define static list item labels and values. The item labels and values will be populated by the bindings.

Example 13-7 ADF Faces Single-Selection Dropdown Before ADF Bindings

<af:selectOneChoice label="Product:"/>

Example 13-8 displays the same list after the prodID attribute in the Product collection from the SRDemo data control was dropped on it. Because the original list label was a static value, the binding replaced it with a binding on the ProductprodId attribute, which was the attribute that was dragged from the Data Control Palette and dropped on the dropdown list component.

You can change the label using control hints. The list values are also bound to the same attribute. Notice that no display values or labels are defined in the component by the binding. Instead, the display values are defined in the page definition file.

Tip:

Any static item labels and values defined in the original selection list are not replaced by the ADF bindings. If you add static item labels and values to the original selection list, and then add a dynamic list with a binding on the data collection, the list will display both the values populated by the binding and the static values defined in the component itself. In most cases, you would not want this. Therefore, you must either design the initial component without using static item labels and values, or remove them after the bindings are added.

Example 13-8 ADF Faces Single-Selection Dropdown After ADF Bindings Are Added

<af:selectOneChoice label="#{bindings.ProductprodId.label}"
                    value="#{bindings.ProductprodId.inputValue}">
    <f:selectItems value="#{bindings.ProductprodId.items}"/>
</af:selectOneChoice>

In addition to adding the bindings to the list, JDeveloper automatically adds several binding objects for the list to the page definition file. The executables element defines the iterator binding for the collection that populates the list, and the iterator binding for the target collection.

The bindings element contains two method action binding objects, which encapsulate the information needed to invoke the methods that populate the list and update the data collection. The list binding includes a ListDisplayAttrNames element, which defines the data collection attributes that populate the values the user sees in the list. This element is added only if the list is a dynamic list, meaning that the list items are populated by a binding on the data collection. If the list is a static list, a ValueList element is added instead with the static values that will appear in the list.

For more information about databound lists, see Section 11.7, "Creating Databound Dropdown Lists".

13.8 Adding ADF Bindings to Trees and Tree Tables

You can add ADF bindings to ADF Faces tree and tree table components. The ADF Faces tree component displays a hierarchy of master-detail related data collections in a tree format. A databound ADF Faces tree displays multiple root nodes that are populated by a binding on a master data collection. Each node in the tree may have any number of branches, which are populated by bindings on detail data collections. Each node in the tree is indented to show its level in the hierarchy. The ADF tree component includes mechanisms for expanding and collapsing the tree. By default, the icon for each node in the tree is a folder; however, you can use your own icons for each level of nodes in the hierarchy. The ADF Faces tree table components display a hierarchy of master-detail collections in a table. For more information about master-detail relationships and trees, see Chapter 8, "Displaying Master-Detail Data".

13.8.1 How to Add ADF Bindings to Trees and Tree Tables

To add ADF bindings to a tree or tree table, you drag a master data collection from the Data Control Palette and drop it on the tree tag displayed in the Structure window. For general tips about dropping items from the Data Control Palette onto the Structure window, see Section 13.3.1, "How to Add ADF Bindings Using the Data Control Palette".

To add ADF bindings to a tree component:

  1. With the page displayed in the Design page of the visual editor, open the Structure window.

  2. In the Design page of the visual editor, select the tree tag.

    JDeveloper simultaneously selects the corresponding tag in the Structure window. If the incorrect tag is selected, make the adjustment in the Structure window.

  3. From the Data Control Palette, drag a data collection to the Structure window and drop it on the selected tree tag. The data collection you select should be the master collection, which will populate the root node of the tree.

  4. On the Data Control Palette context menu, choose Bind Existing Tree.

  5. Use the Tree Binding Editor to define the root and branch nodes of the tree. For information, see Section 8.4, "Using Trees to Display Master-Detail Objects".

13.8.2 What Happens When You Add ADF Bindings to a Tree or Tree Table

Example 13-9 displays a tree before the ADF bindings are added. Notice that the value attribute specifies the root node as users, and the var attribute specifies the first branch as service requests.

Example 13-9 ADF Faces Tree Before ADF Bindings

<af:tree value="users" var="service requests">
   <f:facet name="nodeStamp">
      <h:outputText/>
   </f:facet>
</af:tree>

Example 13-10 displays the same tree after the User data collection from the SRDemo data control was dropped on it. The User collection is returned by the findAllStaff method. The User data collection will populate the root node, and the serviceRequests collection was defined as a branch off the root nodes. The binding replaced the value attribute with a binding on the findAllStaff1 binding object. The var attribute now contains a value of node, which provides access to the current node. The nodes themselves are defined in the page definition file.

Example 13-10 ADF Faces Tree After ADF Bindings Are Added

<af:tree value="#{bindings.findAllStaff1.treeModel}" var="node">
   <f:facet name="nodeStamp">
      <af:outputText value="#{node}"/>
   </f:facet>
</af:tree>

In addition to adding the bindings to the tree, JDeveloper automatically adds several binding objects for the tree to the page definition file. The executables element defines the iterator binding for the collection that populates the root node.

The bindings element contains a methodAction binding object, which encapsulates the information needed to invoke the method that populates the root node. In the value bindings, the tree is bound to the findAllStaffIter iterator. Each attribute returned by the iterator is listed in the AttrNames element, but only the attributes in the nodeDefinition element are displayed in the tree. The Accesssors element defines the accessor methods that will be used to retrieve the data that will populate the branches in the node. In the example, the User node, which is the root node, defines serviceRequestCollectionAssignedTo as the accessor method. This method returns the service requests for each user node.

For more information about trees and tree tables, see Chapter 8, "Displaying Master-Detail Data".