Creating Web pages with HTML can be time consuming, so it's critical to create generic visual components that can easily be reused. This will give you a consistent look and feel throughout your application. You'll be able to add new functionality at one location and make it available across multiple Web pages, which can save you a lot of time.

Creating Reusable Visual Components
In order to create reusable visual components, it's important to create generic stylesheets and JavaScript routines. The stylesheets can be used to display tabular data in a grid format, or menus to navigate your Web application (e.g., WebGrid.xsl, WebMenu.xsl). Even though these examples will show you how to build reusable tabular pages and menus, the same ideas can be used to generate any common type of Web page.

The reusable stylesheet to display tabular (grid) data, WebGrid.xsl, should:
1.  Read instructions on how to build the view, defined between <VIEW> </VIEW> tags
2.  Read the XML data, defined between <DATA></DATA> tags, and transform it to HTML using XSL

The instructions on how to build the view are represented as XML. These build instructions, along with the XML data, are used by the generic stylesheet, WebGrid.xsl, to develop the HTML page. An example of the build instructions to generate a Web page with tabular data is shown in Listing 1.

In this example we have one visual component, a grid, defined. It will display two columns, Name and Phone, which are mapped to the XML data that we read, and shown between the start and end DATA tags. The end user will be able to add, delete, or refresh data by clicking on buttons (see Figure 1).

A portion of the XML data that is transformed by the build instructions and grid stylesheet processor is shown in Listing 2.

Creating a Reusable Grid
WebGrid.xsl, the generic stylesheet that builds the grid, can read all the configuration values from the Visual XML information as defined between the VIEW tags. Since a grid is an HTML table structure, it will dynamically read all the table attributes, such as the grid style, and dynamically assign them to our table. It will also read which columns we should display and show their values by calling the DefineFieldNames template shown in Listing 3.

The DefineFieldNames template is executed as the HTML Web page is being generated. Its main purpose is to see which fields should be displayed on the grid. Dynamically figuring out which columns should be displayed allows WebGrid.xsl to be used for different Web pages with different result sets as long as the columns are defined in the view XML.

<!-DYNAMICALLY SEE WHICH FIELDS TO DISPLAY -->

<xsl:template match="//VIEW/GRID/COLUMNS/COLUMN"
mode="DefineFieldNames">
<td><xsl:value-of select="@fieldname" /></td>
</xsl:template>

Many other grid characteristics can be set dynamically as well. Each characteristic should be defined as an attribute, and then the generic stylesheet will read this attribute at runtime and decide what to set. Some other characteristics you can set for each column/cell in your grid are shown below:

<COLUMN
alignment="left" visible="T"
editable="T" objecttype="0"
onclickfunc="" onblurfunc="" on
changefunc="ClientOnChangeData()"
maxlength="" size="145px"/>

You can then process these attributes in templates in your XSL file as shown. This will set the alignment of the text in the cell as defined for the specific column in the view XML.

<!-DYNAMICALLY SET ALIGNMENT of EACH GRID CELL -->

<xsl:template
match="//VIEW/GRID/COLUMNS/COLUMN"
mode="CreateDataRows">
<td>
<xsl:attribute
name="align">
<xsl:value-of select
="@alignment"/>
</xsl:attribute>
.
</xsl:template>

Advantages of visual XML
Representing your grid with visual XML has many advantages. It enables you to add a new column and within minutes have it automatically show up on the grid. No longer do you have to modify the HTML and then make sure that everything lines up correctly. The entire color of the grid, along with fonts and many other attributes, can be changed by simply modifying the view XML. It's also easy to identify what columns are used for which screens, and it makes modifications quick.

Creating a Reusable Menu
The instructions on how to build the menu are defined using XML, just like with the grid. These build instructions are processed by the generic stylesheet, WebMenu.xsl, to develop the Web page with the menu. A sample of the build instructions to generate the menu is shown in Listing 4.

In this sample we have one visual component, a menu, defined. It will display a pulldown menu for your Web pages. Each menu item can have a custom dropdown submenu. For the Reports menu item there are two dropdown choices, Show Customers and Show Countries, which will each display a different report. The PROCESSOR tag and ACTION tag can be used to direct the client-side request to a server-side servlet to process it. The ACTION represents the specific item that the end user wants done.

Generating the Menu
WebMenu.xsl, which builds the menu, can read all the configuration values from the visual XML information just like we did with the grid control. A template can be used to read through the view XML and process the information to build the menu. The XSL code snippet shown in Listing 5 illustrates how to examine the XML.

Advantages of view XML
Representing your menu with view XML has advantages. It enables you to add a new dropdown menu item without modifying any HTML code. You can also quickly change the menu structure. This method provides one central location that all developers can look at to see which back-end processors are being used by the front-end interface, without having to examine HTML.

Conclusion
Using XML you can describe what kind of visual components you would like to have on your Web pages. This allows your stylesheets to be reusable since no hard-coded XML column names or attributes appear within them. This allows you to change your view without having to directly modify your HTML or JavaScript code. This approach can greatly reduce your development time and allow you to become more efficient at making modifications for the ever-changing world of user requirements.