Introduction to JavaServer Faces data templates

Learn how to use and customize the templates for easier control over what your Web pages include and how they look

Generating JavaServer Faces (JSF) controls based on your existing JavaBeans or other data sources is quick and easy. This article explains how to use the data templates that are included with IBM Rational Application Developer, Version 7.5.4 or later, which give you greater control over which controls are generated and how the resulting page will look.

IBM® Rational® Application Developer Version 7.5.4 makes it easy to create JavaServer™ Faces (JSF) controls based on your existing JavaBeans™ or other data sources. After your data is registered in the Page Data view, you can drag the data onto a Faces page, where you can use a wizard to select the types of controls that you would like to put on the page (Input Text fields, Output Text fields, Combo Boxes, Data Tables, and such). After you make your selections, Rational Application Developer creates these controls on the page for you. In addition, the controls will be automatically bound to your data.

Data templates give you the ability to control the options that appear in this wizard. You can edit the existing options to change the styleClass attribute on all Check Box tags, for example, or add a minimum and a maximum length to all Input Text controls. You can also remove any of the existing template options, add your own templates, or share templates across your team or organization.


Start by creating a Web project, creating a Faces JavaServer Page (JSP), and importing the JavaBeans that will be used.

Create a Web project:

  1. Select File > New > Project > Dynamic Web Project from the menu.

In the New Project wizard (see Figure 1):

  1. Enter Employee for the project name.
  2. Select the JavaServer Faces IBM Enhanced Project configuration.
  3. Click Finish.
Figure 1. New Web project
Completed web project wizard

Create a Web page:

  1. Right-click the project name in the Enterprise Explorer.
  2. Select New > Web Page from the drop-down menu.
  3. In the File Name field of the New Web Page wizard, enter viewEmployee for the page name (see Figure 2).
  4. Click Finish.
Figure 2. New Web page
Completed web page wizard

Import the JavaBeans:

  1. Download the file (see Downloads for this file), and save it to your computer.
  2. Under Employee, expand Java Resources in the Enterprise Explorer.
  3. Right-click on src, and select Import.
  4. In the Import wizard, select General > Archive file and then click Next.
  5. Browse to the location of the file.
  6. Click Finish.

Add the TestEmployee bean to the Page Data view:

  1. In Page Data view, right-click on Page Bean.
  2. Select New > JavaBean.
  3. In the Add JavaBean wizard, enter emp for the name and com.MyCompany.TestEmployee for the class.
  4. Click Finish.
Figure 3. Add a Java bean
Completed JavaBean wizard

Add a method to the bean:

  1. In the Page Data view, right-click on emp (com.MyCompany.TestEmployee).
  2. Select Add new JavaBean Method.
  3. In the Select Method screen, select employeeInfo (String).
  4. Click OK.
Figure 4. Add a method
Select method dialog

Page Data view overview

Examine the bean in the Page Data view:

  1. In the Page Data view, expand emp (com.MyCompany.TestEmployee) and employee (com.MyCompany.Employee).

This is a simple bean that represents an employee of a company. It contains information about the employee, such as her name, date of birth, status as an active employee, employee identification number, and the jobs that she has held in the company. There is also a method that will return basic information about the employee (her name and ID).

Drag the bean to the page:

  1. In the Page Data view, select emp, drag it to the Web page and then release the mouse button.

An Insert JavaBeans wizard will appear. This wizard contains options for laying out controls on the page. These controls will be bound to fields in the TestEmployee bean.

  1. Click the Displaying data (read only) radio button.

Look at the information under "Fields to display." You'll see that for the employee.Name property, which is a string, the default control to be generated is Display Text.

  1. Click the down-arrowicon next to Display Text to see other options.

Rather than Display Text, you could choose a Formatted Text control. For employee.dob, which is a date, the only option is a Display Date control. For employee.positionsHeld, which is an array, the options are Data Table with Multiple Columns, Data Table with a Single Column, and Data Table with an Unformatted Single Column.

Because you selected the "Displaying data" radio button, the options shown under "Fields to display" will be Output fields for displaying read-only data.

  1. Click the Inputting data radio button to see options for editing the data.

