Contact | Privacy | Datenschutzerklärung | Impressum

Custom Menus by Keith Oustalet

This section is intended for people who wish to add their own distinctive flavor to their Web Site menus. We assume that you have already read the previous pages in this section, and that you have experimented with these concepts on your own. If you have indeed done this, you have no doubt noticed that both the heitml Web Site menu and the one included as part of your Download Package have a somewhat different appearance than the menus you have been working with thus far. The reason for this is that there are a number of Tags in the Outline Library that we haven't discussed yet, and these are the ones that give you the flexibility you need to customize your menu presentations.

We will begin with the <olTable> Tag and its related "helper" Tags. We have already made use of these Tags in our discussion of Frames on the previous page. This time, however, we will fill in the details to give you a better understanding of how they work.

The <olTable> Tag is intended to display a "Table of Contents" style menu (i.e. a menu that lists the names of all pages, divided into sections and sub-sections, similar to what you would expect to find at the beginning of any book or reference manual). It can also display certain Heading and Footing information such as Banners, Slogans, etc.

Normally, you would use the <olTable> Tag when you want to bypass or "dress up" the way the menu would appear if handled by the <olPage> Tag . A Table of Contents menu is ideally suited for displaying a Site Map in a scrollable Frame window. Another good place for such a menu would be at the top of a long list of included pages. In this case, the menu links could be tied to a named anchor Tag, taking the reader directly to the beginning of a particular topic on that page.

Let's begin our discussion of the <olTable> Tag by extracting a code fragment from the olFrame.hei file we defined on the previous page and taking another look at it:

olTable Environment Tag
as it appears in the file: olFrame.hei
<olTable c n>
 <NOBR>
 // Does this menu item begin a new section?
 // Yes: Make text font larger. 
 <if !isempty(c.kids) || len(n)==1
    || (len(n)==2&&n[0]==1)> 
    <p>
    <FONT SIZE=+1>
       <olNum c> <olSLink c>
    </FONT>
 <else>
     <olNum c> <olSLink c> 
 </if> 
 </NOBR>
 <BR>
</olTable> 

The if Tag in the above code fragment determines whether or not the current menu item begins a new section. If yes, the font size is increased by one and a link is created to the appropriate page using the <olSLink> Tag. Otherwise, the item is printed using the Browser's default font size, and again a link to the appropriate page is created.

Notice that new sections are separated by a blank using the HTML <P> Tag. This creates a visual break between sections, thereby enhancing readability. You could just as easily replace the <P> Tag with a Horizontal Ruler Tag <HR> or a bit of artwork such as a jpeg file that is displayed by the <IMG SRC="filename.jpg"> Tag.

Notice also that we have employed the <olNum> Tag, which prints a series of numbers in the form x.y.z... etc., where each number indicates the relative position of the page within the overall menu heirarchy. If you like, you can omit this Tag and print a plain menu with no numbering.

At first glance it may appear that the section of code between the <olTable> and </olTable> Tags is executed only once. If you're wondering how it is that an entire menu listing could be generated from such a code fragment, it may help to examine the code in the Outline Library to see how the <olTable> Tag is defined.

We've extracted the definition for you here:

olTable definition from the
Outline Library: outline.hei
<defenv olTable
   *cur *n o=gl._outline.root num=emptytuple;
   i=0;
   ArAppend (num, 1);
   if isdecl(o.kids);
      while i<len(o.kids);
	  cur = o.kids[i]; n=num;
          defbody;
          olTable c n o.kids[i]
             num; cur=c; n=num;
             defbody;
          /olTable;
          i=i+1; num[len(num)-1]=i+1;
      /while
   /if;
   Resize (num, len(num)-1);
   cur=null; n=null;
/defenv>

