Figure 32-1 shows the Products table on the Inventory Control tab of the Summit sample application for Oracle ADF. This table is used to display all of the products in the inventory and enables the user to select a product to see its inventory status in an adjoining graph.

Figure 32-1 Read-only Table

Description of "Figure 32-1 Read-only Table"

You can create a table that simply displays information, as shown in Figure 32-1, or you can allow the user to edit the information and create new records, as shown in Figure 32-2.

Figure 32-2 Edit Table

Description of "Figure 32-2 Edit Table"

You may find it helpful to understand other ADF Faces features before you implement your table and tree components. Additionally, once you have added a tree or table component to your page, you may find that you need to add functionality such as validation and accessibility. Following are links to other functionality that table and tree components can use.

• ADF view objects: Much of how the components display and function in the table is controlled by the corresponding view objects. See Defining SQL Queries Using View Objects.

• ADF application modules: The Data Controls panel, from which you drag databound components to your pages, is populated with representations of view objects that you have added to application modules. See Implementing Business Services with Application Modules.

• Adapter-based data controls: If you are using other types of business services, such as EJB components or web services, you can create data control for those business services as described in Creating and Configuring EJB Data Controls of the Developing Applications with Oracle ADF Data Controls.

• ADF Model and data binding: When you create databound tables in an ADF web application, you use ADF Model and data binding. See Using ADF Model in a Fusion Web Application.

• ADF Faces: For detailed information about developing with ADF Faces, see Introduction to ADF Faces in Developing Web User Interfaces with Oracle ADF Faces.

• Command buttons: You may want to add command button or links that invoke some functionality against the data set. For more advanced functionality than what is covered in this chapter, see Using Command Components to Invoke Functionality in the View Layer.

• Filtered tables: You can create tables that provide filtering, in effect executing a query-by-example search against the data in the table. See Creating Standalone Filtered Search Tables from Named View Criteria.

• Task flows: If your table takes part in a transaction, for example an input table, then you may need to use an ADF task flow to invoke certain operations before or after the table is rendered. See Creating ADF Task Flows .

• Validation: You may want certain fields to be validated before they are submitted to the data store. See Defining Validation and Business Rules Declaratively and Using Validation in the ADF Model Layer .

• Active data: If your application uses active data, then you can have the data in your tables and trees update automatically, whenever the data in the data source changes. See Using the Active Data Service .

  Note:

  If you wish to use active data, and your application uses ADF Business Components, then your tables must conform to the following:

  • The binding represents homogeneous data (that is, only one rule), although an accessor can still access a like accessor.

  • The binding rule contains a single attribute.

  • The table does not use filtering.

  • The tree component's nodeStamp facet contains a single outputText tag and contains no other tags.

1. From the Data Controls panel, select a collection.

   For example, to create a simple table in the Summit ADF sample application that displays all of the customers, you would select the Customers collection.

