IBM® Faces components are part of the JavaServer™ Faces Widget Library (JWL). They allow you to build a Web application with rich components to display complex arrangements of data. The resulting application has no footprint, because it uses only HTML, CSS, and JavaScript™. The IBM Faces components are an extension of JavaServer Faces (JSR 127). The IBM® Rational® Application Developer Version 7.0 tooling allows rapid application development with these components by using drag-and-drop operations. The dataTable component allows the user to display tabular data of any type, including text, images, combination boxes, and more. This article explains how to create an application with a JWL dataTable and how to use the new features introduced for the dataTable in Rational Application Developer V7.0.

Create an application

The following steps explain how to create a Web application with a JSF dataTable

Create a new dynamic Web project in Rational Application Developer

1. In the File menu, click New > Dynamic Web Project.
2. Enter a project name, such as MyProject in the Project Name box.
3. Choose a Target Runtime of IBM® WebSphere® Application Server V6.1.
4. In the Configurations context menu, choose Faces Project.
5. Click Add Project to an EAR and enter an EAR file name that is the same as the project name that you just entered, but with EAR appended. For example: MyProjectEAR.
6. Click Next.
7. Ensure that Base Faces Support, Enhanced Faces Components, and JSTL are active.
8. Click Finish to create the dynamic Web project.
9. A WebDiagram.gph file opens by default.
10. Close this file, because you are not going to use this feature now.

Create a new JavaServer Page

1. In the new project, right-click the Web Content folder and select New Web Page.
2. Enter a name for the page in the File Name box.
3. Click Finish to add the JavaServer Page™ (JSP) to the dynamic Web project.

Import the Java bean to use as your data source

1. Download the SampleModel.zip file at the end of this article (see Resources).
2. This .zip file contains sample JavaBeans™ with data that you will use to display in the dataTable.
3. In the Import box, enter Archive in the Select an Import Source box. This should filter the list below that box to contain only Archive file.
4. Click Archive file, and then click Next.
5. Click the top Browse button to locate the SampleModel.zip file that you just downloaded.
6. Make sure that all of the folders that appear in the left pane are selected.
7. Click the bottom Browse button to choose the folder that you want to import the files into.
8. Select the src folder in your project.
9. Click Finish to import the JavaBeans into your project.
10. The classes available to your application are structured as Figure 1 shows.

Create page data

You can now create page data to use in your project from the JavaBeans that you just imported. You will create page data using Root.java from the samplemodel.zip file as the root class of your page data.

1. In the Page Data view, right-click Page Bean and select New > JavaBean.
2. Type a name for the bean in the Name box, in this case: mybean.
3. Click the button beside the Class box and type in the name of the root class. For this example, type Root.
4. Click Finish to create the page data.

Add a dataTable to the page

1. In the Page Data view, expand the mybean root node.
2. Select the Stocks array, and drag it onto the JSP. This will create a dataTable on the page that will display the content of the Stocks array.
3. A dialog box will give you the option to configure which columns are displayed.
4. Click Finish to accept the default dataTable settings.
5. The Rational Application Developer tooling will create a dataTable on the JSP that displays the columns of the Stock array.
6. Switch to the Source view of your JSP.

The dataTable source should look like code Listing 1.

 
<hx:dataTableEx id="tableEx1" value="#{pc_File1.mybean.stocks}"
			var="varstocks" styleClass="dataTableEx" headerClass="headerClass"
			footerClass="footerClass" rowClasses="rowClass1, rowClass2"
			columnClasses="columnClass1" border="0" cellpadding="2"
			cellspacing="0">
			<hx:columnEx id="columnEx1">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Change" 
					id="text1"></h:outputText>
				</f:facet>
				<h:outputText id="textChange1" value="#{varstocks.change}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx2">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="CurrentPrice"
						id="text2"></h:outputText>
				</f:facet>
				<h:outputText id="textCurrentPrice1"
					value="#{varstocks.currentPrice}" styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx3">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Symbol" 
					id="text3"></h:outputText>
				</f:facet>
				<h:outputText id="textSymbol1" value="#{varstocks.symbol}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx4">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Volume" 
					id="text4"></h:outputText>
				</f:facet>
				<h:outputText id="textVolume1" value="#{varstocks.volume}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx5">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Percentage" 
					id="text5"></h:outputText>
				</f:facet>
				<h:outputText id="textPercentage1" value="#{varstocks.percentage}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
		</hx:dataTableEx>

