Conditional highlighting of given cells in a dynamic HTML table6851088Abstract A method operative at a server for generating a table having dynamic data. According to the method, a page developer may specify a given table cell in the table for conditional treatment. In response to a request for the table received from a client browser, the table is populated with dynamic data, preferably by instantiating a table format object. If the dynamic data in the table cell meets a given condition, the table cell is highlighted. Using this technique, the page developer may conditionally highlight a particular cell based on the characteristics of the dynamic data to be presented in the cell. Claims What is claimed is: Description COPYRIGHT NOTICE
{
/* *
* @param object the data object for formatting.
* @param tableFieldTokens a vector of fields in a
table.
* @return a two dimensional array of object.
*/
public Object [ ] [ ]
getTableRawData (Object object,
Vector tableFieldTokens);
/* *
* @param object the data object for formatting.
* @param tableFieldTokens a vector of fields in a
table.
* @param preferHeaders an array of customized
header names.
* @return an array of header strings.
*/
public String [ ]
getTableRawDataHeader (Object object,
Vector tableFieldTokens,
String [ ] preferHeaders);
public boolean
acceptType(Class aClass);
}
The following code represents an illustrative
implementation for the interface:
Public class SimpleRawDataGetter implements
JSPTableRawDataGetter
{
public Object [ ] [ ]
getTableRawData (Object object,
Vector tableFieldTokens)
{
return (Object [ ] [ ] object;
}
public String [ ]
getTableRawDataHeader (Object object,
Vector fieldTokens,
String [ ] headerNames)
{
return headerNames;
}
public bookean
acceptType (Class aClass)
55
if (aClass.equals (Object [ ] [ ] .class)) {
return true;
}
return false;
}
}
In this example, the getTableRawData method creates a two-dimensional array of objects for the table and then loops through a vector of data field tokens to obtain the entries. The getTableRawDataHeader method then passes in the data object, the column indicators and the preferred header names (unless the data object dictates otherwise). It should be noted that the implementation of JSPTableRawDataGetter to allow JSPTableFormat to accept a two dimensional array is not meant to be limiting. This embodiment is shown merely to illustrate how easy it is to extend the JSPTableFormat bean to accept new object types. A page developer may readily supply implementations for other data source inputs including, without limitation, JDBC ResultSets or SQLJ Cursors. Thus, the raw data acquisition interface affords developers freedom to gather data in the way they want and to populate dynamic HTML tables with that data. Unlike the prior art, developers do not need to change their design to use the table formatter. If, for example, they use standard Java.TM. beans as their data beans, the default rawDataGetter can be used. Moreover, the interface provides flexibility to enable the developer to implement a custom way of accessing data. Thus, for example, if one wants to obtain data from a given database, all the developer need do is to write his or her own rawDataGetter Java.TM. object. This developer-defined rawDataGetter object, which may be identified as JSPDataBaseRawDataGetter.java, then implements the JSPTableRawDataGetter to carry out the three methods in the interface. Those methods then obtain the data for a table and its headers. Thus, to activate the rawDataGetter in the JSPTableFormatter, the developer simply adds the above-illustrated code in his or her .jsp page. When the page request is received, the table formatter formats the data obtained from the JSPDataBaseRawDataGetter defined by the page developer. In this way, the invention provides an interface that can be used by third parties to plug-in ways to get data out of well-known or specialized data objects. Highlight Certain Cells in Dynamic HTML Table The present invention also enables a page author to establish conditions under which a given cell's data may be highlighted in some manner. In a simple example, if the page being returned includes an online bank statement, a table cell identifying the customer's checking account may be selectively highlighted if the data therein indicates that the account has less than a given amount (e.g., below $500). The purpose of conditionally highlighting given cell data is to draw the user's attention to the field. To accomplish this function, the table formatter implements very flexible row, column and cell prefix/suffix property methods. These methods allow page developers to overwrite default values and to specify the row number or column number in the dynamic table to set extra property information for a cell that satisfies a given condition. Preferably, this condition is then checked every time the dynamic page is formatted. As noted above, the JSPTableFormatter formats dynamic data and produces the HTML table. Developers can extend the get prefix/suffix methods for row, column and cell in the table format object to dynamically control cells that satisfy given conditions. The following is illustrative code (a MyTableFormat object or bean) that may be used for this purpose. This code highlights any cell in any column of the table if the value for that cell is less than zero. Of course, this is merely an illustrative condition.
public class MyTableFormat
extends JSPTableFormat
{
public String
getCellPrefix (int [ ] order,
int row,
int column,
Object obj)
{
if (column == 3) {
double amount = ((AccountSummary)
obj) .getItemAmount (row);
if (amount < 0) {
return " font size=3 color=red> ";
}
}
return " ";
}
public String
getCellSuffix (int [ ] order,
int row,
int column,
Object obj)
{
if (column == 3) {
double amount = ((AccountSummary)
obj) .getItemAmount (row);
if (amount < 0) {
return " </font> ";
}
}
return " ";
}
}
FIGS. 5A and 5B illustrate a page with highlighted table cells that demonstrates the results of using the JSPTableFormat and MyTableFormat beans. With the same set of data, the first table (FIG. 5A) is formatted using JSPTableFormat bean, and the second table (FIG. 5B) is formatted using MyTableFormat bean above. The MyTableFormat bean extends the base JSPTableFormat bean. As a result, the MyTableFormat bean has all the functionality of the JSPTableFormat bean together with the additional functionality in that it also dynamically controls the cells in the fourth column of the output table. In particular, when a value in a cell of the fourth column is less than 0, then that data is highlighted in red. In this example, two cells in the fourth column are satisfied by this condition, and so the data are in red. Thus, according to the invention, the page designer may specify how to convert dynamic data (such as the result of a database query or an application transaction) into a formatted tabular representation in which certain table cells are conditionally highlighted based on the characteristics of the dynamic data to be presented in that cell. Rotation for JSP.TM. (Java.TM. Server Page) Formatted Table As noted above, another feature of the table format object provides for the generation of a single JSP.TM. that renders a table correctly irrespective of the table's desired orientation. This is achieved by associating all the attributes, prefixes and suffixes for an individual cell. Prefixes and suffixes are any starting and ending HTML tags that are used in a given cell, column, row or header to format the respective contents thereof. Thus, for example, if the developer wants to make a given cell red, the prefix would be <font color=red> and the suffix would be </font>. All the table row, table column and table cell attributes, prefixes and suffixes are "associated" with a particular cell by performing a union operation on the attributes, the row prefixes and suffixes, the column prefixes and suffixes, and the table prefixes and suffixes. Using the table format object, the table attributes, row attributes, column attributes, prefixes and suffixes are then prioritized in the event of overlap. In particular, the cell data (that is subject to the union operation) is ordered according to the priority that is specified on the table format object. This data is then maintained in association with the particular cell so that, when the whole table is rotated, the data stays with the cell. The data of highest priority are then expressed. To produce a desired table rotation, the page developer then sets a table rotation property in the table format object. In particular, the tablestyle property may be set to one of a given set of variants including, without limitation, DEFAULTHEADER_TABLESTYLE, LEFTHEADER_TABLESTYLE, RIGHTHEADER_TABLESTYLE or BOTTOMHEADER_TABLESTYLE. The first property provides a default action. As noted above, the LEFTHEADER_TABLESTYLE setting rotates the whole table to the left. The RIGHTHEADER_TABLESTYLE rotates the whole table to the left. The BOTTOMHEADER_TABLESTYLE setting rotates the whole table upwards. FIGS. 6A-6D illustrate a page with rotated tables. This page consists of a number of tables using the same set of data. FIG. 6A illustrates a default header that is generated using the DEFAULTHEADER_TABLESTYLE property. FIG. 6B illustrates the table with the BOTTOMHEADER_TABLESTYLE property set. FIG. 6C illustrates the table with the LEFTHEADER_TABLESTYLE setting. Finally, FIG. 6D illustrates the table with the RIGHTHEADER_TABLESTYLE property setting. As can be seen, because all the properties for a table are associated with individual cells, the setting of the table style property on the table object formatter in the .jsp file generates the desired result. JSPTableFormat As described above, the JSPTableFormat bean formats data into an HTML table. The data object can be any form of a JavaBean or other similar object. In a preferred embodiment, the default implementations require that the data object be an Iterator or List of data beans implemented using properties (excluding indexed properties), or the data object may be a JavaBean implemented using indexed properties, where each index value represents a row in the table. As noted above, one can implement the JSPTableRawDataGetter interface to obtain the table raw data from customized data beans. Preferably, there are three ways to use JSPTableFormat. One way is to create a JSPTableFormat instance in the .jsp file, set up the all necessary attributes on the instance, and then call format method on the instance. This technique was illustrated generally in the flowchart of FIG. 2. The second way is to produce a serialized bean manually, use a JSPLookup object to obtain an instance in .jsp file, setup the additional properties if required, and call format method on the instance. The third way is the simplest--using a tableFormat customizer to setup properties visually, saving the settings as a given file type (e.g., a .ser file). Then, use JSPLookup to obtain an instance in .jsp file, and call format method on this instance. Each of the techniques is now described. Create and setup JSPTableFormatter on .jsp file: The following is a representative table format object illustrating how properties are set on the table format object: . . . <% JSPTableFormat table=new JSPTableFormat( ); table.setTableAttributes("bgcolor=#cccccc align=center border=0"); table.setHeaderAttributes("BGCOLOR=#b0c4de"); table.setTableStyle(JSPTableFormat.LEFTHEADER_TABLESTYLE); table.setFields("itemWithdrawal,itemBalance,itemDeposit,itemAmount,it emDate"); table.setFormatString("NumberFormatCurrency,NumberFormatCurrency, Numb) erFormatCurrency,NumberFormatCurrency,DateFormatshort"); %> <%=table.format(request, account) %> In this approach, an instance of JSPTableFormat is created, and the table attributes, header attributes, and table style are then set up. Thereafter, the fields on the table are established. Each field on the table preferably represents a property on the dataObject. Then, the format bean for each field is established according to its data type. Finally, the table.format(HttpServletRequest, Object) method is used to format the bean "account" into an HTML table according to the properties in the table instance. In an illustrated example, "request" is the HttpServletRequest that provides default locale information, and "account" is the data bean used that consists of the following indexed properties: getItemWithdrawal(int) getItemBalance(int) getItemDeposit(int) getItemAmount(int) getItemData(int) getItemDescription(int) . . . The second technique for using the JSPTableFormat bean is now described. This technique begins by creating an instance of the JSPTableFormat bean, setting some properties, and then serializing the object into a file called, for example, MyLeftheaderTable. In the .jsp file, the following is then provided: . . . <% JSPTableFormat table=JSPTableFormat)JSPLookup.getBean ("com.ibm.jsp.MyLeftHeaderTable"); %> <%=table.format(request, account) %> First, the table instance is obtained from the serial file, for example,.by using JSPLookup.getBean( ). Then, the table.format(HttpServletRequest , Object) method formats the bean "account" into an HTML table according to the properties in the table instance. In this case, the .jsp file may look as follows:
protected void
buildingSerFile ( )
{
JSPTableFormat table = new JSPTableFormat( );
table.setTableAttributes (" bgcolor=#cccccc align=center border=0");
table.setHeaderAttributes ("BGCOLOR=#b0c4de");
table.setTableStyle (JSPTableFormat.LEFTHEADER_TABLESTYLE);
table.setFields("itemWithdrawal, itemBalance, itemDeposit, itemAmount,
itemDate");
table.setFormatString ("NumberFormatCurrency, NumberFormatCurrency,
NumberFormatCurrency, NumberFormatCurrency, DateFormatshort");
try {
FileOutputStream fileOutputStream = new FileOutputStream(path + "/" +
"MyLeftHeaderTable");
ObjectOutputStream out = new ObjectOutputStream(fileOutputStream);
out.writeObject (jspTableFormat);
out.flush ( );
fileOutputStream.close ( );
} catch (Exception e) {
e.printStackTrace ( );
throw new Error("Unable to produce .ser file");
}
}
The two techniques described above produce the same table. Nevertheless, if an attribute value is misentered, the table may not look as the developer intended. Worse, if a property name for a field is not entered correctly or a format string for a data type is mismatched, the table may not be generated at all. To overcome these difficulties, the third technique involves use of a FormatBeanCustomizer that allows the developer to set up all attributes visually and then save the result to a serialized file. The table may then be created by the following.jsp file: . . . <% JSPTableFormat table=JSPTableFormat)JSPLookup.getBean ("com.ibm.jsp.MyLeftHeaderTable"); %> <%=table.format (request, account) %> JSPTableFormatCustomizer As is well known, the JSP.TM. Format Bean Library consists of a rich set of helper beans supporting JSP.TM. scripting. It makes tedious or complex operations very simple to code. With the JSPTableFormatCustomizer, the page author can instantiate a sophisticated dynamic table by modifying a single line of code in the .jsp template to point to a serialized table formatter. In addition, the page author can extend the JSPTableFormat to format any type of data in any way that is desired. To produce a sophisticated table, the developer may configure a set of properties on the JSPTableFormat bean as has been described. The JSPTableFormatCustomizer is a tool that simplifies this formatting. The JSPTableFormatCustomizer makes JSPTableFormat configuration very simple. The developer visually configures his or her dynamic table to produce a similarly patterned JSP.TM. table. FIG. 7 illustrates a representative layout of the JSPTableFormatCustomizer. As can be seen, the GUI 700 is presented in table form. The table is divided into three regions. The region 702 on the left includes the row properties. The region 704 on the top includes table, column, and header properties. The region 706 in the bottom-right represents the dynamic table data. Each cell on the table allows the developer to configure the corresponding attributes of the dynamic table. For illustrative purposes, there are preferably six types of cells: TableInfo, ColumnProperty, HeaderRow, HeaderName, Row, and dynamic data. In each of the six types of cells the developer may set color, font size, text style (normal, bold, italics), and alignment (right, left, center). For the dynamic data and HeaderName cells, preferably these attributes only affect the current cell. For the ColumnProperty, Row/HeaderRow, and TableInfo, preferably the attributes affect the cells in the column, row, or table, respectively. Preferably, the final color of the cell is used by the table formatter in the JSP.TM. page. Preferably, the TableInfo cell gives the developer control over an entire table. As noted above, the TableStyle cell allows the developer to rotate the layout of the table at JSP.TM. runtime. To select a Data Object, the user first selects DataObject Property Type and then clicks the Browse button. The user may then select a class file from the file dialog as the data object. The indicated properties of the selected data object are now available to choose in the ColumnProperty cells. The Reset button resets the whole table. The ColumnProperty cell allows the developer to specify the object properties or index properties that will fill that column's data cells. After the developer has chosen an object property to represent a column, then he or she may chose an appropriate FormatBean to format the data. For example, if the property assigned to this column is a float, one could format the value with the NumberFormatGeneral, NumberFormatCurrency, NumberFormatPercent, or the String, but not, for example, with the DateFormat bean. If the Header Location in the TableInfo cell is Top or Bottom, then the HeaderRow allows the developer to specify a repeating header. The HeaderName cell allows the developer to name each column. The dynamic data, HeaderName, Row, and HeaderRow preferably only have customizable color, font, and alignment attributes. When the developer has completed the process, the customization may be saved in two ways, Save as .ser, and Verbose Save. The Save as .ser produces a serialized file of the customized JSPTableFormat bean. It also provides a skeleton JSP.TM. file that instantiates an instance using JSPLookup and calls format on the data object that the developer needs to provide (and which is obtained through the rawDataGetter): Partial JSP.TM. output from Save as .ser <% JSPTableFormat jspTableFormat=new (JSPTableFormat) JSPLookup.lookup("com.ibm.jsp.samples.AccountSummaryTablel"); <%=jspTableFormat.format(request, dynamicData) %> The Verbose Save produces a JSP.TM. page with the JSPTableFormat bean and properties set just as if the developer had written the code directly: Listing 2. Partial JSP.TM. output from Verbose Save <% JSPTableFormat jspTableFormat=new JSPTableFormat( ); jspTableFormat. setTableAttributes("BGCOLOR=#c8c8c8 ALIGN=CENTER BORDER=0"); jspTableFormat.setHeaderOn(true); jspTableFormat.setTableStyle (JSPTableFormat.LEFTHEADER_TABLESTYLE); jspTableFormat.setHeaderAttributes ("BGCOLOR=#00cccc ALIGN=CENTER"); jspTableFormat.setHeaderPrefix("<B>"); jspTableFormat.setHeaderSuffix("</B>"); String[ ] headerCellNames=new String[4]; headerCellNames[0]=" "; headerCellNames[1]="Withdrawal"; headerCellNames[2]="Deposit"; headerCellNames[3]="Date"; jspTableFormat.setHeaderCellNames(headerCellNames); Vector fields=new Vector( ); fields.addElement("ItemLabel"); fields.addElement("itemWithdrawal"); fields.addElement("itemDeposit"); fields.addElement("itemDate"); jspTableFormat.setVectorFields(fields); String[ ] formatBeanNames=new String[4]; formatBeanNames[0]=" "; formatBeanNames[1]="com.ibm.jsp.NumberFormatCurrency"; formatBeanNames[2]="com.ibm.jsp.NumberFormatCurrency"; formatBeanNames[3]="com.ibm.jsp.DateFormatLong"; jspTableFormat.setFormatBeans(formatBeanNames); String[ ] columnattributes=new String[4]; columnAttributes[0]="BGCOLOR=#00cccc ALIGN=CENTER"; columnAttributes[1]="BGCOLOR=#ffffcc ALIGN=RIGHT"; columnAttributes[2]="BGCOLOR=#ffccff ALIGN=RIGHT"; columnAttributes[3]="BGCOLOR=#ccffcc ALIGN=CENTER"; jspTableFormat.setColumnAttributes(columnAttributes); %> <%=jspTableFormat.format(request, dynamicData) %> For illustrative purposes, the state of the customizer tool for the above code listing is shown in FIG. 7, and the respective dynamic table is shown in FIG. 8. Table Attribute Chart Linking to Table Format Object Documentation For a Java.TM.programmer who is not an HTML expert, it is not always easy to completely understand the behaviors of the attributes in a dynamic table that is going to be manipulated, for example, by conditional cell highlighting, horizontal or vertical rotation, or the like. Typically, a page author or programmer has available documentation that contains the HTML table attributes, but this documentation does not show the relations of the attributes. Thus, the documentation is not at all useful if the developer is attempting to understand the attribute behaviors and the potential for conflict. The present invention addresses this deficiency in the art by generating a so-called table attribute chart, which includes a visual representation of what the output of the dynamic table will look like, and then linking each attribute in the chart to given information (about the attribute) in the table format object's documentation. Preferably, both the table attribute chart and the table format object's documentation are available in a markup language (such as HTML) and are accessible via conventional viewing software, e.g., a web browser (e.g., Netscape Navigator, Internet Explorer, or the like). Linking between the table attribute chart elements and the corresponding data and information in the format object's documentation using conventional hypertext anchors. FIG. 10 illustrates a representative table attribute chart. As can be seen, the table attribute chart shows the position and the precedence of the attributes relative to each other. The chart is a visual representation of how the dynamic table will be output in response to a given page request to the server. As can be seen, the various elements of the table attribute chart include hypertext anchors (as represented by the underscoring) that represent links to information in the table format object's documentation that is related to the table element. Thus, for example, a link in the table attribute chart for the columnPrefix attribute is linked to a portion of the table formatter documentation that describes the particular get and set column prefix methods that operate on the .jsp table format object. FIG. 11 illustrates the linked portion of the table format object documentation. As can be seen in this figure, this portion of the table format object also includes links back to the table attribute chart. This "bi-directional" linking is a technical advantage of the present invention in that it enables the programmer to be able to switch quickly back and forth between, on the one hand, the table attribute chart and, on the other, the table format object's documentation, which describes all the methods and variables used on that object, as well as the descriptions of how those methods and variables are use by a programmer to instantiate the table format object according to the present invention. In a preferred embodiment, the bidirectional linking between the table attribute chart and the table format object documentation is effected using bidirectional links that conform to the World Wide Web Consortium's XML Linking Language, commonly referred to as XLink. XLink describes the use of so-called multidirectional links. A multidirectional link is a link whose traversal can be initiated from more than one of its participating resource. A participating resource is a resource that belongs to a link. In the context of the present invention, the table attribute chart and the table format object documentation are each participating resources, and the link is bidirectional as described above. Linking between the table format object documentation (called JSPTableFormatter javadoc) and the table attribute chart maps the table attribute property methods to HTML table attribute definitions visually. From the javadoc to the chart, one can see how the table attribute property methods affect the HTML table. From the chart to the javadoc, the developer can ascertain which property needs to be set to produce a desired table. This technique affords the developer a clear view of the attribute behaviors as well as information about how to resolve potential conflicts. The technique of establishing bidirectional links between a set of data representations may be generalized beyond the use with the dynamic table documentation as described above. More generally, it is known that technical documentation must explain concepts that are best communicated using very different presentations. For example, one concept might be best communicated with a graphic representation that shows relationships (such as ordering constants) between different elements of the topic of concern. Another concept might be best communicated in a text description in which each element in the topic of concern is separately discussed. The present invention provides a technique to leverage hypertext linking (such as is supported in HTML web browsers) to allow the reader to navigate electronically between the different presentation formats thus allowing the reader (the page developer) to navigate electronically between these formats. This allows the developer to produce different presentation of concepts concerning a particular element of the topic of concern more efficiently. As a result, the quality of the presentation and the reader's understanding of the material is improved. As noted above, the inventive table formatter mechanism is preferably implemented in or as an adjunct to a web server, Thus, the invention does not require any modifications to conventional client hardware or software. Generalizing, the above-described functionality is implemented in software executable in a processor, namely, as a set of instructions (program code) in a code module resident in the random access memory of the computer. Until required by the computer, the set of instructions may be stored in another computer memory, for example, in a hard disk drive, or in a removable memory such as an optical disk (for eventual use in a CD ROM) or floppy disk (for eventual use in a floppy disk drive), or downloaded via the Internet or other computer network. In addition, although the various methods described are conveniently implemented in a general purpose computer selectively activated or reconfigured by software, one of ordinary skill in the art would also recognize that such methods may be carried out in hardware, in firmware, or in more specialized apparatus constructed to perform the required method steps. Further, as used herein, a Web "client" should be broadly construed to mean any computer or component thereof directly or indirectly connected or connectable in any known or later-developed manner to a computer network, such as the Internet. The term Web "server" should also be broadly construed to mean a computer, computer platform, an adjunct to a computer or platform, or any component thereof. Of course, a "client" should be broadly construed to mean one who requests or gets the file, and "server" is the entity which downloads the file. Having thus described our invention, what we claim as new and desire to secure by Letters Patent is set forth in the following claims.
|
Same subclass Same class Consider this |
||||||||||