2. Drag the collection onto a JSF page, and from the context menu, choose Table/List View > ADF Table.
3. The Create Table dialog shows each attribute in the collection, and allows you to determine how these attributes will behave and appear as columns in your table.

   Using this dialog, you can do the following:

   • Make the table read-only.

   • Allow the ADF Model layer to handle selection by selecting the Single Row or Multiple Rows radio button. Selecting either of these options means that the iterator binding will access the iterator to determine the selected row or rows. Select one of these options unless you do not want the table to allow selection.

   • Allow the ADF Model layer to handle column sorting by selecting the Enabling Sorting checkbox. Selecting this option means that the iterator binding will access the iterator, which will perform an order-by query to determine the order. Select this option unless you do not want to allow column sorting.

   • Allow the columns in the table to be filtered using entered criteria by selecting the Enabling Filtering checkbox. Selecting this option allows the user to enter criteria in text fields above each column. That criteria is then used to build a Query-by-Example (QBE) search on the collection, so that the table will display only the results returned by the query. For more information, see Creating Standalone Filtered Search Tables from Named View Criteria.

     Note:

     For JPA-based data controls, filtering does not work on tables that are created from nested collections in the data control. If you drop such a collection on a page, you should leave this checkbox unselected to avoid runtime errors. For more information on JPA-based data controls, see About EJB Data Controls in Developing Applications with Oracle ADF Data Controls.

   • Group columns for selected attributes together under a parent column, by selecting the desired attributes (shown as rows in the dialog), and clicking the Group button. Figure 32-3 shows how five grouped columns appear in the visual editor after the table is created.

     Figure 32-3 Grouped Columns in an ADF Faces Table

     
     Description of "Figure 32-3 Grouped Columns in an ADF Faces Table"

   • Change the display label for a column. By default, the label is bound to the labels property for any control hint defined for the attribute on the table binding. This binding allows you to change the value of a label text once on the view object, and have the change appear the same on all pages that display the label.

     Instead of using this default, you can enter text or an EL expression to bind the label value to something else, for example, a key in a resource file.

   • Change the value binding for a column. You can change the column to be bound to a different attribute. If you simply want to rearrange the columns, you should use the order buttons. If you do change the attribute binding for a column, the label for the column also changes.

   • Change the UI component used to display an attribute. The UI components are set based on the table you selected when you dropped the collection onto the page, on the type of the corresponding attribute (for example, inputDate components are used for attributes that are dates), and on whether or not default components were set as control hints on the corresponding view object. You can change to another component using the dropdown list.

     Tip:

     If one of the attributes for your table is also a primary key, you may want to choose a UI component that will not allow a user to change the value.

     Tip:

     If you want to use a component that is not listed in the dropdown menu, use this dialog to select the outputText component, and then manually add the other tag to the page.

   • Change the order of the columns using the order buttons.

   • Add a column using the Add icon. There's no limit to the number of columns you can add. When you first click the icon, JDeveloper adds a new column line at the bottom of the dialog and populates it with the values from the first attribute in the bound collection; subsequent new columns are populated with values from the next attribute in the sequence, and so on.

   • Delete a column using the Delete icon.

   • Make the table dynamic by selecting the Generate columns dynamically at runtime checkbox. For more information on dynamic tables, see Creating a Table with Dynamic Components.

4. Once the table is dropped on the page, you can use the Properties window to set other display properties of the table. For example, you may want to set the width of the table to a certain percentage or size. For more information about display properties, see the Using Tables, Trees, and Other Collection-Based Components chapter of Developing Web User Interfaces with Oracle ADF Faces.

   Tip:

   When you set the table width to 100%, the table will not include borders, so the actual width of the table will be larger. To have the table set to 100% of the container width, expand the Style section of the Properties window, select the Box tab, and set the Border Width attribute to 0 pixels.

5. By default, the table will enforce delayed scrolling behavior which waits until the user stops scrolling and the position of the scroller is established to scroll the table rows. You can use the Property window that you display for the table iterator binding to configure smooth scrolling behavior. For more information, see What You May Need to Know About Table Scrolling Behavior and Row Count.
6. If you want the user to be able to edit information in the table and save any changes, you need to provide a way to submit and persist those changes. For more information, see Creating an Editable Table. For procedures on creating tables that allow users to input data, see Creating an Input Table.

Dropping a table from the Data Controls panel has the same effect as dropping a text field or form. Briefly, JDeveloper does the following:

• Creates the bindings for the table and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

For more information, see What Happens When You Create a Text Field .

When you use tables in an application and you allow the ADF Model layer to manage row selection, the current row is determined by the iterator. When a user selects a row in an ADF Faces table, the row in the table is shaded, and the component notifies the iterator of the selected row. To do this, the selectedRowKeys attribute of the table is bound to the collection model's selected row, as shown in the following example.

<af:table value="#{bindings.ProductVO1.collectionModel}" var="row"
.
.
.
          selectedRowKeys="#{bindings.ProductVO1.collectionModel.selectedRow}"
          selectionListener="#{bindings.ProductVO1.collectionModel.makeCurrent}"
          rowSelection="single">

