Formatting Tables Displaying Data in Tables

10-16 Web User Interface Developers Guide for Oracle Application Development Framework

10.2.4 How to Display a Table on a Page

You use the Create an ADF Faces Table dialog to add a table to a JSF page. You also use this dialog to add column components for each column you need for the table. You can also bind the table to the underlying model or bean using EL expressions. Once you complete the dialog, and the table and columns are added to the page, you can use the Property Inspector to configure additional attributes of the table or columns, and add listeners to respond to table events. You must have an implementation of the CollectionModel class to which your table will be bound. To display a table on a page: 1. In the Component Palette, from the Common Components panel, drag and drop a Table to open the Create ADF Faces Table dialog. Use the dialog to bind the table to any existing model you have. When you bind the table to a valid model, the dialog automatically shows the columns that will be created. You can then use the dialog to edit the values for the columns’ header and value attributes, and choose the type of component that will be used to display the data. Alternatively, you can manually configure columns and bind at a later date. For more information about using the dialog, press F1 or click Help. 2. In the Property Inspector, expand the Common section. If you have already bound your table to a model, the value attribute should be set. You can use this section to set the following table-specific attributes: ■ RowSelection : Set a value to make the rows selectable. Valid values are: none, single, and multiple, and multipleNoSelectAll. For information about how to then programatically perform some action on the selected rows, see Section 10.2.8, What You May Need to Know About Performing an Action on Selected Rows in Tables. ■ ColumnSelection : Set a value to make the columns selectable. Valid values are: none, single, and multiple. Tip: While the user can change the way the table displays at runtime for example the user can reorder columns or change column widths, those values will not be retained once the user leaves the page unless you configure your application to allow user customization. For information, see Chapter 31, Allowing User Customization on JSF Pages. Note: If your application uses the Fusion technology stack, then you can use data controls to create tables and the binding will be done for you. For more information see the Creating ADF Databound Tables chapter of the Oracle Fusion Middleware Web User Interface Developers Guide for Oracle Application Development Framework. Note: Users can select all rows and all columns in a table by clicking the column header for the row header if the rowSelection attribute is set to multiple and that table also contains a row header. If you do not want users to be able to select all columns and rows, then set rowSelection to multipleNoSelectAll. Using Tables and Trees 10-17 3. Expand the Columns section. If you previously bound your table using the Create ADF Faces Table dialog, then these settings should be complete. You can use this section to change the binding for the table, to change the variable name used to access data for each row, and to change the display label and components used for each column. 4. Expand the Appearance section. You use this section to set the appearance of the table, by setting the following table-specific attributes: ■ Width : Specify the width of the table. You can specify the width as either a percentage or as a number of pixels. The default setting is 300 pixels. If you configure the table to stretch columns using the columnStretching attribute, you must set the width to percentages. ■ ColumnStretching : If the widths of the columns do not together fill the whole table, you can set this attribute to determine whether or not to stretch columns to fill up the space, and if so, which columns should stretch. Tip: If you want to use a component other than those listed, select any component in the Property Inspector, and then manually change it: 1. In the Structure window, right-click the component created by the dialog. 2. Choose Convert from the context menu. 3. Select the desired component from the list. You can then use the Property Inspector to configure the new component. Tip: If you want more than one component to be displayed in a column, add the other component manually and then wrap them both in a panelGroupLayout component. To do so: 1. In the Structure window, right-click the first component and choose Insert before or Insert after. Select the component to insert. 2. By default the components will be displayed vertically. To have multiple components displayed next to each other in one column, press the shift key and select both components in the Structure window. Right-click the selection and choose Surround With. 3. Select panelGroupLayout. Tip: If the table is a child to a component that stretches its children, then this width setting will be overridden and the table will automatically stretch to fit its container. For more information about how components stretch, see Section 8.2.1, Geometry Management and Component Stretching. Note: If the table is placed inside a component that can stretch its children, only the table will stretch automatically. You must manually configure column stretching if you want the columns to stretch to fill the table. Note: Columns configured to be row headers or configured to be frozen will not be stretched because doing so could easily leave the user unable to access the scrollable body of the table.