Adding data to a JSF page using data viewing components
You can add data to a JSF page by adding a data viewing component to display application data and then binding the component to a data source.
Note: Faces Client data support is no longer available. If your application contains client data components, created in an earlier version of this product, you can still run the page on server; however, you can not update the client data. You can use server side components to update client data.
There are a few ways to add data to a JSF page:
- Drag a component from the Page Data View if the data source has already been defined or use the Page Data View to define the data source. This is the easiest way to create a data table, record list, array, java.lang.Collection, or javax.faces.model.DataModel object. The following data components are available from the Page Data View:
- Scripting Variables: Create and use data from standard scripting variables that are available to all JSP files.
- Relational record: Create and use data from a database record.
- Relational record list: Create and use data from multiple database records.
- JavaBean: Add a new JavaBean or use an existing JavaBean on your Web page.
- Web Service: Insert a Web service onto this page.
- Faces Managed Bean: Add new or existing Faces Managed Beans on your Web page.
- JPA Manager Bean and JPA data: Add JPA data to your Web page and create JPA Manager Beans from existing relational data.
- Service Data Object (SDO): Add data to your Web page.
- EJB Session Bean: Add new or existing EJB Session Beans to your Web page
For more information on the Page Data View, refer to Page Data View.
- Drag a data component from the Data and Services drawer of the Palette to the page then define the data source.
- Drag a data component from the Standard Faces drawer and Enhanced Faces drawer of the Palette to the page. You can then define the appearance of the data component and bind the component to a data source. This method of adding data to a page takes the most time; however, it provides you with the most design flexibility.
Once you have added a data component to your JSF page, configure the properties for the component. To open the Properties view, click
Window | Show View | Properties. For a description of the data component properties, refer to the specific data component listed:
Table 1. Adding data viewing components to a JSF page. Data view component1 Tag Description How is component added to a page? Data iterator
Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:dataIterator> Iterates over rows of data allowing values from each row to be used in its child components. For each row of data available a set of the tag's child components will be rendered. Drag the Data iterator component from the palette onto the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Data table <h:dataTable> Creates a table of data in which the rows correspond to data records and the columns correspond to fields or categories. Features include paging controls, headers and footers, and support for row selection and actions. Refer to Adding and configuring data tables for more information on this data tables.
- Drag the Data table component from the Standard Faces Components of the palette onto the page.
- Drag a data object from the Page data view onto the page.
Note: This component is only available on the Standard Faces Components drawer of the palette.
Data table - extended <hx:dataTableEx> Iterates over rows of data displaying each row in a highly structured table. The extended tag offers additional capabilities over the standard tag such as fixed width columns, scrolling and sorting.
- Drag the Data table component from the Enhanced Faces Components of the palette onto the page.
- Drag a data object from the Page data view onto the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Column <hx:column> Within a data table, defines the structure and content of column of the table. Click Add on the
hx:dataTable tab of the
Properties view for the Data table component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Column Extended <hx:columnEx> Within an extended data table, defines the structure and content of column of the table. Click Add an action that's performed when a row is clicked on the
hx:dataTableEx tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Rows - Inline Edit <hx:commandExRowEdit> Within a data table, defines inline editing of a row of the table. Click Add an edit column that brings up a form for in-place editing of row content on the
Row actions tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Selection <hx:inputRowSelect> Within a data table, defines the ability to perform single or multiple selection within the table. Click Add selection column to the table on the
Row actions tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Pager - Deluxe Style <hx:pagerDeluxe> Within a data table, defines a "deluxe" pager control used to move to other pages of the table. Click Add a deluxe pager on the
Display options tab of the
Properties view for the Data table - extended component.
Table Pager - Goto Style <hx:pagerGoto> Within a data table, defines a "goto style" pager control used to move to other pages of the table. Click Add a goto pager on the
Display options tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Pager - Simple Style <hx:pagerSimple> Within a data table, defines a "simple" pager control used to move to other pages of the table. Click Add a simple pager on the
Display options tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Pager - Web Style <hx:pagerWeb> Within a data table, defines a "web-style" pager control used to move to other pages of the table. Click Add a web style pager on the
Display options tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Row Categorization <hx:panelRowCategory> Within a data table, defines categorization of rows in the table (organizing the rows into collapsible sections). Click Add column to categorize table rows on the
Display options tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Selection - Button Options <hx:outputSelectIcons> Within a data table, defines buttons in the table header used to change the selection in the table.
- Click
Add selection column to the table on the
Row actions tab of the
Properties view for the Data table - extended component.
- Click
Add selection toolbar in the
hx:inputRowSelect tab of the
Properties view.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Selection - Menu Options <hx:outputSelectMenu> Within a data table, defines a menu in the table header used to change the selection in the table.
- Click
Add selection column to the table on the
Row actions tab of the
Properties view for the Data table - extended component.
- Click
Add selection combo box in the
hx:inputRowSelect tab of the
Properties view.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Column Sorting <hx:sortHeader> Within a data table, defines which columns support resorting the table based on the column content.
- In the
Page Design view, click the column header.
- In the
hx:columnEx tab of the
Properties view, select a sort order from the
Sort order list.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Table Statistics <hx:outputStatistics> Within a data table, defines the summary information (for example, row count) to be displayed. Click Add page information on the
Display options tab of the
Properties view for the Data table - extended component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Chart <odc:graphDraw> Displays data as a chart. Drag the Chart component from the Palette onto the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Graph Data <odc:graphDrawData> Displays data as a graph. This tag is automatically added to the page when the Chart component is added to the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Graph Data Series <odc:graphDrawDataSeries> Displays a series of data. Click Add Series on the
Y-axis values tab of the
Properties view for the Chart component.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Graph Labels <odc:graphDrawLabels> Displays the values on the x-axis. This tag is automatically added to the page when the Chart component is added to the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Data Tree <odc:tree> Displays data as a tree. Drag the Data Tree component from the Palette onto the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Tree Node <odc:treeNodeAttr> Displays data as a tree. This tag is automatically added to the page when the Data Tree component is added to the page.
Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Related concepts
1 Click the link to see the component properties.