This binding binds the selected keys in the table to the selected row of the collection model. The selectionListener attribute is then bound to the collection model's makeCurrent property. This binding makes the selected row of the collection the current row of the iterator.

Although a table can handle selection automatically, there may be cases where you need to programmatically set the current row for an object on an iterator.

You can call the getKey() method on any view row to get a Key object that encapsulates the one or more key attributes that identify the row. You can also use a Key object to find a view row in a row set using the findByKey() method. At runtime, when either the setCurrentRowWithKey or the setCurrentRowWithKeyValue built-in operation is invoked by name by the data binding layer, the findByKey() method is used to find the row based on the value passed in as a parameter before the found row is set as the current row.

The setCurrentRowWithKey and setCurrentRowWithKeyValue operations both expect a parameter named rowKey, but they differ precisely by what each expects that rowKey parameter value to be at runtime:

setCurrentRowWithKey Operation

setCurrentRowWithKey expects the rowKey parameter value to be the serialized string representation of a view row key. This is a hexadecimal-encoded string that looks similar to this:

000200000002C20200000002C102000000010000010A5AB7DAD9

The serialized string representation of a key encodes all of the key attributes that might comprise a view row's key in a way that can be conveniently passed as a single value in a browser URL string or form parameter. At runtime, if you inadvertently pass a parameter value that is not a legal serialized string key, you may receive exceptions like oracle.jbo.InvalidParamException or java.io.EOFException as a result. In your web page, you can access the value of the serialized string key of a row by referencing the rowKeyStr property of an ADF control binding (for example. #{bindings.SomeAttrName.rowKeyStr}) or the row variable of an ADF Faces table (e.g. #{row.rowKeyStr}).

setCurrentRowWithKeyValue Operation

The setCurrentRowWithKeyValue operation expects the rowKey parameter value to be the literal value representing the key of the view row. For example, its value would be simply "201" to find product number 201.

static public Row getRowFromKey(RowSetIterator rsi, String sKey)

CollectionModel supports a version of the getRowData method that takes a row key parameter and thus allows you to get row data without changing currency.

For example, you can replace this code:

CollectionModelInstance.setRowKey(RowKeyInstance);
JUCtrlHierNodeBinding rowData = (JUCtrlHierNodeBinding)
   CollectionModelInstance.getRowData();

with this code:

JUCtrlHierNodeBinding rowData = (JUCtrlHierNodeBinding)
   CollectionModelInstance.getRowData(RowKeyInstance);

This is particularly useful when your view object uses range paging, since it enables you to avoid having to use the setRowKey method. (If you use setRowKey, you might also need to provide custom code to ensure that the row that you specify with that method is within the current range of rows.)

When you add the table component to a page, you size the table to display fewer rows than the fetch size set on the backing view object and therefore only a portion of the total row count. At runtime, when the user scrolls through the result set and the total number of rows is much larger than table rows, it is usually desirable to wait until the user stops scrolling and the final position of the scroller is established to render the corresponding rows. This default behavior is called delayed scrolling because the table rows don’t change until the position of the scroller is established. In contrast, when few fetches are needed to scroll through the result set (because the row count is a small multiple of the backing view object’s fetch size), smooth scrolling may be desired to allow the user to view table rows corresponding to the changing position of the scroller.

You can configure the desired table scrolling behavior using the RowCountThreshold attribute on the table’s iterator binding. The default attribute value (0) gets the estimated row count when the table is first rendered and supports delayed scrolling through a large result set. In this case, the size of the scroller will be determined from the start and will not change as the user scrolls through the result set.

To support smooth scrolling, set the RowCountThreshold attribute on the iterator binding of the table component to a value less than 0 (for example, -1). This will enforce smooth scrolling through a small result set and defer getting an estimated row count until the last set of rows is fetched. In this case, the scroller size and position will be determined by the number of rows fetched by the table, and the scroller will get smaller as the user scrolls through the result set.

