<?xml version="1.0" encoding="ISO-8859-1"?>
<screenbook>
<title realName="C8 Flextable">Flextable</title>
<category realName="Leo">Leo</category>
<subcategory realName="Examples">Examples</subcategory>
<format realName="Tutorial">Tutorial</format>
<description></description>
<keywords></keywords><ldate>8/5/2002</ldate><version>draft</version>
<locations>
<location>
C:\testtt\Leo\Examples\Tutorials\C8 Flextable\</location>

</locations>

<pages>
<page>
<text>

<span id="pagetext"><![CDATA[<p><strong>Flextable</strong> 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.</p><p>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 <a href="http://www.screenbooks.net/jorr/js/">here</a>. A Leo file containing the component is also available from the same location.</p><p>Flextable is distributed&#160;in an XSLT stylesheet. You use the stylesheet to process tabular XML, and the ouput is a DHTML page with the Flextable component.</p><p>&#160;</p>]]></span>

</text>
<picture>[Empty]</picture>
<title>Flextable</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
<page>
<text>

<span id="pagetext"><![CDATA[<p>Since the <strong>Flextable</strong> component is distributed in an XSLT stylesheet, the process of actually&#160;displaying the component to the&#160;viewer goes like this:</p><ol> <li/>Server (e.g. JSP page) makes XML&#160; <li/>Server applies the <strong>client.xsl</strong> stylesheet to the XML. <li/>The result is DHTML (HTML + a Javascript array of data + Javascript for the component) that is sent back to the browser. <li/>The browser executes the Javascript of which the component consists. </ol><p>The actual component is a Javascript object.</p><p> Any developer wishing to extend or modify the component is going to need information about the XML format that the stylesheet explains.&#160;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. </p>]]></span>

</text>
<picture>[Empty]</picture>
<title>How the Flextable is used</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
<page>
<text>

<span id="pagetext"><![CDATA[<p> Packaging the XSLT template and a sample XML file in a single Leo file makes distribution of the component much more easy and understandable.</p><p>The XSLT and Javascript can be separated simply by putting each in separate nodes.</p>]]></span>

</text>
<picture width="640" height="480" ldate="" id="pagepic">pic03.png</picture>
<title>Package in Leo</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
<page>
<text>

<span id="pagetext"><![CDATA[<p>Opening up the main template of the XSLT stylesheet, we can immediately see where the output for the HTML &lt;head&gt; and &lt;body&gt; elements will be.</p>]]></span>

</text>
<picture width="640" height="480" ldate="" id="pagepic">pic04.png</picture>
<title>head and body elements</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
<page>
<text>

<span id="pagetext"><![CDATA[<p>Looking at the headlines in the &lt;head&gt; and &lt;body&gt; 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.</p>]]></span>

</text>
<picture width="640" height="480" ldate="" id="pagepic">pic05.png</picture>
<title>Code for object, and code where object is created</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
<page>
<text>

<span id="pagetext"><![CDATA[<p>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 &lt;script&gt; node, we are looking at pure Javascript that will be passed to the browser. We don't need to worry about XSLT.</p>]]></span>

</text>
<picture width="640" height="480" ldate="" id="pagepic">pic06.png</picture>
<title>Javascript for the dhtmltable</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
<page>
<text>

<span id="pagetext"><![CDATA[<p>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 <strong>all</strong> of the code for column resizing.</p><p>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.</p>]]></span>

</text>
<picture width="640" height="480" ldate="" id="pagepic">pic07.png</picture>
<title>Examining column resizing code</title>
<author>Joe Orr</author>
<sauthor>[Empty]</sauthor>
<cp>Copyright 2002 All Rights Reserved</cp>
<authoremail>orrj@jserv.com</authoremail>

</page>
</pages>
</screenbook>


