Implementation

This section lists the following key parts of the sample application:

• XML Input
• XSL Code
• JavaScript Code
• HTML Output

XML Input

The following XML code from po1_ann.xml defines the data for a purchase order, including shipping and billing addresses and a list of items ordered.

<purchaseOrder orderDate="1999-10-20">
  <ShipTo isPicked="1" country="US">
    <name>Alice Smith</name>
    <street>123 Maple Street</street>
    <city>Mill Valley</city>
    <state>CA</state>
    <zip>90952</zip>
  </ShipTo>
  <BillTo isPicked="1" country="US">
    <name>Robert Smith</name>
    <street>8 Oak Avenue</street>
    <city>Old Town</city>
    <state>PA</state>
    <zip>95819</zip>
  </BillTo>
  <LineItems isPicked="1">
    <LineItem partNum="872-AA">
      <ProductName>Lawnmower</ProductName>
      <Quantity>1</Quantity>
      <USPrice>148.95</USPrice>
      <comment>Confirm this is electric</comment>
    </LineItem>
    <LineItem partNum="926-AA">
      <ProductName>Baby 
Monitor</ProductName>
      <Quantity>1</Quantity>
      <USPrice>39.98</USPrice>
      <ShipDate>1999-05-21</ShipDate>
    </LineItem>
  </LineItems>
  <comment>Hurry, my lawn is going wild!</comment>
</purchaseOrder>

XSL Code

The XSL code below comes from treeview.xsl. It produces an HTML file that includes calls to JavaScript code implemented in treemenu.js. Notice, too, that the code defines a template named treeview that includes the element <xsl:call-template name="treeview">. Thus this code uses recursion to process the input data and create a hierarchical tree representation. The code also uses <xsl:when test="number($depth)=0"> to record recursive depth and <xsl:when test="$content/*"> to control the processing flow of the recursion.

...
 <xsl:template name="treeview">
    <xsl:param name="depth"/>
    <xsl:param name="content"/>
    <xsl:choose>
      <xsl:when test="number($depth)=0">
          foldersTree = gFld("Document Tree View", "")
         <xsl:for-each select="$content/*">
          <xsl:call-template name="treeview">
            <xsl:with-param name="content" select="."/>
            <xsl:with-param name="depth" select="number($depth)+1"/>
          </xsl:call-template>
        </xsl:for-each>
      </xsl:when>
      <xsl:otherwise>
        <xsl:choose>
          <xsl:when test="$content/*">
            <xsl:choose>
              ...

JavaScript Code

This sample application uses JavaScript to enable an otherwise static page to respond to UI events, making the page interactive. For example, the following code from treemenu.js defines responses when a user clicks on a folder icon (representing a category of information such as Ship To data) or a document icon (representing a data item such as a City name).

function clickOnFolder(folderId) 
{ 
  var clicked = indexOfEntries[folderId] 
  if (!clicked.isOpen) 
    clickOnNode(folderId) 
  return  
  if (clicked.isSelected) 
    return 
} 
 
function clickOnNode(folderId) 
{ 
  var clickedFolder = 0 
  var state = 0  
  clickedFolder = indexOfEntries[folderId] 
  state = clickedFolder.isOpen 
  clickedFolder.setState(!state) //open<->close  
} 

HTML Output

The file result.html shows the HTML code generated when the sample application processes the data in po1_ann.xml. The generated code includes calls to functions implemented in the JavaScript file treemenu.js.