Toolbar Editor

Applies to HTML Viewer, IE Browser publications.

The “toolbar” component displays an enhanced bar with large buttons that allow end users to quickly access the most used commands. By default, publications or ebooks contain several predefined buttons: Home, Reload, Back, Next, Print, Search, Contents and Favorites.

The roles of these buttons are explained below:

  1. Home: return to the contents page.
  2. Reload: refresh the current page.
  3. Back: return to the previous loaded page.
  4. Forward: go to the next page (in the case end users have already pressed Back).
  5. Print: displays the page printer dialog.
  6. Search: displays the search panel.
  7. Contents: displays or hides the table of contents (TOC) panel.
  8. Favorites: displays or hides the Favorites panel.

The toolbar editor allows you to add new buttons to the toolbar bar, associate commands with them and configure their properties. You can also reorder these buttons.

To open the toolbar editor, go to the User Interface tab, select “Tool Bar” and click the “Edit” button.

Description of the editor

On the left side, you see the tree that lists all of the buttons. All of the predefined buttons are already in the list: you can select them in order to modify their properties but you are not allowed to remove them (if you want to remove a predefined button, you can set its Visible property to False).

To add a button, click Add. You will be prompted to enter the caption of the button.

To edit a button, select it in the tree and you can then modify its properties (which are shown on the right side).

To change all glyphs of the standard buttons, select Set All Button Glyphs. See below.

We recommend you to use 32-bit PNG icons for tool buttons, since HTML Executable accepts alpha-blended icons. To create these icons, you can use our GConvert icon editor and converter.

List of global properties

Each button has the following properties:

  • Caption: the text to be displayed on the button. Leave the field blank to disable showing captions. You may also directly read the caption from the resource strings with the variables (variable names must begin and end with the character “%”); for example, %SHome% will be replaced by the “Home” entry from the resource strings table.

  • CustomWidth: all buttons generally have a width defined by the ButtonWidth property (Visual Controls => Toolbar). However, you can override it if CustomWidth has a value different than -1. In that case, the button will have the width (in pixels) defined by CustomWidth. Important: this property will have an effect only if the SkinDataName property of the button is set to resizetoolbutton as explained below.

  • Hint: the text to be displayed in the hint window (help tips).

  • Layout: determines where the image appears on the bitmap button.

  • Margin: offset in pixels for glyph and text.

  • NumGlyphs: count of images in Picture. In fact, Picture can include 4 images (1-normal image, 2-not enabled image, 3-active image, 4-down image). This property is ignored if the Picture contains a PNG file and not a bitmap.

  • Picture: set the button’s glyph. Click on the ‘…’ button to open the Imagep editor, allowing you to select a bitmap, a PNG or clear the existing graphic.

  • SkinDataName: should either be bigtoolbutton or resizetoolbutton. If this property is set to resizetoolbutton, the height of the button will be retrieved from the ButtonHeight property (Visual Controls => Toolbar) and its width optionally from CustomWidth as explained above.

  • Spacing: offset in pixels between glyph and text.

  • Transparent: if True then the button will have an alpha-blend effect.

  • TransparentValue: value of alphablending (0..255) for the button.

  • Visible: if set to false, the button is removed.

User-defined buttons have extra properties:

  • Name: this is a unique internal identifier used by HTML Executable and script commands. Only alphanumeric characters are allowed without spaces.

  • Action: defines the action executed when the end user clicks on the button. See below.

Be sure to click Apply after you have modified the properties of a button, otherwise they won’t be saved!

To remove a button, select it in the tree and click on Remove.

You can reorder the buttons using drag/drop operations. Note that the order of the predefined buttons cannot be modified (but you can insert new buttons between them).

Actions of the user-defined buttons

Each button can execute an action when it is clicked. You can select between three actions:

  • Do nothing: no action is executed. Not recommended.

  • Show this page/URL: the button will open the specified HTML page or a URL. You can select a page of your publication by clicking the small button near the field. HEScript commands are also accepted (hescript://[scriptname].[functionprocedurename]), see this topic for more information. For example, if you enter hescript://Macros.MacroShowAbout, then the button will show the about box when it is clicked.

  • Execute this script function: an HEScript script procedure or Boolean function is executed. Syntax: [scriptname].[functionname]. Parameters are not allowed, and only procedure or Boolean functions are accepted. If you want to pass parameters, then you should use an hescript:// call as explained above.

You can for instance call pre-defined macros or global script functions (such as Global.HEExitPublication).

Loading a set of toolbar glyphs (pictures)

Instead of manually modifying each button’s glyph, HTML Executable lets you load all glyphs in one click from an existing glyph set.

In the Toolbar Editor, just click on Set All Button Glyphs. The image editor appears and shows you the current set of all button glyphs:

toolbar

You can either Save it as an external bitmap or PNG file if you wish to make modifications, or Load a new glyph set from an existing bitmap file or PNG file (Paste from Clipboard is also accepted if the clipboard contains bitmap data).

WARNING: if you use a set of PNG files, you must correctly set the value of the PNGSize property (Visual Controls => Toolbar). For instance, if your PNG files have a 24x24 dimension, set PNGSize to 24. Note that HTML Executable will ask you whether it should automatically change this property when you load a PNG file whose dimension is different.

  • All glyphs must have the same width and height. The standard size in pixels is 24x24 but you are free to use your preferred size.

  • The background color for bitmap files (fuchsia on the screenshot above) will be set as the transparent one. For 32-bit PNG files, the alpha channel is used.

  • Only bitmap or PNG files are allowed.

  • The width of the glyph set’s bitmap must be a multiple of the height (width = height x 11).

  • All glyph sets must contain 9 items.

Some existing sets are available in the Toolbar subfolder of HTML Executable; you can use them in your publications.


Copyright G.D.G. Software 2018. All rights reserved