Contact | Privacy | Datenschutzerklärung | Impressum

Outline Library

Outline mode is normally automatically maintained by the RADpage Component Editor. However if you want reconfigure or reprogram part of the outline layout here is the detailed documentation.

The Outline Library organizes your Web Site in a tree structure, thereby creating a hierarchical menu. This menu is displayed in a User-defined format. The menu expands to show sub-pages upon entry to each portion of a Web Site, highlighting the current page. It contracts automatically when the User moves on to another section. Outline can also show a complete directory of the Web Site (equivalent to a Map of all pages), or even concatenate all the pages into a single document for printout purposes.

Examples using the Outline Library can be seen on this Web Site as well as on the heitml example pages delivered as part of the Download package. We assume then, that you are already familiar with how the menu works and will therefore concentrate on showing you how to create an Outline on your own.

A Web Site outline consists of Sections and Pages. Each entry in the outline is associated with a single heitml page and a name. For each Section there is one starting page. The name of each Section or Page is shown as a link in the menu. Clicking on this link calls the corresponding page for display. If the User clicks on a Section, the menu automatically expands or opens to reveal the pages belonging to that Section. The following is an example outline definition:

<olSection path="index.hei" name="Main Menu"><
      olEntry path="Main.hei"  name="Main Text Page "><
      olEntry path="main2.hei"  name="Main Text Second Page"><
      olSection  path="Section.hei" name="First Section"><
        olEntry path="text.hei" name="Text Page one"><
        olEntry path="text2.hei"  name="Text2"><
      /olSection><
/olSection>

The above code describes a Web Site with a main starting page named "Main Menu", located in the file "index.hei". It contains 2 pages, "Main Text Page" and "Main Text Second Page", and a sub-section named "Section.hei". The sub-section itself contains two more pages named "Text page one" and "Text2".

To include an Outline definition like the one above into all of your Web pages, perform the following steps:

  1. Place the Outline definition for your Web site into a private layout file (e.g. woutline.hei).
  2. In the central layout file (e.g. mylayout.hei), insert

    < include name="outline.hei" />

  3. After including outline.hei in the central layout file, include the file with Outline definition that you created in step 1.
  4. Place the <olPage> Environment (i.e. the main Environment Tag in the Outline Library) within the <BODY> definition of your central layout file.
  5. Include the central layout file in all of your Web pages.

Outline Components and Tags

< olSection path name=null nosel=null > ... </olSection>

This Environment Tag defines a Section within an outline definition. The path parameter must be the name of the associated heitml file. The name parameter specifies the name of the Section as it should appear in the menu. If omitted, the link created in the menu defaults to the filename (without path and extension). With nosel="nosel" a menu item can be made inactive (i.e. it is displayed but cannot be selected, since no link is created).

<olSection> should be used in a layout file that is included in all pages of a Web Site. The outermost <olSection> defines the starting page and the name of the main menu. The <olSection> Tag may contain only <olEntry> Tags and additional <olSection> Environments (each of which becomes a sub-section).

Actually, the file name must be an absolute URL. An exception to this is that simple file names are allowed if all pages are contained within a single directory. The <olSection> should always point to a page that contains an outline menu that can be used to navigate to the pages that are in this section.

< olEntry path name=null nosel=null />

Defines a page within an outline definition. The path parameter must be the name of the associated heitml file. The name parameter is the name of the page as it should appear in the menu. If omitted, the link created in the menu defaults to the filename (without path and extension). With nosel="nosel" a menu item can be made inactive (i.e. it is displayed but cannot be selected, since no link is created).

<olEntry> can only be used within an <olSection> Tag. The file name must be an absolute URL. An exception to this is that simple file names are allowed if all pages are contained within a single directory. Entries can point to URLs that do not necessarily contain an outline menu.

< olPage menuwidth="140" spacewidth="30" > ... </olPage>

<olPage> can be used within the <BODY> Environment. It creates a page with the menu on the left and the body of the <olPage> on the right. The menuwidth parameter specifies the width of the menu. spacewidth is the width of the space between the menu and the text.

Menu layouts can be customized by redefining the <olMenu> and the <olMEntry> Tags. As an alternative to using the <olPage> Tag, you can use your own layout and simply include the menu by calling the <olMenuInt> Tag.

Note that the menu will be displayed correctly only if the current page appears with the correct filename in the outline definition. The Outline Library finds out from the name of the heitml Page displayed which sections of the menu are open and need to be displayed.

< olMenu > ... </olMenu>

This Environment Tag is intended to be redefined. It displays the menu on the left hand side of an <olPage>. By redefinition, the menu layout can be adapted according to the User's needs.

< olMenuInt />

If you are not using the <olPage> layout, you can use this Tag to show a menu inside your own page layout. <olMenuInt> creates the menu by traversing all menu entries that are currently opened. Each menu entry is shown using the <olMEntry> Tag.

< olMEntry o num />

This Tag is intended to be redefined. It displays a menu entry. If you do not redefine it, it shows the section number followed by the section name.

The o parameter is a tuple describing the current menu entry. You can use the <olSName>, <olSLink>, and <olSa> Tags to print the name or to create a link to the designated page or section.