There are quite a number of things happening in this Tag definition which you may find hard to follow at the moment. The important thing to note is the portion highlighted in green, which shows that the <olTable> Tag calls itself in the middle of a while loop. This is an example of a programming concept known as recursion in which the steps of a procedure can be performed as many times as necessary, going deeper and deeper into a nested structure (in this case the <MenuOutline> Tag we defined in the previous section) until there are no more iterations of the data to work with.

Here is a walkthrough of what happens when the <olTable> Tag is executed:

  1. Pass the current menu item, its numbered position, and the entire Menu Outline structure as parameters to be operated on.
  2. Initialize a Counter Variable and add an element to an Array Variable to keep track of our position within the data structure.
  3. Test to see if this particular Menu Item has any sub-items or "kids". If so, then for each item, perform the formatting steps defined in the Web Page that initiated the call to this procedure.
  4. Repeat until all items in the Menu Outline structure have been processed.

Each time through the loop, the if condition tests to see if there are any further nested elements in the menu structure. In this way, the <olTable> Tag can call itself as many times as necessary, formatting and printing the individual menu items until it has reached the bottom level of the structure. Once it "hits bottom", the procedure begins to unwind, or "roll backwards", returning to menu items that were left in "suspense" until it became their turn to be formatted and inserted into the Web Page.

Next in our discussion is the <olMenu> Tag. Unlike the <olTable> Tag, this Tag is intended to work with <olPage> rather than bypassing it. In fact <olMenu> is part of the <olPage> definition, which means that it is called automatically every time you use <olPage> as part of your Web Page Template.

The interesting thing about <olMenu>, however, is that you don't have to accept the way it displays the menu structure you defined in <MenuOutline> . You can redefine <olMenu> and put it into your layout file. Take a look at the code below and see what extras we've added:

<olMenu> re-defined and placed
into the layout file: NewLayout.hei
<defenv olMenu par;
  let gl.wasopen=false >
  <IMG SRC="Logo.jpg" WIDTH="119" HEIGHT="65">
  <BR>
  <TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=160>
  <defbody> 
  <TR> <TD>
   <IMG SRC="Punkt2.jpg" WIDTH="41" HEIGHT="22">
  </TD> </TR>
  <TR> <TD>
    <a href="olFrame.hei">Frame</a>
  </TD> </TR>
</TABLE>
<CENTER>
 <TABLE CELLSPACING="0" CELLPADDING="8">
  <TR> <TD>
   <olATprev> 
    <IMG SRC="Prev.jpg" WIDTH="21" HEIGHT="21">
   </olATprev> 

   <olATnext> 
    <IMG SRC="Next.jpg" WIDTH="21" HEIGHT="21">
   </olATnext> 
  </TD> </TR>
 </TABLE>
</CENTER>
</defenv>

It's always good to start off with a product or corporate logo, if you have one. This serves to remind the User where he is, and brings an image to mind whenever (s)he thinks of your company or product.

As you can see, virtually everything in this code section is standard HTML formatting Tags. The defbody Tag is where the actual menu items will be displayed, and their appearance is governed by the <olMEntry> Tag, which we will discuss in a moment.

We've included a hot-link for the User to switch to the Frame view, if that is his preference.

Note that two new Outline Library Tags appear in a second HTML Table, below where the menu items will appear. The <olATprev> Tag creates a link the User can click on to jump back to the previous Section Heading page of the menu heirarchy, and clicking on the <olATnext> Tag would jump forward to the next Section Heading page. There are two additional Tags called <olAprev> and <olAnext> which provide similar functions, but instead of jumping back and forth across sections, they merely jump back and forth to the previous or next page in the menu. These last two Tags would more likely appear at the bottom of the main page contents, because it they would be in the reader's view and (s)he could click on a link to go back or forward without having to shift his/her eyes to the menu frame. We mention them here so that you can keep them in mind when you develop your pages.

Now let's look at the <olMEntry> Tag:

