Generating the Main Menu Panel

page 180 xsl:attribute xsl:attribute name=onMouseOut xsl:textiOutmenuxsl:text xsl:value-of select=position xsl:text; self.status=; return true;xsl:text xsl:attribute img width=380 height=20 border=0 xsl:attribute name=name xsl:textmenuxsl:text xsl:value-of select=position xsl:attribute xsl:attribute name=src xsl:textimagemasterxsl:text xsl:textmenuxsl:text xsl:value-of select=position xsl:text.jpgxsl:text xsl:attribute xsl:attribute name=alt xsl:value-of select=position xsl:text. xsl:text xsl:value-of select=title xsl:attribute img a br xsl:for-each This XSLT produces the following HTML code for our example XML file: a border=0 href=tootomatic-1-1.html onMouseOver=iOvermenu1; self.status=menu1blurb; return true; onMouseOut=iOutmenu1; self.status=; return true; img border=0 height=20 width=380 name=menu1 src=imagemastermenu1.jpg alt=1. Installing and configuring Toot-O-Matic a br a border=0 href=tootomatic-2-1.html onMouseOver=iOvermenu2; self.status=menu2blurb; return true; onMouseOut=iOutmenu2; self.status=; return true; img border=0 height=20 width=380 name=menu2 src=imagemastermenu2.jpg alt=2. Creating your first tutorial a br a border=0 href=tootomatic-3-1.html onMouseOver=iOvermenu3; self.status=menu3blurb; return true; onMouseOut=iOutmenu3; self.status=; return true; img border=0 height=20 width=380 name=menu3 src=imagemastermenu3.jpg alt=3. developerWorks editorial guidelines a br a border=0 href=tootomatic-4-1.html onMouseOver=iOvermenu4; self.status=menu4blurb; return true; onMouseOut=iOutmenu4; self.status=; return true; img border=0 height=20 width=380 name=menu4 src=imagemastermenu4.jpg alt=4. Toot-O-Matic tag guide a br a border=0 href=tootomatic-5-1.html onMouseOver=iOvermenu5; self.status=menu5blurb; return true; onMouseOut=iOutmenu5; self.status=; return true; img border=0 height=20 width=380 name=menu5 src=imagemastermenu5.jpg alt=5. Toot-O-Matic tag reference a br a border=0 href=tootomatic-6-1.html page 181 onMouseOver=iOvermenu6; self.status=menu6blurb; return true; onMouseOut=iOutmenu6; self.status=; return true; img border=0 height=20 width=380 name=menu6 src=imagemastermenu6.jpg alt=6. Troubleshooting a br a border=0 href=tootomatic-7-1.html onMouseOver=iOvermenu7; self.status=menu7blurb; return true; onMouseOut=iOutmenu7; self.status=; return true; img border=0 height=20 width=380 name=menu7 src=imagemastermenu7.jpg alt=7. Feedback a Notice the number of things that are automatically generated in this list of sections. We know the filename of any given section, thanks to our filenaming convention. The first panel in the fifth section of the tutorial is tootomatic-5-1.html, for example. For the JavaScript mouseover effects we mentioned previously, we name the img elements in the list menu1 , menu2 , etc. Similarly, the name of each graphic is imagemastermenu1.jpg, imagemastermenu2.jpg, etc. The onMouseOver attribute uses variables such as menu1blurb and menu2blurb . Generating these items removes the chance for human error once the stylesheets are correct and allows us to control the look and feel of the HTML pages in the tutorial.

9.5.4 Generating the Section Indexes

To generate a section index, we create an HTML file with an ordered list of all of the panel elements in the current section . Retrieving the titles of all the panels can be done with a xsl:for-each element in the stylesheet: xsl:for-each select=panel img border=0 src=..iarrow.gif a xsl:attribute name=href xsl:value-of select=fnxsl:text-xsl:text xsl:value-of select=sectionNumberxsl:text-xsl:text xsl:value-of select=positionxsl:text.htmlxsl:text xsl:attribute xsl:value-of select=positionxsl:text. xsl:text xsl:value-of select=title a br xsl:for-each In this listing, the variable fn is defined as the root filename used to generate all HTML filenames for this tutorial. The filename convention used for section indexes is index1.html for the first section index, index2.html for the second section index, etc. This convention makes it easy to generate the section index when we need it, and it makes it easy for the individual panels in a given section to reference the proper section index on each panel. We use the Xalan Redirect extension to write output to multiple files. Heres how we invoke that extension to begin writing output to another file: xsl:for-each select=section redirect:write select=concatcurDir, fileSep, index, position, .html The select attribute of the redirect:write element defines the name of the output file. To generate this filename, we concatenate the current directory to which were writing files a global variable, the file separator character another global variable, the text index , the position of this section, and the text .html . If we use the tootomatic directory on a Windows machine, the index for the second section will be written to the file page 182 tootomatic\index2.html . We use the Redirect extension whenever we need to generate an HTML file for a section index or an individual panel.

9.5.5 Generating the Individual Panels

The masthead and footer of each panel are fairly straightforward; both use a predefined format and a series of links common to all pages on IBM sites. This is a perfect use for named templates. We need to create certain HTML markup for the masthead of each HTML page, and we need to create more markup for the footer of each page. In addition, we need to create the title bar at the top of each page and a navigation bar an area with Previous and Next links, among other things at the top and bottom of most pages. We use four templates, cleverly named dw-masthead , dw-title-bar , dw-nav-bar , and dw-footer , to do this: xsl:call-template name=dw-masthead xsl:call-template name=dw-title-bar xsl:call-template name=dw-nav-bar xsl:with-param name=includeMain select=youBetcha xsl:with-param name=sectionNumber select=sectionNumber xsl:with-param name=position select=pos xsl:with-param name=last select=last xsl:with-param name=topOrBottom select=top xsl:with-param name=oneOrTwo select=two xsl:call-template -- Processing for the main body of the page goes here -- xsl:call-template name=dw-nav-bar xsl:with-param name=includeMain select=youBetcha xsl:with-param name=sectionNumber select=sectionNumber xsl:with-param name=position select=pos xsl:with-param name=last select=last xsl:with-param name=topOrBottom select=bottom xsl:with-param name=oneOrTwo select=two xsl:call-template xsl:call-template name=dw-footer Of the four templates, only dw-nav-bar takes any parameters. Depending on the page were currently generating, we may or may not need the Main menu button we dont include this button on the Main menu panel. We need the current section number so the navigation bar can create filenames for the links to the section menu, the previous panel, and the next panel. The position parameter defines the position of this particular panel; last defines the position of the last panel. If position is 1, then the Previous button will be disabled. If position is equal to last , then the Next button will be disabled. The parameter topOrBottom defines whether this navigation bar is being created at the top or bottom of the panel we have to name the images differently so the JavaScript mouseover effects work correctly. Finally, the oneOrTwo parameter determines whether this panel will have two navigation bars or just one. This is also necessary for the mouseover effects. Now that weve built all these parts of the page, building the actual content of the panel is somewhat anticlimactic. We support a limited set of HTML tags the 20 or so most-used tags, added sparingly as weve needed to add new functions to the tool, most of which are converted directly into their HTML equivalents.

9.5.6 Generating the PDF Files

Converting the XML document to an XSL Formatting Objects XSL-FO stream is fairly straightforward, as well. Our printed layout consists of the graphics and text from the tutorial, combined with page numbers, headers, and footers to create high-quality printed output. We use the Apache XML Projects FOP Formatting Objects to PDF tool to do this.