Create a ListView control for better usability

By Phillip Perkins

The ability to bind HTML elements to XML data islands opens up an array of possibilities for providing information to an end user. One of the best is the ability of a <TABLE> element to render multiple rows based on one row as a template. Also, the nested <TABLE>s can be bound to nested nodes in the XML hierarchy. Using this in conjunction with a group of other bound elements opens the door to some quickly coded solutions.

Using the following XML, a ListView control is created to provide a list of choices to the user with accompanying images. Click here.

First, we populate an XML data island on the HTML page with the above XML. This is accomplished by surrounding the XML with <XML> element tags. Then we add ID and NAME attributes to the opening <XML> tag for reference. For example:

Next, we create the HTML for the TABLE. Click here.

The DATASRC attribute on the <TABLE> element binds XML data island rows to the <TABLE> element. The individual elements that contain DATAFLD attributes are bound to the data for the corresponding field in the current row. Notice the # preceding the DATASRC name.

The "product_img" field is bound to the SRC attribute on the <IMG> tag. This provides the individual images for the individual products in each row. The "product_name" field is bound to the innerText property of the <SPAN> tag. The <DIV> element surrounding the <TABLE> is meant only for containing the <TABLE> element.

This code creates the basis for the ListView control. The remainder of the code is for user interaction. When the user moves the mouse pointer over each row, I make the user aware of the row under the mouse pointer by changing the background color of the <TR> element. When the user clicks on the row, the user will know that the row was selected by the row highlighting. I'll also keep track of the active row within the current table.

The <TR> element within the <TABLE> should be modified to the following code to accommodate the user events:

<TR onmouseover="tr_onmouseover(this)"
onmouseout="tr_onmouseout(this)"

 onclick="tr_onclick(this)" active="false">  

Add the following JavaScript code. Click here.

This script changes the row background color to silver when the mouse pointer is hovering over it--if the row is not active. Then it clears the background color to default when the mouse pointer leaves the boundaries of the row. When the user clicks on the row, the background color is changed to the system's currently applicable highlight color, and the text color is changed to the system's currently applicable highlight text color. Also, the currently selected row reference is stored to the "activeRow" property of the table. This provides quick access to the information in the selected row. An example of this would be "document.all.tblProducts.activeRow. . .."

I frequently use this skeletal code as the basis for many of my lists because of the easy customization. It gives me a little more freedom and functionality than radio buttons, checkboxes, or <SELECT> elements. It also makes it easier to bind to the XML data islands, helping me to separate content from layout.

This script and the HTML are abstract enough to be used for any type of list control. The ability to bind the image information to the <IMG> tags from the XML data island makes for a quick ListView control.