See Also: Automating Web Page Authoring Web Authoring Examples Part 3: Site Builds Part 1: Automating Common Content

---

This example builds on the work that was done in Part 1: Automating Common Content.

Example files for this topic are found in

Program Files\APGen\Examples\Aut_Auth\NavBar

The example files were copied from the Aut_Auth\CommCont directory.  In this example, we will extend the functionality of each of the example.

Motivation

Navbars and menus are almost universally used for web site navigation.  Navbars are more common than menus, therefore we will implement navbars in this example.  The same concepts are used to automate building a menu system.

Navbars are useful for two reasons: (1) To provide links to other (related) pages in the site; (2) to determine your location within a site hierarchy.  Maintaining navbars is a difficult and regular process.  Anytime you add, remove, rename, or move a page, the navbar links on many pages need to be fixed.  Automating this process is easy to do and will save webmasters time and frustration.

Automating NavBar Creation

Navbars and sitemaps are typically hierarchical.  We need a way of storing and accessing site hierarchy data in a single location.  A database can be used, but XML is a better solution. 

Site.xml is a simple XML document that describes our web site.  To maintain our focus, we will not use a DTD or any other features beyond basic XML:

<site>
     <webpage title="Hello World!" fname="hello.htm"
          navbartitle="Hello World" written="true" />
     <webpage title="The Log Object" fname="objlog.htm"
          navbartitle="Log Object" written= "true">
          <webpage title="Log.Filename (r/w)" fname="logfilename.htm"
               navbartitle="Log.Filename" written="true" />
          <webpage title="Log.Write" fname="logwrite.htm"
               navbartitle="Log.Write" written="true" />
     </webpage>
</site>

A quick explanation of the XML schema used here: A single site tag contains all of the webpage tags.  Webpage tags can contain other webpage tags.  The webpage title attribute is the title of the web page. The fname attribute is the filename for the web page.  The navbartitle attribute is a shortened version of the title string.  When a link to a page is drawn on the navbar, we use the navbartitle string for the text associated with the link.  The written attribute indicates whether or not the APG script for the webpage has been written.  For example, the writtenattribute is true for hello.htm.  This means that the APG script hello.apg has been written.  The written attribute is used in Example 4: Creating New Pages.

This example uses the IE4 msxml component.  Using the IE5 Microsoft.XMLDOM component may be preferred, because it conforms to the approved W3C XML Document Object Model.  However, we used the IE4 component because APGen requires that IE4 be installed.  If you want to use the approved XML DOM for your applications, rewriting this example to use the Microsoft.XMLDOM component is easy to do.

Another advantage of using the IE5 XMLDOM component is that it is a validating XML parser.  The code for this example makes some assumptions about the site.xml document.  If there is an error in site.xml, then it may break some of the example code.  To make sure that the document is properly formatted, write a DTD and use a validating XML parser.  This is the right thing to do in a production environment. 

Back to the example:  Here is a new version of our RenderNavBar routine that uses the information in site.xml.  A procedure named RenderNavBarTree has been added.  This procedure uses recursion to navigate the xml document and to write out the navbar entries:

<%#
...
'
' RenderNavBarTree
'
' Writes a single navbar item
'
Sub RenderNavBarTree(oXmlElt, nLevel)

     ' Compute spaces - 3 nbsps for each level
     Dim strSpaces, nLevelCopy
     nLevelCopy = nLevel
     strSpaces = ""
     While (nLevelCopy > 0)
          strSpaces = strSpaces & "&nbsp;&nbsp;&nbsp;"
          nLevelCopy = nLevelCopy - 1
     Wend
    
     ' Grab filename and title
     Dim strFname, strTitle
     strFname = oXmlElt.getAttribute("fname")
     strTitle = oXmlElt.getAttribute("navbartitle")

     ' Write HTML for this item
     If (StrComp(strFname, Output.Filename, vbTextCompare) = 0) Then
          ' This is the current page: no HREF, but add an arrow
#%>          <img src="arrow.gif" width=12 height=15 alt="" border="0" align=right>         
<%#          Output.Write strSpaces & strTitle & "<BR>" & vbCRLF
     Else
          ' Add HREF
          Output.Write strSpaces & "<A " & strFname _
               & """ class=NavBar>" & strTitle & "</A><BR>" & vbCRLF
     End If
    
     ' Recursively call RenderNavBarTree for all children
     Dim oChildElt
     If Not oXmlElt.children Is Nothing Then
          For Each oChildElt In oXmlElt.children
               RenderNavBarTree oChildElt, nLevel+1
          Next
     End If
    
End Sub

'
' RenderNavBar
'
' Writes navbar content and formatting
'
Sub RenderNavBar

     ' Create the XML object and parse the XML file
     Dim oXml
     Set oXml = Script.CreateObject("msxml")
     oXml.URL = "file://" & Script.Dir & "site.xml"
     ' Note: previous line assumes that the site.xml file is in
     '  the same directory as the root script (hello.apg, objlog.apg, ...)
    
     ' Call RenderNavBarTree for each <webpage> that's a child of <site>
     Dim oXmlElt
     For Each oXmlElt In oXml.root.children
          RenderNavBarTree oXmlElt, 0
     Next
End Sub
...

RenderNavBar creates an msxml object, and reads in the site.xml file.  In a production environment, you will perform some error checking to make sure that site.xml is parsed correctly.  Next, RenderNavBar calls RenderNavBarTree for each webpage child of the site tag.  RenderNavBarTree writes a navbar link for the current webpage tag, and then recursively calls RenderNavBarTree for each child webpage tag.  RenderNavBarTree passes around a nLevel parameter to track the hierarchy depth of each webpage.  For each level in the hierarchy, the navbar link is indented by 3 spaces (using &nbsp; spaces).

Before RenderNavBarTree writes the navbar link, RenderNavBarTree checks to see if the webpage tag is for the current page: If the tag is for the current page, then there is no need to write a link to the current page.  Plain text with no HREF, plus an arrow graphic (arrow.gif), indicates the current page.  This shows the user their location in the site hierarchy.

Run any of the previous pages (hello.apg, objlog.apg, logfile.apg, logwrite.apg) in the Examples\Aut_Auth\NavBar directory to see the results of the new RenderNavBar.  For example, running objlog.apg creates file objlog.htm.  This is what the page looks like when it is viewed in the browser:

In addition to changing the RenderNavBar procedure, we made another change to template.apg: CSS settings were moved from a <STYLE> tag (which was duplicated on each page) to a file named site.css.  In procedure RenderPreContent, the <STYLE> tag was replaced with a <LINK> tag that points to site.css.  It is good practice to move CSS styles that apply to multiple pages to an external file.

Continue with  Part 3: Site Builds...

---