You can also access o directly: o.name is the name of the menu entry, o.file the filename and o.sel is true if the entry is active. o.active is true if the menu entry belongs to the current page. o.open is true for menu entries within sections containing the current page.

The num parameter is an array of integers giving an ordinal number of the current menu entry. num[0] is the number of the section, num[1] the number of the sub-section, etc. Numbers start counting by 1.

< olTable *cur *n > ... </olTable>

This Tag can be used to create a Table of Contents. The body of the Environment is executed for each menu entry in the natural order. The cur parameter is a tuple describing the current menu entry. It has the same fields as the o parameter of the <olMEntry> Tag, and n has the same meaning as the num parameter of the <olMEntry> Tag.

You can use the <olSName>, <olSLink>, and <olSa> Tags to print the name or to create a link to the designated page or section.

< olSname o />

Prints the name of the current page or section. This Tag should be used inside an <olMEntry> or an <olTable> Tag. The o parameter should either be the o from <olMEntry> or the cur parameter from <olTable>.

< olSLink o addurl="" />

Prints the name of the current Pge or Section and makes it a link to this Page or Section (if it is active).

This Tag should be used inside an <olMEntry> or an <olTable> Tag. The o parameter should either be the o from <olMEntry> or the cur parameter from <olTable>.

< olSa o addurl="" > ... </olSa>

Makes the text or the picture inside a link to the current page or section.

This Environment Tag should be used inside an <olMEntry> or an <olTable> Tag. The o parameter should either be the o from <olMEntry> or the cur parameter from <olTable>.

< olNum o addurl="" />

Prints the number of the current page or section in the form x.y... where x is the number of the section, y the number of the subsection, etc.

This Tag should be used inside an <olMEntry> or an <olTable> Tag. The o parameter should either be the o from <olMEntry> or the cur parameter from <olTable>.

< olAnext > ... </olAnext>

Creates a link to the next page in the outline. The inner part of the Environment can be text or a picture. It creates an HTML link to the next page (i.e. the next Page or Section starting page within the same Section). If there are no more pages in the current section, the inner part of the Environment is not shown.

<olAnext> is comparable to the Anchor Tag in HTML. However, the page it links to is not given explicitly by an href parameter, but implicitly in the outline of the Web Site. This means that re-arranging the pages in the outline does not require you to fix all these links on the pages. They are automatically adjusted.

< olAprev > ... </olAprev>

<olAprev> is similar to <olAnext>, but it links to the previous Page within the same Section.

< olAup > ... </olAup>

<olAup> is similar to <olAnext>, but it links to the starting page of the current section (i.e. it goes up one level in the hierarchy).

< olATnext > ... </olATnext>

Creates a link that traverses to the next page in the outline. If you look at the Table of Contents of the Web Site (i.e. the Map of all pages), then traversing to the next page just means going to the next line in the Table of Contents. In other words: If the current page is the starting page of a Section, then <olATnext> goes to the first Page or sub-section of this Section. If the current page is itself merely a page (and not a Section), then <olATnext> goes to the next page within the same section. If the current page is the last one within the current Section, then <olATnext> leaves the current Section and goes to the page or sub-section immediately following the current Section (it might even be necessary to leave more than the current Section in order to find the next page).

If there is no next page, the content of <olATnext> is not shown.

< olATprev > ... </olATprev>

Creates a link that traverses backwards to the previous page in the outline. If you look at the Table of Contents of the Web Site (the Map of all pages), then traversing to the previous page just means going back to the previous line in the Table of Contents.

If there is no previous page (as is the case in the main menu), the content of <olATprev> is not shown.

Advanced Functionality

The Outline Library creates a tuple structure representing the structure of the Web Site. There is one tuple per page or section. The following fields should be of interest to the User:

  • name Name of the page or section as it appears in the menu
  • file Filename or link to the page
  • sel true if the menu entry is active
  • open true if it is a section containing the current page
  • active true if it is the current page
  • kids contains an array of all sections and pages contained within this section.
  • father contains the enclosing section

gl.outline.root contains the tuple representing the main menu. gl.outline.current contains the tuple representing the current page.

The functions olGoNext(o), olGoPrev(o), olGoTNext(o) and olGoTPrev(o) deliver the next, previous, transitive next, and transitive previous page or section starting from a given page. As parameter they get the tuple representing the page internally.

In fact, the <olSName>, <olSLink>, and <olSa> Tags take a tuple representing a section or page as argument. Therefore:

<olSLink olNext(gl.outline.current)>

creates a link to the next page.

Some Outline Tags have an additional parameter o defaulting to the main menu. These are <olPage>, <olMenuInt>, and <olTable>. By giving them another page as parameter, the menu or Table of Contents can be created with another starting section.

Other Outline Tags have an additional parameter o defaulting to the current page or section. These are <olAnext>, <olAprev>, <olATnext>, <olATprev>, and <olAup>. So, for example:

<olATnext o=gl.outline.root > First Page </olATnext>

creates a link to the first page after the main menu.


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
  Language Ref.
  Component Ref.
  Class Library
    Library Files
    Std Library
    Ses Library
    Component Library
    Layout Library
    Outline Library
    HTML Extensions
    Date/Time Library
    Math Library
  User Components
  Tutorial
  New Features
  heitml 1
User Guide
Services
Privacy
Datenschutz
 
Contact / Impressum