Run your dataTable on the server

1. Save all of the changes that you have made to your project.
2. Choose Clean from the Project menu in the toolbar.
3. Within the Servers tab, start the IBM® WebSphere® Application Server V6.1 application by clicking the green Start the Server icon.
4. In the Project Explorer view, right-click the JSP file that you just developed in the WebContent folder, and then choose Run As > Run on Server.
5. In the context manu, select WebSphere Application Server V6.1, and then click Finish.
6. The JSP will run in the internal browser in the Rational Application Developer tool, as Figure 2 shows.

Back to top

Add a Deluxe Pager with new features

The Deluxe Pager is not a new component for the dataTable, but more features have been introduced in Rational Application Developer V7.0.

Add a <hx:deluxePager> tag

1. Go back to the Design view for your JSP.
2. Click your dataTable to select it.
3. Choose the Rational Application Developer Properties view to see the dataTable's properties.
4. Click the Display options tab, which is a sub-tab of the hx:dataTableEx tab.
5. In the Rows per page text field, enter 2, so that you will have a need for a pager.
6. Next, click Add a deluxe pager.
7. This will create a footer for the dataTable and add the Deluxe Pager in the dataTable's footer.

The Deluxe Pager tag and footer added to the dataTable will look like Listing 2.

 
	   <f:facet name="footer">
			<hx:panelBox id="box1" styleClass="panelBox">
				<hx:pagerDeluxe id="deluxe1" styleClass="pagerDeluxe" />
			</hx:panelBox>
		</f:facet>

Now, when you run the JSP page on server, the dataTable will use the default Deluxe Pager, as Figure 3 shows. Also see Table 1 for a list of the new attributes of the Deluxe Pager tag.

You can set these new attributes manually in the JSP source view..

1. Go back to the Design view for your JSP.
2. Select the Deluxe Pager.
3. Choose the Rational Application Developer Properties view to see the Deluxe Pager's properties.
4. On the hx:pagerDeluxe tab in the Properties view, there are two check boxes to select to turn on these new features:
1. Check the box beside Hide 'First' and 'Last' buttons to set showOnlyNextPrevious to Hide 'First' and 'Last' buttons to true.
2. Check the box beside Hide disabled buttons to set hideDisabledButtons to true.

Note: Alternatively, you can set the new features in the tooling provided with Rational Application Developer V7.0 by following these steps:

1. Go to the Source view for your JSP.
2. Locate the <hx:pagerDeluxe> tag.
3. Add an attribute of showOnlyNextPrevious="true" to the tag.
4. Add an attribute of hideDisabledButtons="true" to the tag.

When you run your dataTable on the server, the resulting dataTable looks like the one shown in Figure 4. The "first" and "last" buttons are not shown, because you specified that you want to show only the next and previous buttons. However, the previous button doesn't show either, because you are on the first page of the table, where the previous button is normally disabled, and you chose to hide disabled buttons.

Back to top

Add the new features in Output Statistics

Output Statistics is not a new component for the dataTable, but it offers more features starting with Rational Application Developer V7.0.

Add a <hx:outputStatistics> tag

1. Go back to the Design view for your JSP.
2. Click on your dataTable to select it.
3. Choose the Rational Application Developer Properties view to see the dataTable's properties.
4. Click the Display options tab, which is a sub-tab of the hx:dataTableEx tab.
5. Select Add page information. This adds the Output Statistics beside the Deluxe Pager in the dataTable's footer.

The code that adds the Output Statistics tag to the dataTable footer looks like Listing 3.

 
		<hx:outputStatistics id="statistics1" styleClass="outputStatistics">
		</hx:outputStatistics>

When you run the JSP page on server now, the dataTable uses the default Output Statistics. By default , the Output Statistics provides only paging information and information about the number of rows selected. Because row selection is not turned on, the example in Figure 5 displays only paging information.