Alternatively, you can set the RowCountThreshold attribute to a value greater than 0 when you want to configure a threshold for smooth scrolling to begin. When the table renders, it executes the estimated row count and if the row count is less than the value you specify, the framework will enforce the default behavior (delay row scrolling until the scroller position is established). If the estimated row count exceeds the threshold value, the table enforces the smooth scrolling behavior.

1. From the Data Controls panel, select a collection.

   For example, to create a simple table in the Summit ADF task flow sample application that will allow you to edit products in the system, you would select the ProductVO1 collection.

2. Drag the collection onto a JSF page, and from the context menu, choose Table /List View > ADF Table.

   This creates an editable table using input components.

3. Use the ensuing Create Table dialog to determine how the attributes should behave and appear as columns in your table. Be sure to select the Single Row or Multiple Rows radio button in order to allow the user to select a row to edit.

   For more information about using this dialog to configure the table, see How to Create a Basic Table.

4. With the table selected in the Structure window, expand the Behavior section of the Properties window and set the EditingMode attribute. If you want all the rows to be editable select editAll. If you want the user to click into a row to make it editable, select clickToEdit.
5. From the Structure window, right-click the table component and choose Surround With.
6. In the Surround With dialog, ensure that ADF Faces is selected in the dropdown list, select the Panel Collection component, and click OK.

   The panelCollection component's toolbar facet will hold the toolbar which, in turn, will hold the command components used to update the data.

7. In the Structure window, right-click the panelCollection's f:facet - toolbar facet node and choose Insert inside f:facet - toolbar > Toolbar.

   This creates a toolbar that already contains a default menu that allows users to change how the table is displayed and a Detach link that detaches the entire table and displays it such that it occupies the majority of the space in the browser window. For more information about the panelCollection component, see the Displaying Table Menus, Toolbars, and Status Bars section of Developing Web User Interfaces with Oracle ADF Faces.

8. From the Data Controls panel, select the operation associated with the collection of objects on which you wish the operation to execute, drag it onto the toolbar component in the Structure window, and choose Create > ADF Button from the context menu. This will place the databound command component inside the toolbar.

   For example, if you want to be able to delete a product record, you would drag the Delete operation associated with the ProductVO1 collection. Figure 32-6 shows the operations associated with he ProductVO1 collection.

   Figure 32-6 Operations Associated with a Collection

   
   Description of "Figure 32-6 Operations Associated with a Collection"
9. If you need a button for submitting changes to the cache, right-click the af:toolbar component in the Structure window and choose Insert Inside Toolbar > Button.

   Note:

   You can use other means to submit changes to the cache, such as setting the autoSubmit property to true for the input components in the table. For more information, see Using Partial Triggers in Developing Web User Interfaces with Oracle ADF Faces.

10. If the page is not part of a transaction within a bounded task flow, then you need to create buttons that allow the user to either commit or rollback the changes. From the Data Controls panel, drag the Commit and Rollback operations associated with the root-level data control, and drop them as either a button or link into the toolbar.

    Figure 32-7 shows the commit and roll back operations for the BackOfficeAppModuleDataControl data control.

    Figure 32-7 Commit and Rollback Operations for a Data Control

    
    Description of "Figure 32-7 Commit and Rollback Operations for a Data Control"

    If the page is part of a transaction within a bounded task flow, then you can simply enter Commit and Rollback as the values for the transaction resolution when creating the task flow return activity. For more information, see Managing Transactions in Task Flows.

Creating an editable table is similar to creating a form used to edit records. Action bindings are created for the operations dropped from the Data Controls panel. For details, see What Happens When You Create Command Components Using Operations.

1. From the Data Controls panel, drag the CreateInsert operation associated with the dropped collection and drop it as a toolbar button into the toolbar. You may want to change the ID to something more recognizable, such as CreateNewRow. This will make it easier to identify when you need to select it as the partial trigger.

   Note:

   If the collection is a child to another collection (for example, in the Summit ADF sample application the OrdersForCustomer collection is a child to the Customers collection), then instead of using the CreateInsert operation, you need to use the Create with Parameters operation so that the record to create for the child collection is associated with the parent collection.

