Presenting Complex Data Sets in JSPs
| < Day Day Up > |
| Data binding is the process of tying data to presentation tags in JavaServer Pages (JSPs). In Chapter 4, data binding was used with Page Contexts and Form beans to propagate user input from one JSP to another JSP in a Page Flow for processing. This section explores using data binding to present large sets of data in a JSP. The JSP tags for rendering these complex data sets are found in the netui -tag-databinding.tld tag library. This library is imported into Workshop-generated JSPs by default, via the following JSP directive at the top of each file: <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> The Repeater, CellRepeater, and Grid tags in this tag library offer three distinct ways to render these data sets. All three types of tags iterate through the elements of the data set like a Java for or while loop, but differ in how many of the formatting parameters are made available to developers. When developing a JSP in Workshop, all these tags can be entered in the Source View pane or added by dragging and dropping elements from the Palette to the Design View pane. The Flexibility of the Repeater TagsRepeater tags offer the most flexible rendering option because they make it possible for developers to interleave HTML formatting elements almost anywhere in the data binding code. Listing 7.1 shows an example of the JSP code that generates a table summarizing all the customers who have purchased chips and the amounts they have purchased, assuming that the data is stored in an array of Strings . Listing 7.1. ChipPurchaseSummary.jsp : Code for Rendering a Table with Repeater Tags <!--Generated by WebLogic Workshop--> <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> <%@ taglib uri="netui-tags-html.tld" prefix="netui"%> <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> <netui:html> <head> <title> Chip Purchase Summary </title> </head> <body> <p> Chip Purchase Summary </p> <netui-data:repeater dataSource="{pageFlow.customerList}"> <netui-data:repeaterHeader><table cellpadding="4" border="1" class="tablebody" ></netui-data:repeaterHeader> <netui-data:repeaterItem> <tr> <td><netui:label value="{container.item[0]}"> </netui:label></td> <td><netui:label value="{container.item[1]}"> </netui:label></td> </tr> </netui-data:repeaterItem> <netui-data:repeaterFooter></table></netui-data:repeaterFooter> </netui-data:repeater> </body> </netui:html> The top-level element for this set of tags is <netui-data:repeater> , which has the dataSource attribute to specify the source of the data set. The source is defined by using the XScript syntax described in the "Data Binding with Page Flow" section of Chapter 4. In the Wonderland Casino example, dataSource is a two-dimensional array of String s stored in the Controller.jpf file. The <netui-data:repeaterHeader> and <netui-data:repeaterFooter> elements are then used to add formatting to the top and bottom of the data set and are processed only once. In Listing 7.1, the <netui-data:repeaterHeader> element includes the start tag for the table HTML element and sets up the table column headings; the <netui-data:repeaterFooter> element includes the end tag for the table element. The heart of the code resides in the <netui-data:repeaterItem> element. All code contained in this element is repeated for each member of the data set. For each piece of data that can be rendered, a NetUI HTML presentation element (from the netui or netui-html package) is specified, with its value or dataSource attribute set to the data set member by using XScript syntax. In the Wonderland Casino example, the <netui-data:repeaterItem> element is used to add rows to the HTML table. Besides the common use of rendering the data set as a table, the Repeater tags are used to create forms for user input. This is accomplished by simply embedding the <netui-data:repeater> element within a <netui-form> element. Listing 7.2 shows an example of using the <netui-data:repeater> element to display the name and chips purchased by all customers. In addition, this element allows editing the amount of chips. Listing 7.2. Example of Using <netui-data:repeater> in a Form <netui:form action="submit"> <netui-data:repeater dataSource="{pageFlow.customerList}"> <netui-data:repeaterHeader><table cellpadding="4" border="1" class="tablebody" ></netui-data:repeaterHeader> <netui-data:repeaterItem> <tr> <td><netui:label value="{container.item[0]}"> </netui:label></td> <td><netui:textBox dataSource="{actionForm.name}" defaultValue="{container.item[1]}" /> </netui:label></td> </tr> </netui-data:repeaterItem> <netui-data:repeaterFooter></table></netui-data:repeaterFooter> </netui-data:repeater> <netui:button type="submit" value="submit"></netui:button> </netui:form> Sometimes when you're rendering data sets, you might want to vary how an item is displayed based on its value. For example, you might want to display a data member graphically, instead of using simple text. For these special cases, the <netui-data:repeaterItem> tag offers two subelements: <netui-data:choiceMethod> and <netui-data:choice> . Listing 7.3 shows the pertinent lines of ChipPurchaseSummary.jsp that color -code customers as high-rollers (red) or low-rollers (green), based on their purchases. Listing 7.3. Excerpt from ChipPurchaseSummary.jsp Showing netui-data:choiceMethod and netui-data:choice Tags Being Used to Color-Code Customers <netui-data:repeater dataSource="{pageFlow.customerList}"> <netui-data:repeaterHeader><table cellpadding="4" border="1" class="tablebody" ></netui-data:repeaterHeader> <netui-data:repeaterItem> <netui-data:choiceMethod object="{pageFlow}" method="getRollerState"> <netui-data:methodParameter value="{container.item[1]}"/> </netui-data:choiceMethod> <netui-data:choice value="low"> <tr bgcolor='#00FF00'> <td><netui:label value="{container.item[0]}"> </netui:label></td> <td><netui:label value="{container.item[1]}"> </netui:label></td> </tr> </netui-data:choice> <netui-data:choice value="high"> <tr bgcolor='#FF0000'> <td><netui:label value="{container.item[0]}"> </netui:label></td> <td><netui:label value="{container.item[1]}"> </netui:label></td> </tr> </netui-data:choice> </netui-data:repeaterItem> <netui-data:repeaterFooter></table></netui-data:repeaterFooter> </netui-data:repeater> The <netui-data:choiceMethod> tag specifies the Java method that calculates the data value. The method is determined by setting the tag's object and method attributes. The object attribute specifies the data binding context (the available options are discussed in Chapter 4 in the section "Data Binding with Page Flow"). In this case, the container data binding context refers to the data record in the current iteration. Data is passed into the Java method via a number of nested <netui-data:methodParameter> tags, one for each parameter of the Java method. Listing 7.4 shows the getRollerState() method in the Controller.jpf file used in the Casino example. The method simply returns a value of high if the number of purchased chips is greater than 1,000; otherwise , it returns low . Listing 7.4. Excerpt from Controller.jpf Showing the Business Logic Used to Color-Code Customers public String getRollerState(String chipsPurchased) { int chips = Integer.parseInt(chipsPurchased); if (chips > 1000) return "high"; else return "low"; } Within the <netui-data:choiceMethod> element, any number of <netui-data:choice> tags are defined; each one contains a value attribute and represents a valid return value of the called Java method. A default <netui-data:choice> tag can be included in the set by specifying the default attribute rather than the value attribute and setting its value to true . Figure 7.2 shows the table that's created after the <netui-data:choice> tags have been applied. Figure 7.2. The <netui-data:choice> tags can be used to customize how the data set is rendered based on data values. The final Repeater element, the <netui-data:pad> tag, is used in the <netui-data:repeater> element to normalize the display of an irregularly sized data set. This tag's maxRepeat attribute is used to limit the number of displayed records; any additional records are not displayed. The complementary minRepeat attribute of the <netui-data:pad> tag is used to set the minimum number of expected records in the data set; if there are fewer records than the set minimum value, the value of the padText attribute is used to round out the display. The <netui-data:pad> tag can be useful for ensuring that Web pages displaying tabular data are uniformly sized.
Ease of Use in CellRepeater TagsIf you're using an HTML table to render your data set, the CellRepeater tag offers another data binding option. This single tag, <netui-data:CellRepeater> , automatically generates an HTML table, thus minimizing the amount of code the developer must supply. Configuration of this tag is based on setting up to seven different attributes. For the minimum configuration, the dataSource attribute must be set to the source of the data set. Also, you must specify the number of rows or columns by setting the corresponding rows or columns attribute; the value of the other attribute is inferred from the size of the data set. The value of the verticalRepeat attribute can be set whether the records should be rendered horizontally or vertically; by default, records are displayed in horizontal rows. You can further customize the rendered table's appearance with attributes that reference classes within cascading style sheets (CSS). CSS files can be used to set font style and size, foreground and background colors, and text alignment. You can apply CSS classes to individual cells ( cellClass and alternateCellClass attributes), each row ( rowClass attribute), and the overall table ( tableClass attribute).
The simplicity of the CellRepeater tag comes with a small price. With the Repeater tag, the data set could be two-dimensional ”with rows of records ”and you could map each data value to the appropriate column as you're adding HTML tags. Although the CellRepeater tag automates HTML tag generation, it's not intelligent enough to know where your records begin and end. The tag treats the data set as one-dimensional and relies on the settings of the rows and columns attributes to delineate records. For the Casino example, the data set has been reformatted from a two-dimensional array of String s to a one-dimensional array, and the columns attribute value of 2 ensures that the data is rendered in pairs. Listing 7.5 shows the new data structure, and Listing 7.6 shows the CellRepeater code for rendering the table. Listing 7.5. Excerpt from Controller.jpf : Customer Data Modeled As a One-Dimensional Array public String[] customerList2= { "Al","2000", "Larry","1000", "Tom","1500", "Sunila","500" }; Listing 7.6. ChipPurchaseSummary.jsp : The Minimum Code Needed for Rendering a Table with CellRepeater Tags <!--Generated by WebLogic Workshop--> <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> <%@ taglib uri="netui-tags-html.tld" prefix="netui"%> <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> <netui:html> <head> <title> Chip Purchase Summary </title> </head> <body> <p> Chip Purchase Summary </p> <netui-data:cellRepeater dataSource="{pageFlow.customerList2}" columns="2" > <netui:label value="{container.item}"></netui:label> </netui-data:cellRepeater> </body> </netui:html> The Power of Grid TagsGrid tags add a new dimension to the idea behind CellRepeater tags. Not only do these tags automatically generate a table, but they also implement the business logic to page through records and to sort and filter data. Again, this functionality is achieved with a minimum amount of coding effort from the developer. Listing 7.7 shows the code needed to configure Grid tags for the Casino example. Instead of using HTML table tags, the Grid tags use special elements to define the appearance of the rendered table. Listing 7.7. grid.jsp : Code for Rendering a Table with Grid Tags <netui-data:grid dataSource="{pageFlow.allRows}" name="{pageFlow.gridName}"> <netui-data:gridStyle styleClassPrefix="gridStyle"/> <netui-data:pager renderInHeader="true" action="pageAction" renderInFooter="true"/> <netui-data:columns filterAction="begin" sortAction="begin"> <netui-data:anchorColumn action="detailsChipPurchases" addRowId="true" title="Details"/> <netui-data:anchorColumn action="updateChipPurchases" addRowId="true" title="Edit"/> <netui-data:basicColumn filterable="true" title="Name" sortable="true" name="name"/> <netui-data:basicColumn filterable="true" title="Numchips" sortable="true" name="numchips"/> </netui-data:columns> </netui-data:grid> As with the Repeater and CellRepeater tags, the dataSource attribute of the <netui-data:grid> tag points to the source of the data set for which the table is rendered. The difference is that Grid tags display data only from a special type of data source called a rowset. A rowset is an instance of the javax.sql.RowSet class that holds data from a query executed on a relational database. In Workshop, RowSet objects can be configured by using a rowset control, as described in Chapter 6, "Introduction to WebLogic Workshop Controls and Components." The name attribute of <netui-data:grid> is used to give the grid a unique name; this is necessary for filtering and sorting operations to work correctly. As with CellRepeater tags, Grid tags can call upon CSS files to configure the table's appearance. In this case, the <netui-data:gridStyle> tag references the gridStyle class found in the style.css file that is, by default, included with an application in the resources/css folder. The next few elements to be described are where Grid tags set themselves apart from other data binding methods . The presence of the <netui-data:pager> tag allows the rendered data to be split automatically among multiple pages. The default page size is 10 records, but you can override that number by setting the pageSize attribute. This tag also creates buttons to navigate forward and back through the data set. The <netui-data:basicColumn> tag is used for each column of data elements to be displayed. This tag contains attributes that allow the table to be filtered and sorted based on the column specified in the tag. In the Casino example, if you want to sort alphabetically by customer names and show only the records in which the amount of purchased chips falls within a specific range, you would set the sortable attribute to true in the Name column and the filterable attribute in the Numchips column. Last, the <netui-data:anchorColumn> tag is used to create links to call actions on a row-by-row basis. With the Casino example, the <anchorColumn> element with the action attribute set to updateChipPurchases calls a method that enables users to revise values for the specific row where this link was clicked. As with the other data binding tags, you can set up Grid tags manually through the Source View pane or drag and drop the Grid element from the Palette onto the Design View pane. However, there's a third, more exciting option for configuring data binding with Grid tags: the Page Flow Wizard. To start this wizard, right-click the rowset control in the Application pane and choose Generate Page Flow. After you make a few selections in the wizard's two windows and click the Create button, a fully functional Web-based database application is automatically created. The data is rendered by using the Grid tags described previously, with paging, sorting, and filtering enabled. In addition, based on your selections in the wizard, the application can even enable you to create, delete, and edit database records ”and without having to write a single line of code. The resulting application for the Casino example is shown in Figure 7.3. Figure 7.3. The Page Flow Wizard was used to generate a fully functional database application for the Chip Purchase Summary functionality. |
| < Day Day Up > |
EAN: 2147483647
Pages: 138
- Challenging the Unpredictable: Changeable Order Management Systems
- Context Management of ERP Processes in Virtual Communities
- Intrinsic and Contextual Data Quality: The Effect of Media and Personal Involvement
- Healthcare Information: From Administrative to Practice Databases
- A Hybrid Clustering Technique to Improve Patient Data Quality