Before continuing with the new features of the Output Statistics component, add the ability to select columns to the dataTable.

1. Go back to the Design view for your JSP.
2. Click your dataTable to select it.
3. Select the Rational Application Developer Properties view to see the dataTable's properties.
4. Click the Row actions tab, which is a sub-tab of the hx:dataTableEx tab.
5. Select Add selection column to the table.
6. Run on the server again.

When you run the JSP page on the server now, the default Output Stastics component displays both selection and paging information, as Figure 6 shows.

The behavior of earlier versions of the Output Statistics component is still the default. Paging information displays by default, and selection information displays if there is a Selection column. Table 2 shows the new attributes of the Output Statistics feature.

You can set these new attributes manually in the JSP source view.

1. Go back to the Design view for your JSP.
2. Select Output Statistics.
3. Choose the Properties view in Rational Application Developer to see the Output Statistics properties.
4. On the hx:outputStatistics tab in the Properties view, there are four check boxes and two text fields to check to turn on these new features.
5. Check Show paging information to turn on paging information.
6. Check Show number of selected rows to turn on selection information.
7. Check Show total number of rows to turn on total information.
8. Check Show number of visible rows to turn on row information.

Note: You can also set these options by entering your preferences in the tooling provided with Rational Application Developer V7.0:

1. Go to the Source view for your JSP.
2. Locate the <hx:pagerDeluxe> tag.
3. Add an attribute of paging="true" to the tag.
4. Add an attribute of selected="true" to the tag.
5. Add an attribute of shown="true" to the tag.
6. Add an attribute of total="true" to the tag.

The Output Statistics tag added to the dataTable's footer will now look like what you see in Listing 4.

		
		<hx:outputStatistics id="statistics1" styleClass="outputStatistics"
			paging="true" selection="true" total="true" shown="true">
		</hx:outputStatistics>
	

Figure 7 shows the dataTable that results when you run your dataTable on the server. Four pieces of information are provided in statistical output in the status bar.

Add the Filtered attribute option of Output Statistics

1. Go back to the Design view for your JSP.
2. Select Output Statistics.
3. Choose the Properties view in Rational Application Developer to see the Output Statistics properties.
4. On the hx:outputStatistics tab in the Properties view, there is a text field called Number of filtered rows. You can either enter a number here to have a fixed number of filtered rows or bind it to a method to get the current number of filtered rows. You must write this code to return the filtered rows in the pagecode file for the JSP.
5. In the src folder for your project, open file1.java in the pagecode package.
6. Add the method shown in Listing 5 to the page code, as an example:

 
		protected String filteredRows = "10";
		public String getFilteredRows() {
			return filteredRows;
		}

		public void setFilteredRows(String filteredRows) {
			this.filteredRows = filteredRows;
		}

7. Go back to the Properties view in Rational Application Developer to see the Output Statistics properties.
8. Click the button beside the text field called Number of filtered rows.
9. The filteredRows variable that you just created will be listed in the window that displays.
10. Select that variable, and then click OK.
11. Run the JSP page on the server again, as previously described, the dataTable now displays the filtered rows (see Figure 8). It will display 10, because that is that value that you set for this example, but you can write code to change this value in the pagecode file.

Add the statusText attribute of Output Statistics

The new statusText should be set to a string. For example: "We are on page {0} of {1}. There are {2} rows selected from a total of {3} rows. We can see {4} rows, and there are {5} filtered rows:

• {0} and {1} will be replaced by paging information, visible page, and total number of pages.
• {2} will be replaced by selected row information.
• {3} will be replaced by total row information.
• {4} will be replaced by number of rows shown
• {5} will be replaced by the number of filtered rows (only if the user has set the filtered attribute of this tag equal to the number of filtered rows, as descirbed in the previous section).

If statusText is not set, the other five new attributes are used instead. If none of these are set, then only paging and selection information will appear in the status bar, because the rest of the attributes are set to false by default. See Listing 6 for an example of the code to set the statusText attribute and Figure 9 for an example of the display.

		
			<hx:outputStatistics id="statistics1"
			styleClass="outputStatistics" filtered="#{pc_File1.filteredRows}" 
			statusText="We are on page {0} of {1}, there are {2} rows selected 
			from a total of {3} rows. We can see {4} rows and there are {5} 
			filtered rows."></hx:outputStatistics>
		