2. In the Structure window, select the table component. In the Properties window, expand the Behavior section.
3. In the Properties window, mouse over the PartialTriggers attribute, click the dropdown menu, and choose Edit.
4. In the Edit Property dialog, expand the toolbar facet for the panelCollection component and then expand the toolbar that contains the CreateInsert command component. Select that component and shuttle it to the Selected panel. Click OK. This sets that component to be the trigger that will cause the table to refresh.

When you use the CreateInsert operation to create an input table, JDeveloper:

• Creates an iterator binding for the collection, an action binding for the CreateInsert operation, and attribute bindings for the table. The CreateInsert operation is responsible for creating the new row in the row set. If you created command buttons or links using the Commit and Rollback operations, JDeveloper also creates an action bindings for those operations.

• Inserts code in the JSF page for the table using ADF Faces table, column, and inputText components, and in the case of the operations, button components.

The following example shows the page definition file for an input table created from the ProductVO1 collection (some attributes were deleted in the Create Table dialog when the collection was dropped).

<executables>
  <iterator Binds="ProductVO1" RangeSize="25"
            DataControl="BackOfficeAppModuleDataControl" id="ProductVO1Iterator"/>
</executables>
  <tree IterBinding="ProductVO1Iterator" id="ProductVO1">
    <nodeDefinition 
            DefName="oracle.summit.model.views.ProductVO"
            Name="ProductVO10">
      <AttrNames>
        <Item Value="Id"/>
        <Item Value="Name"/>
        <Item Value="ShortDesc"/>
        <Item Value="LongtextId"/>
        <Item Value="ImageId"/>
        <Item Value="SuggestedWhlslPrice"/>
        <Item Value="WhlslUnits"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
  <action IterBinding="ProductVOIterator" id="CreateInsert"
          RequiresUpdateModel="true" Action="createInsertRow"/>
  <action id="Commit" RequiresUpdateModel="true" Action="commitTransaction"
          DataControl="BackOfficeAppModuleDataControl"/>
  <action id="Rollback" RequiresUpdateModel="false"
          Action="rollbackTransaction"
          DataControl="BackOfficeAppModuleDataControl"/>
</bindings>

The following example shows the code added to the JSF page that provides partial page rendering, using the CreateInsert command toolbar button as the trigger to refresh the table.

<af:form>
  <af:panelCollection id="pc1">
    <f:facet name="menus"/>
    <f:facet name="toolbar">
      <af:toolbar id="tb1">
        <af:button actionListener="#{bindings.CreateInsert.execute}"
                                 text="CreateInsert"
                                 disabled="#{!bindings.CreateInsert.enabled}"
                                 id="CreateInsert"/>
        <af:button actionListener="#{bindings.Commit.execute}"
                                 text="Commit"
                                 disabled="false" id="b2"/>
        <af:button actionListener="#{bindings.Rollback.execute}"
                                 text="Rollback"
                                 disabled="#{!bindings.Rollback.enabled}"
                                 immediate="true" id="b3">
          <af:resetActionListener/>
        </af:button>
      </af:toolbar>
    </f:facet>
    <f:facet name="statusbar"/>
    <af:table value="#{bindings.ProductVO1.collectionModel}" var="row"
              rows="#{bindings.ProductVO1.rangeSize}"
              emptyText="#{bindings.ProductVO1.viewable ? \'No data to display.\' :
                                                      \'Access Denied.\'}"
              fetchSize="#{bindings.ProductVO1.rangeSize}"
              rowSelection="single" partialTriggers="CreateInsert" id="t1">
      <af:column sortProperty="Id" sortable="false"
                 headerText="#{bindings.ProductVO1.hints.Id.label}"
                 id="c1">
        <af:inputText value="#{row.ProductId}" simple="true"
                      required="#{bindings.ProductVO1.hints.Id.mandatory}"
                      columns="#{bindings.ProductVO1.hints.Id.displayWidth}"
                      maximuumLength="#{bindings.ProductVO1.hints.Id.precision}"
                     id="it1"/>
      </af:column>
