Leo : Examples : Flextable

Flextable is a DHTML component you can use in your web pages to display data in a tabular form. This component has many features not available in HTML tables, such as click-sort, movable columns, frozen columns, resizable columns etc.

Flextable only works with Internet Explorer 5.5 or later. If you are using IE 5.5+ you can view a sample page and other information here. A Leo file containing the component is also available from the same location.

Flextable is distributed in an XSLT stylesheet. You use the stylesheet to process tabular XML, and the ouput is a DHTML page with the Flextable component.

 



Author: Joe Orr



Since the Flextable component is distributed in an XSLT stylesheet, the process of actually displaying the component to the viewer goes like this:

  1. Server (e.g. JSP page) makes XML 
  2. Server applies the client.xsl stylesheet to the XML.
  3. The result is DHTML (HTML + a Javascript array of data + Javascript for the component) that is sent back to the browser.
  4. The browser executes the Javascript of which the component consists.

The actual component is a Javascript object.

Any developer wishing to extend or modify the component is going to need information about the XML format that the stylesheet explains. It is also going to be difficult for a Javascript developer to work directly from the stylesheet, since that contains a mixture of XSLT and Javascript, rather than the final Javascript output.



Author: Joe Orr



Packaging the XSLT template and a sample XML file in a single Leo file makes distribution of the component much more easy and understandable.

The XSLT and Javascript can be separated simply by putting each in separate nodes.



Author: Joe Orr



Opening up the main template of the XSLT stylesheet, we can immediately see where the output for the HTML <head> and <body> elements will be.



Author: Joe Orr



Looking at the headlines in the <head> and <body> elements, we can see that the actual script for the Flextable is probably in node #1, and that this script gets called in node #2.



Author: Joe Orr



Sure enough, a further look at the script node shows that the Javascript for the dhtmltable (flextable) object is in a subnode, and that this is further divided into the constructor and methods. Once we are in the <script> node, we are looking at pure Javascript that will be passed to the browser. We don't need to worry about XSLT.



Author: Joe Orr



Suppose our aim is to examine the code that allows for column resizing by the DHTML object, in order to add this feature to another component. Opening the methods node allows us to jump right to the node containing all of the code for column resizing.

Note that this node contains several methods. There are a number of small methods that enable column resizing. None of the methods really merits its own node, they belong together. This analysis is much more helpful than a simple class analyzer that would simply list all of the object methods.



Author: Joe Orr



  Created with ScreenBook Maker   Last update: 8/5/2002   Additional Trademark and Copyright Information