4-10 Java EE Developers Guide for Oracle Application Development Framework
Figure 4–3 Table with Editable Fields
Figure 4–4 shows the same table, but configured so that the user must double-click or
single-click if the row is already selected a row in order to edit or enter data. Note that outputText
components are used to display the data in the nonselected rows, even though the same input components as in
Figure 4–3 were used to build the page. The
only row that actually renders those components is the row selected for editing.
Figure 4–4 Click to Edit a Row
For more information about how ADF Faces table components handle editing, see the Editing Data in Tables, Trees, and Tree Tables section of the Oracle Fusion Middleware
Web User Interface Developers Guide for Oracle Application Development Framework.
4.3.1 How to Create an Editable Table
To create an editable table, you follow procedures similar to those for creating a basic table, then you add command buttons bound to operations. However, in order for the
table to contain a toolbar, you need to add an ADF Faces component that associates the toolbar with the items in the collection used to build the table.
To create an editable table: 1.
From the Data Controls panel, select the collection to display in the table. For example, to create a simple table in the Suppliers module that will allow you
to edit suppliers in the system, you would select the supplierFindAll accessor collection.
2. Drag the accessor onto a JSF page, and from the context menu, choose ADF Table.
3.
Use the ensuing Edit Table Columns dialog to determine how the attributes should behave and appear as columns in your table. Be sure to select the Row
Selection checkbox, which will allow the user to select the row to edit.
For more information about using this dialog to configure the table, see Section 4.2, Creating a Basic Table.
Creating ADF Databound Tables 4-11
4. With the table selected in the Structure window, expand the Behavior section of
the Property Inspector 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 select Surround
With from the context menu.
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 toolbar facet folder,
and from the context menu, choose Insert inside toolbar Toolbar.
This creates a toolbar that already contains a default menu which 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 the Oracle Fusion Middleware Web User Interface Developers Guide for Oracle Application Development
Framework.
8.
From the Data Controls panel, select the method or operation associated with the collection of objects on which you wish to execute the logic, and drag it onto the
toolbar component in the Structure window. This will place the databound
command component inside the toolbar. For example, if you want to be able to remove a supplier record, you would drag
the removeSuppliersSuppliers method. Figure 4–5
shows the remove methods in the Suppliers module.
Figure 4–5 Operations Associated with a Collection
9. For the context menu, choose Operations ADF Toolbar Button.