.
.
.
    </af:table>
  </af:panelCollection>
</af:form>

When the button bound to the CreateInsert operation is invoked, the action executes, and a new instance for the collection is created and inserted as the page is rerendered. Because the button was configured to be a trigger that causes the table to refresh, the table redraws with the new empty row shown at the top. When the user clicks the button bound to the Commit action, the newly created rows in the row set are inserted into the database. For more information about partial page refresh, see the Rerendering Partial Page Content chapter in Developing Web User Interfaces with Oracle ADF Faces.

If your table columns allow sorting, and the user has sorted on a column before inserting a new row, then that new row will not be sorted. To have the column sort with the new row, the user must first sort the column opposite to the desired sort, and then resort. This is because the table assumes the column is already sorted, so clicking on the desired sort order first will have no effect on the column.

For example, say a user had sorted a column in ascending order, and then added a new row. Initially, that row appears at the top. If the user first clicks to sort the column again in ascending order, the table will not resort, as it assumes the column is already in ascending order. The user must first sort on descending order and then ascending order.

If you want the data to automatically sort on a specific column in a specific order after inserting a row, then programmatically queue a SortEvent after the commit, and implement a handler to execute the sort.

If you want to allow sorting on a column for which the view object attribute is defined by a custom domain data type, you must implement the compareTo() method for the table's sort button click event:

public int compareTo(Object theObject)

The method will return 0 for values that are equal, less then 0 if the current object is less than theObject, and greater than 0 if the current object is greater. The object comparison for attributes behaves just like String comparisons.

When you use the Create or CreateInsert operation to declaratively create a new row, it performs the following lines of code:

// create a new row for the view object
Row newRow = yourViewObject.createRow();
// mark the row as being "initialized", but not yet new
newRow.setNewRowState(Row.STATUS_INITIALIZED);

However, if you are using the CreateInsert operation, it performs the additional line of code to insert the row into the row set:

// insert the new row into the view object's default rowset
yourViewObject.insertRow(newRow);

When you create a row in an entity-based view object, the Transaction object associated with the current application module immediately takes note of the fact. The new entity row that gets created behind the view row is already part of the Transaction's list of pending changes. When a newly created row is marked as having the initialized state, it is removed from the Transaction's pending changes list and is considered a blank row in which the end user has not yet entered any data values. The term initialized is appropriate since the end user will see the new row initialized with any default values that the underlying entity object has defined. If the user never enters any data into any attribute of that initialized row, then it is as if the row never existed. At transaction commit time, since that row is not part of the Transaction's pending changes list, no INSERT statement will be attempted for it.

As soon as at least one attribute in an initialized row is set, it automatically transitions from the initialized status to the new status (Row.STATUS_NEW). At that time, the underlying entity row is enrolled in the Transaction's list of pending changes, and the new row will be permanently saved the next time you commit the transaction.

EJB data controls and JPA-based bean data controls do not have the built-in CreateInsert operation available. However, it is possible to replicate the behavior of CreateInsert with the Create operation in these data controls by setting the data control's EagerPersist property to true. This property is set to true by default for data controls based on stateful session beans that use container-managed transactions and an explicit commit model. For more information, see About Commit Models for EJB Session Beans in Developing Applications with Oracle ADF Data Controls

1. From the Data Controls panel, drag a collection onto the page and choose Table/List View > ADF List View. If you want to create a list with headers from a parent collection, drag a collection that is a child to another collection.
2. Use the Create List View wizard to select your layout component to organize your display of the data, and to select the attributes and components to display. If you are creating a group, on the first page of the wizard, select Include header using parent collection.

   For more information about using the wizard, press the F1 key or click Help.

