Joe Orr's DHTML Widget Page www.3dtree.com
All Widgets copyright 2002 by Joe Orr. The widgets can be used freely under the terms of the Perl Artistic Licence.


Checkbox Tree Widget: MSIE 5.5+, Netscape 6+; Opera 7+

This widget is for use in choosing nested options, similar to the checkbox trees in the Windows 2000 program installation dialogs.

Checkbox Tree Widget sample page

Checkbox Tree Code with Documentation (Leo File) : The code file has extra structure and documentation embedded using the Metastructural programming editor Leo. Leo is a revolutionary tool for documenting and reading code, and you'll find that if you view the code in Leo rather than simply looking at the source Javascript in the sample page, that it will be much easier to understand and modify the script. To view the Leo source file, download and install LEO and then open file with Leo. (Quick Intro to Leo).

 

XML Tabular Data Display Widgets

The following widgets are provided with XSLT stylesheets that will convert XML row data into a tabular DHTML widget. Simply load your data into an XML form similar to one of the sample XML files, apply the XSLT stylesheet, and your data appears in the DHTML table. Don't know what XML and XSL are? Check this quick intro. (The more powerful widgets are currently MSIE only because they were written before the release of Netscape 7. They could be fairly easily converted to work with Netscape 7, but I haven't had time yet. Volunteers anyone?)


Flextable: A DHTML Grid Control (MSIE 5.5+ Only)

The Flextable widget is a DHTML widget for displaying tabular data in a paged form. It has some extra functionality useful for displaying large amounts of data. You can use the XSLT stylesheet below to display your XML data in a Flextable grid. Features include:

  • First page is loaded and displayed immediately, no matter how much data the page contains.
  • Click to sort
  • Alternate colors
  • Fixed and scrolling columns
  • Configure number of rows, formatting, number of fixed columns, other options
  • Column Resizing
  • Movable columns

For more features, see docs in the Leo file (explanation below).

Sample output page

Flextable XSLT

Sample XML data

Flextable.xsl is a fairly complicated piece of Javascript. The LEO file contains all of the code, embedded in extra documentation, including a code outline that is very helpful in following the structure of the code. For instructions on viewing the file in LEO, see the Checkbox Tree Widget section below. After you have the file opened in LEO, you can generate the flextable.xsl file by pressing <CTRL> <SHIFT><A>.

Flextable LEO file

 

Multilevel Flextable: A DHTML Grid Control (MSIE 5.5+ Only)

This widget is a version of the flextable that can display a parent table and unlimited child tables one level deep. The output is scolling rather than paged.

  • First table of datais loaded and displayed immediately, no matter how much data the page contains.
  • Many of same features as paged Flextable including click-to-sort and column resizing.
  • Child tables are inserted asynchronously so users can see parent table first and then select child data.

Sample output page

Multilevel XSLT

Sample main XML data   Sample detail XML   Sample detail XML

Deploying this widget: The sample file has an html frame (ml.htm) that displays the widget in the right pane (main.htm) and a menu in the left pane for selecting a type of detail to insert. To use your own data, look at the sample xml files and edit to suit your data. Then, use the multilevel.xsl file to produce the display page "main.htm" from your date. Create as many detail xml files as you like and deploy using the javascript in left.htm.

When editing the xml files, the only requirement is that the first element of each row of the main data have a unique id (can be anything) and the child xml similarly has an id matching the parent row. Examine the javascript in the left.htm file to see how to call the child xml and insert into the parent table.

Note to programmers: if you start working on this code, be aware that it has a lots of extra code for features that have been disabled for this public version. The disabled features were either unfinished or difficult to maintain. As always, the Leo file has copious explanations.

Multilevel Leo file

 

Paged Table Widget: IE 4+, Netscape 4+

This widget is for presenting tabular data in a paged format. It works identically in either Netscape 4+ or Internet Explorer 4+. This is a simple widget that demontrates how to get a paged output in Netscape 4, but is obsolete now that Netscape 7 has scriptable DHTML.

Paged Table sample page

To use this widget in your own pages, either use the Javascript directly, or use the XSLT stylesheet below to produce the DHTML page:

paged.xsl

The sample page above was produced with the following XML data:

data.xml

To produce your own sample file, download the Widget XSL, the sample XML, and then use a tool like Instant Saxon to generate the xml.

To generate a sample DHTML page from the above with Instant Saxon:

  1. Download Instant Saxon
  2. Download paged.xsl and data.xml (above)
  3. Place this required file in the same directory as paged.xsl and data.xml
  4. enter the following command: 
saxon saxon -o test.htm data.xml paged.xsl


Using XML/XSL and the above widgets

Frequently Asked Question: I don't know anything about XML or XSL. How do I use this thing?

XML is like html, but you make your own tags to describe your data. See any sample XML file above. Also see my somewhat out of date but very simple XML intro page.

Once you have your data in the XML format as in the sample above, you can use flextable.xsl to transform it into the Flextable DHTML Grid. All you need is a "processor", that is, a program that will apply the XSLT to the XML. It so happens that Internet Explorer 5.5+ and Netscape 7 have such processors built in, so you can simply add this processing instruction right after the xml declaration:

<?xml:stylesheet type="text/xsl" href="flextable.xsl"?>

and the browser will display your XML in the DHTML table. (Of course, widget.xsl must be in the same folder). Demo of this techique:

Sample xml with processing instruction pointing to flextable.xsl

You can see that the above link shows the Flextable DHTML Grid, but if you right-click and View Source, you see that the source is just the sample xml file above plus the processing instruction.

This technique of simply adding a processing instruction and then viewing in the browser only works with certain browsers, but since the current Flextables only work with MSIE anyway, this isn't much of a limitation. (Both could be converted to work with Netscape 7, but I haven't had time... any volunteers?)

You can also use another processor to create the output first as an htm file before displaying in the browser. There are a number of processors available for use as components in programs - one of the best known is XALAN. For example, if you're writing a Java program that spits out XML, you could use Xalan to process the XML into HTML or whatever. Xalan comes with sample code for Java programmers.

Also, there is a command line processor called Saxon - for some more out-of-date info see my XSLT page. See also the example instructions for the paged table widget above.

Another Frequently Asked Question: How does the Javascript work? How do I use this Javascript without using XSLT?

Download and install Leo (see top entry). Everything is explained in the Leo file.

email:

www.nycircuits.com : xslt expert contracting