HTML Executable Documentation - Table Of Contents (TOC)

Table Of Contents (TOC)

Applies to HTML Viewer, IE Browser publications.

Introduction

Adding a table of contents to your publication or ebook provides end users with a hierarchical view of the content (we call it a contents tree view or even TOC). Users click a topic listed in the table of contents, and are taken directly to the information they are looking for.

You can design your table of contents so that the HTML pages (or PDF documents) contained in your publication are organized by subject or by category. You can organize your subject topics in the table of contents using icons that identify main topics and subtopics. For example, if you use the default icons, HTML Executable provides a “chapter” (or header) icon for main topics and a “page” icon for subtopics. You can of course change the default icons: special icons indicating new or updated pages are available to help end users quickly scan the table of contents for new information.

When an end user opens the table of contents and clicks a topic title (or press Return), the HTML page associated with that title will open.

Updating the TOC at runtime

Configuring TOC properties

You can modify the properties for the contents tree thanks to the Application Settings => Visual Controls => Contents Bar object.

IMPORTANT: be sure that the Visible property in the user interface tab is set to TRUE if you want your contents tree to appear in the publication!

You may want to show all topics or show only those topics that beginning users are likely to need. When designing a table of contents, keep the following in mind:

Book icons represent headings. Double-clicking a book icon enables users to see the subentries under that heading. Subentries can be other book icons or page icons.
Page icons represent topics. Double-clicking a page icon enables users to display a topic or run a macro.

Managing TOC entries

You can manage your TOC visually using the Tree editor as shown on this snapshot:

Add Header lets you add a new “node chapter” to the contents tree. Chapters generally are not associated with any HTML page (but this is not an obligation: you can of course assign HTML pages / PDF to chapters) and contain subtopics. You will be first prompted to enter the name of the chapter.
Add Page will ask you to select one or more HTML page(s) or PDF in the publication’s file list, and then the associated page node(s) will be created. The title of the node is directly read in the HTML code (TITLE tag).
To remove an existing node, press Remove.
To export your TOC to an external XML file, click XML Tools, select Export and enter the filename. You can then edit this XML file yourself using your favorite XML editor (or even Notepad), or share it with different projects. Finally, to import the XML file, click XML Tools, select Import and choose the file to import.
Nodes can be moved; use the Up and Down buttons:. If you want a node to become a child of another node, use the Parent/Child buttons: . The left button will make the selected child node have the same parent as its parent’s one. The right button will make the selected node become the child of the previous one. Use these four buttons to arrange and reorder the nodes as you want.
You can move and exchange node positions thanks to drag/drop operations. Two drag/drop modes are available: right click on the tree editor, and you can choose between “Exchange dropped and target nodes” (the node that is being dragged will take the place of the destination node, and vice-versa) and “Move dropped node to new location” (the node dropped is moved just before the destination node).
To delete all nodes of the Table of Contents at once, right click and choose the context menu command “Delete Entire TOC”.

Editing TOC entries

To edit a TOC entry, just select the node you wish and its properties will be listed in the node editor (below the tree editor). There are four properties:

Title indicates the title of the entry that will appear in the contents tree.
URL defines the HTML page to be displayed when end users click on the entry in the contents tree. You can click the button on the right with ‘…’ to select an existing page in the publication’s file list. You are even allowed to use HEScript calls, external Internet links like https://www.gdgsoft.com. URL is optional: in case you leave the field blank, nothing will happen when end users click on it (example: chapter nodes).
ImageIndex defines the icon to be displayed in the contents tree. Click on the ‘…’ button to select an icon visually from the default icon list.
OpenImgIndex defines the icon to be displayed when the entry is selected by the user in the TOC, or when the entry has children that are visible. Generally, ImageIndex and OpenImgIndex have the same value, except for chapter nodes.
Target: optional, indicates the frame target for the TOC entry. It can be a special HTML Executable target.
Expanded: shows subentries under the heading at startup.
Visibility HEScript function: for advanced users only. Reference to a Boolean HEScript function that defines whether the TOC entry is visible or not. See dynamically updating the TOC.

How to add/export custom images to the TOC

You can import custom images and associate them to the TOC entries. In the node editor, select the ImageIndex property and click the ‘…’ button to open the Image editor:

Click “Add” and select the image file you want to import. It can be BMP, ICO or PNG files. We recommend PNG files because HTML Executable supports importing alpha-channel transparency of PNG files. 32-bit bitmap files are accepted too.

Exporting the entire image list to a single bitmap strip file and importing it later (or another set of icons) is possible thanks to the “Import/Export” function. The single bitmap file looks like this: Width: number of images x 16 ; height: 16 pixels.

Such a bitmap strip can be imported back into several images.

Using it for a browse sequence

The Table of Contents can be used to define a browse sequence.

Updating the TOC at runtime

You can modify the TOC at runtime thanks to HEScript: see the Dynamically updating the TOC page.

Changing the font size of the TOC

Go to Application Settings => Visual Controls => Contents Bar. And modify OverrideFontSize from 0 to the value you want (size is in points). For instance, enter “12” for 12pt.