3. Use the Properties window to further configure the layout components.

   For complete information about using the panelGridLayout component, see the Arranging Content in a Grid section of the Developing Web User Interfaces with Oracle ADF Faces. For more information about the panelGroupLayout component, see the Grouping Related Items section of the Developing Web User Interfaces with Oracle ADF Faces.

When you use the wizard to create a listView component, JDeveloper creates and configures the listView, listItem, and layout components. The bindings are the same as for a table—the listView component is bound to the collection dropped from the Data Controls panel. The value of the var attribute on this component is used by the outputFormatted components to access the data, in the same way as a table. For more information about the page definition code and the JSP code for collections, see What Happens When You Create a Table.

The following example shows the page code for the simple table shown in Figure 32-8.

<af:listView value="#{bindings.SProductView1.collectionModel}" var="item"
             emptyText="#{bindings.SProductView1.viewable ? 'No data to display.'
                                                          : 'Access Denied.'}"
             fetchSize="#{bindings.SProductView1.rangeSize}" id="lv1">
    <af:listItem id="li1">
        <af:panelGridLayout id="pgl2" dimensionsFrom="parent">
            <af:gridRow marginTop="5px" height="15px" id="gr2">
                <af:gridCell marginStart="5px" width="50%" id="gc2">
                    <af:panelLabelAndMessage label="Product:" id="plam1"
                                                  inlineStyle="font-weight:bold;">
                        <af:outputFormatted
                               value="#{item.bindings.Name.inputValue}" id="of1"/>
                    </af:panelLabelAndMessage>
                </af:gridCell>
                <af:gridCell marginStart="5px" width="50%" marginEnd="5px"
                             id="gc3"/>
            </af:gridRow>
            <af:gridRow marginTop="5px" height="15px" id="gr3">
                <af:gridCell marginStart="5px" width="50%" id="gc4">
                    <af:panelLabelAndMessage label="ID:" id="plam2">
                        <af:outputFormatted value="#{item.bindings.Id.inputValue}"
                                            id="of2">
                            <af:convertNumber groupingUsed="false"
                             pattern="#{bindings.SProductView1.hints.Id.format}"/>
                        </af:outputFormatted>
                    </af:panelLabelAndMessage>
                </af:gridCell>
                <af:gridCell marginStart="5px" width="50%" marginEnd="5px"
                             id="gc5">
                    <af:button actionListener="#{bindings.Delete.execute}"
                               text="Delete Product"
                               disabled="#{!bindings.Delete.enabled}" id="b1"/>
                </af:gridCell>
            </af:gridRow>
            <af:gridRow marginTop="5px" height="15px" marginBottom="5px" id="gr4">
                <af:gridCell marginStart="5px" width="50%" id="gc6">
                    <af:panelLabelAndMessage label="Suggested Wholesale:"
                                             id="plam3">
                        <af:outputFormatted
                           value="#{item.bindings.SuggestedWhlslPrice.inputValue}"
                           id="of3">
                            <af:convertNumber groupingUsed="false"
           pattern="#{bindings.SProductView1.hints.SuggestedWhlslPrice.format}"/>
                        </af:outputFormatted>
                    </af:panelLabelAndMessage>
                </af:gridCell>
                <af:gridCell marginStart="5px" width="50%" marginEnd="5px"
                             id="gc7"/>
            </af:gridRow>
        </af:panelGridLayout>
    </af:listItem>
</af:listView>

1. Set UI Hints either on the view object or on the data control structure definition file that corresponds to the collection for which you are creating the dynamic form.
2. Optionally, for the Category hint on each view object attribute, specify a category or click the New Category icon to create a new category.

   Any attributes that have the same category can be grouped together in dynamic tables that you create based on that view object.

3. Optionally, for any categories that you have created set the UI hints for the category's label and tooltip. These can be set in the UI Categories tab of the view object's overview editor.
4. From the Data Controls panel, select the collection that represents the view object.
5. Drag the collection onto the page, and from the context menu, choose Table/List View > ADF Table.
6. In the Create Table dialog, select the Generate columns dynamically at runtime checkbox.
7. If you have specified any categories for attributes select the Include Column Groups checkbox in order for the form to organize the display of columns into any checkbox in order for the table to group the columns according to those categories.

