Initializing Global Variables XSLT Source Code

page 178 var topmainover=new Image77,15; var topmainout=new Image77,15; var bottommainover=new Image77,15; var bottommainout=new Image77,15; var topsectionover=new Image98,15; var topsectionout=new Image98,15; var bottomsectionover=new Image98,15; var bottomsectionout=new Image98,15; var topfeedbackover=new Image80,15; var topfeedbackout=new Image80,15; var bottomfeedbackover=new Image80,15; var bottomfeedbackout=new Image80,15; var toppreviousover=new Image77,15; var toppreviousout=new Image77,15; var bottompreviousover=new Image77,15; var bottompreviousout=new Image77,15; var topnextover=new Image60,15; var topnextout=new Image60,15; var bottomnextover=new Image60,15; var bottomnextout=new Image60,15; var topnextsectionover=new Image108,15; var topnextsectionout=new Image108,15; var bottomnextsectionover=new Image108,15; var bottomnextsectionout=new Image108,15; menu1over.src=imagemasterhimenu1.jpg; menu1out.src=imagemastermenu1.jpg; menu2over.src=imagemasterhimenu2.jpg; menu2out.src=imagemastermenu2.jpg; menu3over.src=imagemasterhimenu3.jpg; menu3out.src=imagemastermenu3.jpg; ... var mainblurb=Main menu; var sectionblurb=Section menu; var feedbackblurb=Give feedback on this tutorial; var previousblurb=Go to previous panel; var nextblurb=Go to next panel; var nextsectionblurb=Go to next section; topmainover.src=..ih-main.gif; topmainout.src=..imain.gif; ... } function iOutimage { if browser==N3document[image].src=evalimage + out.src; } function iOverimage { if browser==N3document[image].src=evalimage + over.src; } -- This JavaScript code is used for the mouseover effects on the HTML panels. To streamline processing, we generate this code as a variable. Weve removed roughly half the code here to keep the listing short; most of this code deals with initializing a number of variables. Whenever we create a new HTML page, we simply insert this variable into the output document: script language=javascript xsl:value-of select=mouse-effects script As in traditional programming, storing frequently used values in a variable instead of calculating them each time simplifies the code and improves performance. Notice in the code listing that a significant amount of JavaScript code is generated from the XML source page 179 document. This fragment is the XSLT that generates a set of JavaScript variables that contain the titles of all the sections: xsl:for-each select=tutorialsection xsl:textvar menuxsl:text xsl:value-of select=position xsl:textblurb=xsl:text xsl:value-of select=title xsl:text; xsl:text xsl:value-of select=newline xsl:for-each The code generates seven new variables, one for each section element in our tutorial: var menu1blurb=Installing and configuring Toot-O-Matic; var menu2blurb=Creating your first tutorial; var menu3blurb=developerWorks editorial guidelines; var menu4blurb=Toot-O-Matic tag guide; var menu5blurb=Toot-O-Matic tag reference; var menu6blurb=Troubleshooting; var menu7blurb=Feedback; This is one of many cases when a naming convention is invaluable. If we want the JavaScript variable that contains the title of the fifth section, we know that variable is named menu5blurb . This technique is useful in many other places, as well. If were creating HTML files for the third section , and were currently processing the fourth panel in that section , and the root filename were using is tootomatic, the newly created HTML file will be named tootomatic-3-4.html. Similarly, if we want to create a link to the previous and next HTML files, those files are named tootomatic-3-3.html and tootomatic-3-5.html, respectively. Youll see this technique used throughout this case study.

9.5.3 Generating the Main Menu Panel

The Main menu panel consists of a standard header and footer, with a list of all sections of the tutorial in between. Clicking on any of the section titles takes you to the first panel in that section. To enhance the visual appeal of the panel, generated graphics and mouseover effects are used to display the panel title. The stylesheet that generates the list of sections is straightforward. The header and footer are generated from boilerplate text; the list of sections is generated with an xsl:for-each element: xsl:for-each select=section a border=0 xsl:attribute name=href xsl:value-of select=fn xsl:text-xsl:text xsl:value-of select=position xsl:text-1.htmlxsl:text xsl:attribute xsl:attribute name=onMouseOver xsl:textiOvermenuxsl:text xsl:value-of select=position xsl:text; self.status=menuxsl:text xsl:value-of select=position xsl:textblurb; return true;xsl:text 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