background image

Using Data-Bound Table Components

<< The commandButton Tag | The dataTable Tag >>
<< The commandButton Tag | The dataTable Tag >>

Using Data-Bound Table Components

A commandLink tag must include a nested outputText tag, which represents the text the user
clicks to generate the event. The following tag is from the chooselocale.jsp page from the
Duke's Bookstore application.
<h:commandLink id=
"NAmerica" action="bookstore"
actionListener=
"#{localeBean.chooseLocaleFromLink}">
<h:outputText value=
"#{bundle.English}" />
</h:commandLink>
This tag will render the following HTML:
<a id=
"_id3:NAmerica" href="#"
onclick=
"document.forms['_id3']['_id3:NAmerica'].
value=
'_id3:NAmerica';
document.forms[
'_id3'].submit();
return false;
">English</a>
Note ­
The commandLink tag will render JavaScript. If you use this tag, make sure your browser is
JavaScript-enabled.
Using Data-Bound Table Components
Data-bound table components display relational data in a tabular format.
Figure 11­3
shows an
example of this kind of table.
In a JavaServer Faces application, the UIData component supports binding to a collection of
data objects. It does the work of iterating over each record in the data source. The standard
Table
renderer displays the data as an HTML table. The UIColumn component represents a
column of data within the table. Here is a portion of the dataTable tag used by the
bookshowcart.jsp
page of the Duke's Bookstore example:
FIGURE 11­3
Table on the bookshowcart.jsp Page
Adding UI Components to a Page Using the HTML Component Tags
Chapter 11 · Using JavaServer Faces Technology in JSP Pages
337