When you drop a collection as a dynamic table on a page, the following things happen:

• The page definition is populated with a variableIterator binding, an iterator binding to the iterator, and a tree value binding. See Bindings Created for the Dynamic Form.

• The JSF page is populated with an af:table tag and one or more af:iterator, af:column and af:dynamicComponent tags. In addition, if the Include Column Groups option is selected, af:switcher and af:group tags are added.

When a page with dynamic components is rendered, the bindings are created just as they are when items are dropped from the Data Controls panel at design time, except that they are created at runtime. For more information, see What Happens at Runtime: How Attribute Values Are Dynamically Determined.

You can create a dynamic table that displays master content and includes detailStamp facet that enables a user to display detail for a given record. The detail content is obtained through the dynamic component's bindings to a view link accessor on the master view object. Figure 32-10 shows a part of a dynamic table that contains such a detail facet. For more information on using detailStamp facets in tables, see Adding Hidden Capabilities to a Table in Developing Web User Interfaces with Oracle ADF Faces.

Figure 32-10 Dynamic Table with detailStamp Facet

Description of "Figure 32-10 Dynamic Table with detailStamp Facet"

Before you begin:

It may be helpful to have an understanding of dynamic tables. See Creating a Table with Dynamic Components.

You may also find it helpful to understand other ADF functionality and features. See Additional Functionality for Databound Tables.

You will need to complete these tasks:

1. In the source editor for the JSF page, insert a f:facet tag within the dynamic table's af:table tag.
2. Within the f:facet tag, insert an af:panelFormLayout tag.
3. Within the af:panelFormLayout tag, insert an af:iterator tag.
4. Bind the iterator's value attribute to the attributesModel.getLinkedViewAttributes(LinkedViewName) property of your data object, where LinkedViewName is the name of a view link accessor that accesses the detail content.
5. Within the af:iterator tag, insert an af:dynamicComponent tag.
6. Bind the af:dynamicComponent tag's attributeModel attribute to the value of the af:iterator tag's var attribute.
7. Bind the af:dynamicComponent tag's value attribute to an expression that returns the detail data for the selected row.

<af:table value="#{bindings.EmpVO3.collectionModel}" var="row" id="t1" ...>
  <f:facet name="detailStamp">
    <af:panelForm id="pgl1" layout="vertical">
      <af:iterator id="iter3" var="detail"
           value="#{bindings.EmpVO3.attributesModel.getLinkedViewAttributes('DeptView')}">
        <af:dynamicComponent value="#{row['DeptView'].bindings[detail.name].inputValue}"/> attributeModel="#{detail}" id="dc1"/>
      </af:iterator>
    </af:panelForm>
  </f:facet>
  <af:iterator id="itr1" var="column"
      value="#{bindings.EmpVO3.attributesModel.attributes}">
    <af:column headerText="#{column.label}" id="dcc1">
      <af:dynamicComponent value="#{row.bindings[column.name].inputValue}" attributeModel="#{column}" id="dc1"/>
    </af:column>
  </af:iterator>
</af:table>

1. In the Structure window, select the table component.
2. In the Properties window, expand the Columns section to change, add, or delete the attributes that are displayed as columns. You can also change the UI component used within the column to display the data.
3. Expand other sections of the Properties window to change the display and behavior of the table, such as filtering and sorting.

1. Right-click the table in the Structure window and choose Rebind to Another ADF Control.
2. In the Bind to ADF Control dialog, select the new collection to which you want to bind the table.

   Note that changing the binding for the table will also change the binding for all the columns. You can then use the procedures in How to Modify the Displayed Attributes to modify those bindings.

When you simply modify how an attribute is displayed by moving the UI component or changing the UI component, JDeveloper changes the corresponding code on the JSF page. When you use the binding editors to add or change a binding, JDeveloper adds the code to the JSF page, and also adds the appropriate elements to the page definition file.