<olMEntry> re-defined and placed
into the layout file: NewLayout.hei
<def olMEntry o num;
 <if len(num)==1 &&
    (o.open || o.active || gl.wasopen)> 
  <TR> <TD>
   <IMG SRC="Punkt2.jpg" WIDTH="41" HEIGHT="22">
  </TD> </TR>
  <if gl.wasopen> <let gl.wasopen=false>
   <else> <let gl.wasopen=true>
  </if>
 </if>

 <if isempty(num) && o.active>
   < let gl.wasopen=true>
 </if> 

 <TR> <TD ALIGN="RIGHT">
  <if o.active> 
   <IMG SRC="Pfeil.jpg" WIDTH=18 HEIGHT=11>
  </if>

  <let i=1;
    while i<len(num)> &nbsp; &nbsp;
     <let i=i+1;
    /while>

  <if 1<len(num)>  <FONT SIZE="-1"> </if>

  <olSA o> 
   <NOBR> <? o.name html>  </NOBR>
  </olSA>

  <if 1<len(num)>  </FONT> </if> 

 </TD> </TR>
</def>

Although it may not be obvious at first, there are really only two things happening in this code. If you look closely at the HTML Tags in black print, you will see just two HTML Table Rows <TR>. The first one displays a jpeg image, but only shows up between menu sections. In other words, if the current menu item was defined by the <olSection> Tag, the GIF file will act as a visual separator. Otherwise, menu items defined by the <olEntry> Tag will be clustered together one row after another.

The next Table Row is composed of two parts. First, a jpeg image (in this case an arrow or "pointer") is displayed if the current menu item is active. In other words, if the menu item is called "Custom Menus" and that page is being displayed, an arrow will appear to draw your attention to that item in the menu listing.

All other menu items are listed in the usual manner, without the GIF image.

Two blank spaces are inserted each time a new sub-section begins. This too serves as a visual indicator to show which menu items are on the same level of the heirarchy, and which belong to lower nested levels.

Note that we've used yet another Outline Library Tag called <olSa> to print the name of the menu item. We could just as easily have used <olSLink>, but <olSa> has the additional advantage that it will create a link that includes an image source (even though we have not specified an image here).

As you can see, the Outline Library provides a wealth of Tags to suit any purpose. How and when you use them depends on how much work you're willing to do to customize the appearance of your menu listing.

We have not discussed all of the Tags in the Outline Library, but we have provided here an introduction to the ones you are most likely to use. For further information you should read the Outline Library page of the documentation.

Summary

In this section we took a brief look at ways to customize menu listings. We first discussed the <olTable> Tag, which is suitable for creating Table of Content style menus, and would most likely be used in a separate Frame, though other uses are possible.

We looked at some of the helper Tags, such as <olNum> and <olSLink>, and we also took a look at how recursion could be useful in situations where it is necessary to perform the same set of tests or proceedures on heirarchical data structures.

We next looked that the <olMenu> and <olMEntry> Tags to illustrate how you can dress up the appearance of your menus when using the <olPage> Tag as part of your Web Page Template.

In the code sample for the <olMEntry> Tag we used <olSa> in the place where <olSLink> would normally have appeared, to alert you to the fact that the Outline Library has a number of other useful Tags you should keep in mind for special purposes, and to remind you that you should read the documentation provided in the Outline Library section for further information.


This page was dynamically generated by the web application development tool RADpage of H.E.I. See "Was ist AJAX? " (in German). In Germany H.E.I. provides Webdesign in Mannheim and Web Programming (Programmierung).
© 1996-2024 H.E.I. All Rights Reserved.



Homepage
Intro/Features
Component Guide
Programming
  Language Guide
    Modular Pages
      Default Layout
      Outline Layout
        Custom Menus
    Dynamic Pages
    Interactive Pages
  Language Ref.
  Component Ref.
  Class Library
  User Components
  Tutorial
  New Features
  heitml 1
User Guide
Services
Privacy
Datenschutz
 
Contact / Impressum