Back to top

Add the new Scrolling feature

Scrolling is a new feature for the dataTable introduced in Rational Application Developer V7.0.

Add scrolling to the <h:dataTable> or <hx:dataTableEx> tags

dataTables imported in Rational Application Developer 7.0 from previous releases will have the <h:dataTable> tag; whereas, dataTables created using Rational Application Developer 7.0 will use the <hx:dataTableEx> tag. The area that scrolls is the area of the dataTable between the column headers and column footers. Scrolling can work in conjunction with paging, and each page of the dataTable will be scrollable. To specify the height of the scrollable area in Rational Application Developer 7.0 and add the new Scrolling feature, follow these steps:

1. Go back to the Design view for your JSP.
2. Select the dataTable.
3. Switch to the Source view tab for your JSP.
4. The page should now show the code for the h:dataTable tag, because you selected it before switching to the source view.
5. Add %lt;f:attribute name="scrollSize" value="20px"> tag as a child tag just below the opening h:dataTable tag.
6. You can set the value to anything with a unit of height in any of the CSS units of measurement: em, ex, px, pt, pc, cm, in, mm, or %.

The added to the <h:dataTable> will look like Listing 7.

		
	
			<h:dataTable id="tableEx1" value="#{pc_File1.mybean.stocks}"
				var="varstocks" styleClass="dataTableEx" headerClass="headerClass"
				footerClass="footerClass" rowClasses="rowClass1, rowClass2"
				columnClasses="columnClass1" border="0" cellpadding="2"
				cellspacing="0">
			<f:attribute name="scrollSize" value="20px"/>

	

Add Scrolling to the <hx:dataTableEx> tag

1. Choose the Properties view in Rational Application Developer to see the dataTable's properties.
2. Click the Display options tab, which is a sub-tab of the hx:dataTableEx tab.
3. In the Height of scrollable area text field, enter a numerical value and choose a unit of height from the context menu. This unit of height can be any of the CSS units of measurement: em, ex, px, pt, pc, cm, in, mm, or %.
4. The value you choose must be smaller than the height of the dataTable, or Scrolling will not function.

The code added to the <hx:dataTableEx> tag will look like Listing 8.

		
	<hx:dataTableEx id="tableEx1" value="#{pc_File1.mybean.stocks}"
	    var="varstocks" styleClass="dataTableEx" headerClass="headerClass"
		footerClass="footerClass" rowClasses="rowClass1, rowClass2"
		columnClasses="columnClass1" border="0" cellpadding="2"
		cellspacing="0" scrollSize="20px"%gt;
	

When you run the JSP page on the server, as described previously, the dataTable will now scroll, as Figure 10 shows.

Back to top

Download

Information about download methods

Resources

Learn

• Visit the Rational Application Developer product page to expand your product skills.
  
  
• Stay current with developerWorks technical events and Webcasts.
  
  
• Check out this JavaServer Faces tutorial from Sun Microsystems.
  
  

Get products and technologies

• Download a free trial version of Rational Application Developer V7.0
  
  
• Build your next development project with IBM trial software, available for download directly from developerWorks.
  
  

Discuss

• Rational Software Architect, Data Architect, Software Modeler, Application Developer and Web Developer forum: Ask questions about Rational Application Developer.
  
  
• WebSphere JavaServer Faces (JSF) forum: Ask questions about WebSphere JavaServer Faces (JSF).
  
  

About the author

Rate this article

Comments

Back to top

Table of contents

• Create an application
• Add a Deluxe Pager with new features
• Add the new features in Output Statistics
• Add the new Scrolling feature
• Download
• Resources
• About the author
• Comments

Next steps from IBM

• Try: Rational Application Developer for WebSphere Software
• Buy: Rational Application Developer for WebSphere Software

Dig deeper into Rational on developerWorks

Discover knowledge paths

Skill-building guides for Rational, Linux, open source, cloud, Java, business analytics, and more.

Special offers