Adding data to a Faces JSP page using data viewing components

You can add data to a Faces JSP page by adding a data viewing component to display application data and then binding the component to a data source.

Before you begin

About this task

There are a few ways to add data to a Faces JSP 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:
- Standard scripting variables that are available to all JSP files:
  - applicationScope enables you to add and modify attributes in the application object
  - param enables you to add and modify attributes to be used in the page object
  - requestScope enables you to add and modify attributes in the request object
  - sessionScope enables you to add and modify attributes in the session object
- Other data objects, depending on the type of file:
  - Faces component
  - Use Beans
    - JavaBean
  - Page Bean
    - J2C JavaBean
    - JavaBean
  - Faces Managed Beans
  - JPA
    - JPA Manager Beans
    - JPA Page Data
  - Services
    - EJB Session bean
    - Web Service
  - RPC Adapter Services
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.

Note: When displaying data on a Web page using the Page Data view RPC adapter node and all of the following facets are installed on the Web project, the generated user interface is made up of Dojo tags.

Dojo Toolkit
Server-side technologies
One or more of the JSF facets

If the displayed data is shown using any Page Data view node other than the RPC adapter node, the user interface that is generated on the Web page is made up of JSF tags.

Once you have added a data component to your Faces JSP 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 Faces JSP page.
Data view component¹	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 attributes	`<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.

¹ Click the link to see the component properties.

Feedback