You will see that, rather than a Display Text control for the employee.Name field, now the selection has changed to an Input Text field.

Click the down-arrow icon next to Input Text to see other options. For example, you could choose a Combo Box, Display Text, Formatted Text, or an Input Text Area control. Selecting the "Inputting data" radio button enables options for both Input and Output controls.

Next, you're going to look at employee information but not modify it in your page.

  1. Change the radio button to Displaying data (Figure 5)
  2. Uncheck the Invoking a Method box
  3. Click Finish.
Figure 5. Insert JavaBeans wizard
Insert JavaBean wizard with display data controls

Check what you've added to the page

Look at what was added to the page. The page now contains an HTML table with four Output Text controls (for the employee's name, birth date, employment status, and ID), as well as a Data Table that lists the employee's past positions. Each of these controls is bound to a property of the TestEmployee bean. For example, the name Output Text is bound to the name property, as evidenced by its value attribute: value="#{}" Without writing any code yourself, you've created a page with JavaServer Faces controls that represent your employee data (see Figure 6).

Figure 6. Resulting controls
HTML table with display controls

Add a field to provide more information

Now, add a field to return the employee's information.

  1. In the Page Data view, expand employeeInfo().
  2. Select doEmployeeInfoAction(), drag it to the Web page below the other controls and release the mouse.

A button will be added to the page with an action attribute that matches this method:

This button won't do much for you here, but in a real application the employeeInfo() method could be used to collect basic information about an employee.

But what if you didn't want these particular JavaServer Faces controls to be generated? What if you want to see different options in the wizard? Next, you learn how to customize the wizard options with JavaServer Faces data templates.

Examine the JavaServer Faces data templates

  1. In Page Data view, select emp and drag it to the page after the button.

When the Insert JavaBeans wizard appears, notice that there is a link that says "Configure Control Types" next to the All, None, and Options buttons.

  1. Click the Configure Control Types link.

It will open the Preferences dialog, which contains options for modifying the behavior of Rational Application Developer. The Preferences dialog will open to the Data Templates page (Figure 7).

Figure 7. Preferences screen
Data templates preferences page

There are four pages in the Preferences dialog that deal with JavaServer Faces data templates, and these templates determine the options that are shown in the Insert JavaBeans wizard:

  • Generation templates
  • Data templates
  • Iterative templates
  • Method templates

Templates contain static text, such as the name of the tag to be added, as well as variables. These variables are items that will be dynamically computed when the template is used. Variables, which begin with ${ and end with }, allow us to do things such as bind a control to a specific piece of data (such as the employee's name), to ensure that the control's Id is unique on the page, to create a label for a control, and so forth. These templates are similar to other Eclipse templates, such as those found in the Preferences dialog under Java > Editor > Templates. Although the examples in this article deal only with page beans, these templates are used for all types of data that appear in the Page Data view, such as Faces managed beans, Java Persistence API (JPA), Web Services, and so on.

Let's get a general idea of what's on each of the JavaServer Faces data templates Preferences pages:

  • The Generations Templates page contains a single check box labeled "Use old page generation framework." Checking this box would disable all of the templates in the other JavaServer Faces template pages, so we'll leave it unchecked.
  • The Data Templates page contains simple templates such as those for Input Text or Output Text tags; these templates are used with a single piece of data, such as an integer or a string. We'll take a closer look at what a template is and how to use this page later.
  • The IterativeTemplates page contains more complex templates, such as the Data Tables template. Data table controls are more complex, because they contain multiple child controls, such as Columns. Data tables are bound to multipart pieces of data, such as arrays or lists.
  • Method templates are used for command buttons. They are bound to methods, such as the employeeInfo() method.

Anatomy of a template

Let's quickly examine a single template and learn about its most important parts.

  1. Click the Data Templates page.
  2. Click the first template in the list to select it (see Figure 8).
Figure 8. Output text for boolean template
Data templates page with display text selected

The template's name, Display Text, is the label that is shown in the wizard. The Data Type, boolean, indicates the type of data that this template works with. Now look at the Preview section of this dialog. This shows the actual content of the template:

<${h}:outputText styleClass="outputText" id="${id}" value="#{${value}}">

Looking at the pattern, you can see that this template will generate a standard JavaServer Faces Output Text tag. The pattern or content of the template contains some special characters, for example: ${}. These characters surround template variables. Variables are pieces of the template that will be dynamically computed when the template is used. The result of a variable will depend on the piece of data that the template is being used with, as well as the page that the template is used on.

For example, the ID of a tag should be unique, and the value attribute of a tag should be bound to a piece of data in Page Data view. To accomplish these things, id and value are variables. The third variable used in this template, ${h}, is a Tag Library variable. Tag Library variables indicate that a particular URI, such as <%@taglib uri="" prefix="h"%> should be added to the page if it is not already present. Tag Library variables can also copy JAR files and other resources, such as style sheets, into the project, if necessary. We'll discuss other variables as we go along, and there is also a reference table at the end of this article that lists all template variables and gives examples of uses for them. Variables can be mixed and matched to create the appropriate combination for your particular tag.

Data Templates page

Let's take a closer look at the Data Templates page. You might notice that some templates seem to appear twice. For example, there are two templates with the name Display Text and the data type of boolean. This is because Rational Application Developer has two different sets of templates: one for JavaServer Faces IBM-Enhanced projects and one for standard JavaServer Faces projects. Because we selected the JavaServer Faces IBM- Enhanced configuration when we created our Web project, which automatically installs the JavaServer Faces (IBM-Enhanced) project facet, we're going to be using the Enhanced facet set.

Change the filter so that you're looking only at the Enhanced template set.

  1. Find the Show combo box, which is currently set to "All templates."
  2. Change it to Enhanced templates.

You'll see that the table of templates automatically changes so that fewer templates are shown. Now you'll only see one template labeled Display Text with the boolean data type.

To understand what this table is showing, find a template that you used before for your employee. The activeEmployee field in the test is a java.lang.Boolean (not a primitive boolean). In the Insert JavaBean wizard, you were shown one choice when the "Display data" radio button was selected: Display Text. To locate this particular template, you could either look through the table of templates to find a matching the name and data type, or you could search for it:

  1. Find the Filter field.
  2. Type Boolean.

This shows four templates: Display Text for boolean, Check Box for boolean, Display Text for java.lang.Boolean and Check Box for java.lang.Boolean. Narrow this list further:

  1. Type java.lang.Boolean in the Filter search field.

We could also have searched for a particular template by name, such as Combo Box. Now you'll see only two choices:

  • Display Text for java.lang.Boolean
  • Check Box for java.lang.Boolean
  1. Click Display Text for java.lang.Boolean.
Figure 9. Filtered templates
Page with java.lang.Boolean templates

Let's examine what the Preferences page is telling you about this template. You already know its name and data type. This template also has a check box that is checked, which means that the template is active. If the box were unchecked, then the template would be inactive, so it would not be offered as an option in the Insert JavaBeans wizard. The fourth column of the table does not have an icon, but the Check Box template does. The absence of this icon indicates that the Display Text template is not an input template; it will be shown in the wizard when the "Displaying data" radio button is selected. The Check Box template is an input template, so it will be shown only when the "Inputting data" radio button is selected. The Check Box template is also shown in a bold font. This means that it will be the default template for the java.lang.Boolean data type. When the "Inputting data" radio button is selected, Check Box will be at the top of the control types list.

Below the table is a preview area that shows the content of this template. Next to the word Preview is a brief description of this template: Display Text for Booleans. You'll also see this content:

<${h}:outputText styleClass="outputText" id="${id}" value="#{${value}}">

When you used this template for your activeEmployee field, it generated this:

<h:outputText styleClass="outputText" id="activeEmployee1" 

You'll see that the template contains these variables:

  • ${h} – The tag library variable for the standard JavaServer Faces tag library. This is used twice: once to open the outputText tag and again to close it.
  • ${id} – This ensures that the tag's ID is unique on the page.
  • ${value} – The value binds the tag to the data in PDV.

When you used this template, the ${h} variable was replaced with h (lowercase letter "h"). This variable was also a signal to Rational Application Developer to ensure that the <%@taglib uri="" prefix="h"%> tag was placed on the page. The ${id} variable was replaced by activeEmployee1 (the name of your data plus a unique identifier). The ${value} variable was replaced by pc_ViewEmployee.emp.employee.activeEmployee.

Editing a template

One of the main advantages of templates is that they can be easily changed. What if you wanted to distinguish the activeEmployee field on the page by making its font italic? Let's edit the template and make this change.

  1. Click the template labeled Display Text.
  2. Click the button labeled Edit to get the Edit Template view (Figure 10).
Figure 10. Edit Template screen
Edit dialog for display text template

The Edit Template dialog screen contains information specific to this particular template, including the template's name, the template's class shown as Data Type on the Data Templates page), whether the template is the default template for its class (indicated by the use of a bold font on the Data Templates page), whether the template is an input template (input templates have an input icon on the Data Templates page), the template's description, and its pattern or content. If you click the Insert Variable button, you'll see all of the available template variables. Some of these are already used in the template, such as id and value. Others, such as label and odc (the odc tag library variable), are not used, because they are not needed for the Output Text tag.

Next, you're going to modify the pattern to add the style attribute to this template and set the style attribute's value to style="font-style: italic".

  1. In the Pattern field, after the value, type this: style="font-style: italic"

You should end up with this result:

<${h}:outputText styleClass="outputText" id="${id}"
value="#{${value}}" style="font-style: italic"> 
  1. Click OK to close this screen and save your changes.

Back on the Data Templates page, look at the Preview area. You will see that it shows your updated template. This template now has an Edit icon next to it in the table (pencil icon, shown in Figure 11). This means that your template has been changed from its original form.

The Check Box template, which has not been edited, does not have this icon. You will also see that the Revert to Default icon is now active for the Display Text template. If you decide that you want to delete all changes that you've made to a particular template, simply click that button. But for now, keep the italic font.

Figure 11. Edited Output Text template
Data template page showing edited template
  1. Click OK to close the Preferences dialog.

Let's look at your changes. You changed only one template; therefore, you're going to use only that template.

The Insert JavaBean dialog screen will still be showing. But because you changed only your java.lang.Boolean template, just generate controls for the activeEmployee field.

  1. Click Cancel in the Insert JavaBeans wizard.
  2. In Page Data view, expand emp and employee.
  3. Click activeEmployee and drag it to the page next to the Command button.

The Insert JavaBeans dialog will appear.

  1. Ensure that the Displaying data radio button is selected, and click Finish.
  2. Save the page.

An HTML table will have been added to your page, along with an Output Text that is bound to activeEmployee. The font of this control will be italic, as this result and Figure 12 show:

<h:outputText styleClass="outputText" 
id="activeEmployee2" value="#{pc_ViewEmployee.emp.employee.activeEmployee}" 
style="font-style: italic">
Figure 12. Output text with italic font
HTML table with outputText control

By changing a template, you can ensure that all Output Text controls for java.lang.Boolean files use the italic font. You made a change in one place, but you'll be able to use it again and again.

Finding templates

Now, find the other templates that were used to create controls for your TestEmployee bean. This time, open the Preferences page yourself.

  1. Select the Window menu and then select Preferences.

Given that you were last on the Data templates Preferences page, the Preferences dialog will open with that page displayed. If it does not, or you want to find this page in the future, expand Web > JavaServer Faces Tools > Generation Templates > Data Templates.

Now find the control used for EmployeeId.

EmployeeId is an integer (java.lang.Integer). If you look through the table or type Integer into the Filter field, you'll see that there aren't any templates that are registered to java.lang.Integer. So which template was used? If you cannot find an exact match for a class, the supertype for the class will be checked (if an exact match cannot be found for a primitive type, such as int, templates registered to "primitive" will be used). The supertype of java.lang.Integer is java.lang.Number. There are templates registered to java.lang.Number (type this in the Filter field to see them), so you know that those templates correspond to the options displayed in the wizard.

Next, find the control used for Name.

Name is a string (java.lang.String). There aren't any templates directly registered to string, either, so check the supertype of String: java.lang.Object. There are templates for java.lang.Object, so these templates were shown as options for Name. In this example, we selected Display Text for java.lang.Object in the wizard.

Let's find the control used for Dob (date of birth).

Dob is a date (java.util.Date). There are templates registered to java.util.Date, so these templates were shown as options for Dob. We selected Display Date for java.lang.Object in the wizard, and this generated an Output Text control with a Date/Time converter.

Position[] is a more complex template, so to examine this further , you'll need to look at the Iterative Templates page.

Iterative templates

Let's find the Data Table template used for Positions[].

  1. Click Iterative Templates in the Preferences dialog.

The Iterative Templates page contains more complex templates, such as those used to construct Data Table tags.

No template on this page is specifically registered to Position[], so you'll need to start by looking up the class hierarchy. The supertype of com.MyCompany.Position is java.lang.Object, so the templates for java.lang.Object[] were used for com.MyCompany.Position[].

  1. Type Object[] in the Filter box.

In the wizard, we selected Data Table with multiple columns, so let's look at that.

  1. Click Data Table with multiple columns for java.lang.Object[] (see Figure 13).
Figure 13. Iterative templates
Iterative templates preferences page

One of the first things that you'll notice is that this template has two preview areas. This is because templates on the Iterative Templates page consist of two parts: the Wrapper template and the Iterative template. The Wrapper template is the outside part of the template. It's going to generate a JavaServer Faces Data Table tag. The wrapper template encloses the iterative template.

The iterative template nests inside of the wrapper template. Here, you're going to generate a JavaServer Faces Column tag inside of the Data Table. But as you saw on the JSP, there will be one Iterative template used for each property of the Object[]. Postion[] had three properties: PositionCode, Title, and PayrollCode, so the Data Table had three columns (one for each property).

Because Wrapper and Iterative templates are intended for more complex uses, they have their own sets of variables. Let's look at these.

Click Edit to get the Edit Template screen.

Figure 14. Editing an iterative template
Edit template dialog for data table template
  1. Click the Insert Variable button below the Wrapper pattern.

Some of the variables that appear should be familiar, such as the Tag Library variables, id and value. Others are unique to Wrapper templates. The iterativeTemplate variable is used to position the iterative templates within the Wrapper template. The template here places the iterativeTemplate variable inside of the Data Table tags, because this is where the columns of a Data Table should go. Another unique variable is var. This is used for controls such as Data Table that use an additional reference attribute for their data binding (in the case of the Data Table, child controls will usually use the var attibute's value in their value strings).

  1. Click the Insert Variable button below the Iterative pattern.

Again, some of these variables will be familiar. One variable that is unique to iterative templates is propertyTemplate. Every template shown on the Data templates Preferences page is actually a Property template. The propertyTemplate variable is used to locate the property template within the iterative template (for example, to position the Output Text tag inside the Column tag).

Take a look at the nesting of all three types of templates:

  • Wrapper templates surround Iterative templates.
  • Iterative templates surround Property templates.

This is what that looks like in the Employee example:

<Data Table bound to PositionsHeld>
	<Column for PositionCode>
		<Output Text bound to PositionCode></Output Text>
	<Column for Title>
		<Output Text bound to Title></Output Text>
	<Column for PayrollCode>
		<Output Text bound to PayrollCode></Output Text>
</Data Table>

If you were to make a change to the Wrapper template, it would affect only the Data Table, which appears once. If you were to make a change to the Iterative template, it would affect each of the three columns. Try this by editing both a Wrapper and an Iterative template to see how it works.

Edit an Iterative template

You'll give the Data Table a larger border and make the background color of the column's label blue.

To increase the border of the Data Table, you'll change the border of the Data Table tag from 0 to 10.

  1. In the Preview area of the Wrapper template, scroll to the right until you find border="0".
  2. Change this to border="10".

Now you'll update the Column tag. The Column contains a Header facet, and inside of this is an Output Text tag that is used to label the column.

  1. In the Preview area of the Iterative template, just after the outputText's ID, type style="background-color: #0080ff" .

You should end up with this code:

<${hx}:columnEx id="${id}column">
	<${f}:facet name="header">
		<${h}:outputText styleClass="outputText" value="${label}" 
        id="${id}text" style="background-color: 
  1. Click OK to close the Edit dialog.
  2. Click OK to close the Preferences dialog.
  1. In Page Data view, expand emp and employee.
  2. Click positionsHeld and drag it to the page, just after the other controls.

This time, you will see a slightly different wizard view. Because you're generating only controls for Position[], the wizard automatically shows only options relevant to the array.

  1. In the combo box at the top, select Data Table with multiple columns.
  2. Click Finish.
  3. Save the page.

As Figure 15 shows, you'll see a new Data Table, with a larger border and blue labels.

Figure 15. Data Table
Data table with blue labels

Method templates

This time, look at the fourth JavaServer Faces Generation templates Preferences page: Method templates.

  1. Select Window > Preferences.

You were last on the Iterative templates Preferences page, so the Preferences dialog will open with that page displayed. If it does not, or you want to find this page in the future, expand Web > JavaServer Faces Tools > Generation Templates > Iterative Templates.

  1. Click Method Templates. (Figure 16).

The Method Templates page contains templates are used for actions in Page Data view. The Button template that you see was used to generate the Command Button that is bound to the employeeInfo method.

  1. Select the Button template.
  2. Click Edit.
Figure 16. Button template
Edit dialog and preference page for button

You can use the Edit Template page to edit the template's content, just as you did for the Data Table and Output Text before. If you click Insert Variables, you will see the same variables as shown in the Edit dialog for your Output Text for java.lang.Boolean template. This is because Method templates are actually Property templates, just as Data templates are Property templates.

  1. Click Cancel to close this dialog.

Create a new template

Let's assume that, in the future, you'll need to enter information about new company employees rather than just view information about existing employees. One piece of information that you'll need to gather is the birth date of each person. Create an Input Text control that has a Date Picker attached to it. You need to end up with a tag that looks something like this:

<h:inputText styleClass="inputText" id="text1" 
value="#{}" size="45"> <hx:convertDateTime 
dateStyle="full" />
	<hx:inputHelperDatePicker id="datePicker1" />

Now, make your new template.

  1. Select Data Templates and then New.
  2. Enter this information:
  • Name: Input Date Picker
  • Class: java.util.Date
  • Leave "Default template for this class" unchecked.
  • Check "Use for Input"
  • Description: An Input Text control with a date/time converter and a date picker
  1. Paste this in for the pattern:
	<${h}:inputText styleClass="inputText" id="${id}" value="#{${value}}" size="45">
		<${hx}:convertDateTime dateStyle="full" />
		<${hx}:inputHelperDatePicker id="${id}datePicker" />

With templates, you can either type in the variables yourself (making sure to surround them with ${}) or click Insert Variables and then select from the list (see Figure 17).

Figure 17. New template
Completed new template dialog
  1. Click Ok to save this template.

Back on the Data Templates page, the filter at the top has automatically switched to show the custom templates. Because this is a new template that you created yourself, it will not appear in the Enhanced Templates list. The Custom Templates list also includes the Display Text for java.lang.Boolean template that you edited earlier.

  1. Click OK to exit the Preferences window..
  2. In the Page Data view, expand emp and employee.
  3. Click dob, and drag it to the page just after the second Data Table.
  4. In the Insert JavaBeans screen, select the Inputting data radio button.
  5. Click the down-arrow icon in the Control Type column and find your Input Date Picker template.
  6. Select it and click Finish.
  7. Save the page.

A new HTML table will be generated with your new control:

<h:inputText styleClass="inputText" id="dob2" 
value="#{pc_ViewEmployee.emp.employee.dob}" size="45">
<hx:convertDateTime dateStyle="full" />
	<hx:inputHelperDatePicker id="dob2datePicker" />

You have successfully created a brand new template and used it on your page.

Sharing, disabling, and deleting templates

Suppose that you want to share your new template with our colleagues. Let's look at how to import and export templates.

  1. Launch the Preferences view, and go to the Data Templates page.

Notice on the right that there are buttons labeled Import and Export.

  1. Select your Input Date Picker template
  2. Click Export.

This launches a dialog that asks where you would like to save the exported template.

  1. Click Cancel.

If you did want to export the template, we could then send it to a colleague who could use it by clicking Import.

What if the Insert JavaBeans wizard contains templates that you don't want to ever use? Templates can be temporarily disabled or permanently deleted. To disable a template, uncheck the box next to it. For example, you could select your new Input Date Picker template, and uncheck it. If you were to then drag and drop dob to the page, the Input Date Picker template would not appear in the wizard.

If, instead, you wanted to permanently delete the template, you could click the Remove button. For templates included with Rational Application Developer, it is possible to undo this deletion by clicking Restore Removed. However, clicking this will not restore user-created templates, such as your Input Date Picker template, so do not to remove these unless you're sure that you'll never use them again.

Given that you don't want to delete or disable any templates, cancel out of this dialog:

  1. Click Cancel to close the Preferences dialog.

Variable reference:

Here's a reference to the available template variables. In addition to the variables shown in the tables below, each template can also use Tag Library variables. The list of Tag Library variables will vary depending on the Libraries available to your project.

Table 1. Property template variables

Property template variables are shown on the Data Template page and the Method Template page.

VariableDescriptionResult exampleReference template
actionAction to be run#{pc_ViewEmployee.
idUnique identifier for the controlname1Display Text for java.lang.Object
labelLabel for the controlMyByteArray:Link for byte[]
valueData bindingpc_ViewEmployee.emp.employee.nameDisplay Text for java.lang.Object

Table 2. Wrapper template variables

Wrapper template variables are shown on the Iterative Templates page.

VariableDescriptionResult exampleReference template
idUnique identifier for the controlpositionsHeld1Data table with multiple columns for java.lang.Object[]
iterativeTemplateRepeating template. This variable should only be used once.<hx:columnEx id="positionCode1column"><f:facet name="header"><h:outputText styleClass="outputText" value="PositionCode"id="positionCode1text"></h:outputText> </f:facet> <h:outputText styleClass="outputText" id="positionCode1" value="#{varpositionsHeld.positionCode}"><hx:convertNumber /> </h:outputText></hx:columnEx>Data table with multiple columns java.lang.Object[]
labelLabel for the controlPositionsHeld:Data Table with a single column for java.lang.Object[]
valueData bindingpc_Test.emp.employee.positionsHeldData Table with multiple columns for java.lang.Object[]
varRepeating data bindingvarpositionsHeldData Table with multiple columns for java.lang.Object[]

Table 3. Iterative template variables

Iterative template variables are shown on the Iterative Templates page.

VariableDescriptionResult exampleReference template
idUnique identifier for the controlpositionCode1Data Table with multiple columns java.lang.Object[]
labelLabel for the controlPositionCodeData Table with multiple columns java.lang.Object[]
propertyTemplateChild template. This variable should only be used once. <h:outputText styleClass="outputText" id="positionCode1" value="#{varpositionsHeld.positionCode}"> <hx:convertNumber /> </h:outputText>Data Table with multiple columns java.lang.Object[]
spaceNon-breaking space&nbsp;Data Table with a single column for java.lang.Object[]

Summary of what you have learned

In this article, you've seen how to use data templates by dragging data from the Page Data view onto the page and then learned how to locate these templates in the Preferences dialog. You've examined the various options available for customizing and sharing templates, edited templates, and even created your own template. With this knowledge, you are now prepared to create templates that are uniquely suited to you and your organization.


Sample Employee data for this articleEmployee.zip2KB



Get products and technologies



developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Dig deeper into Rational software on developerWorks

ArticleTitle=Introduction to JavaServer Faces data templates