HTML Executable lets you create modern and complex user interfaces for your ebooks and HTML applications with its visual editor. To edit the interface of your application, go to Application Settings => Components.

For instance, you can create and display a Table of Contents for your ebook to improve navigation, add more commands to the navigation bar or use your own Application Menu button.

You have the list name Components and sometimes a properties editor on the right side.

Components

This list contains all of the components of the user interface that can be customized.

The following components are available for you to customize. Please refer to the corresponding topic for further help:

•Menu Bar

•Status Bar

Each component has its own properties and can be configured with the properties editor. To edit the properties of a component, just select it in the list.

  See also: Manage SVG Images (common images in SVG format for your HTML Executable ebook or application project).

Edit component properties

The properties editor lets you modify the properties of the selected component: it works like the one you can find in Paquet Builder. If you are not familiar with this grid editor, see below for a brief description about how it works.

Modify UI components and controls at runtime

HTML Executable supports changing control properties at runtime.

How does the Properties Editor work?

The Properties Editor enables you to set properties for the selected component. By setting properties you are defining the state of a component. If the Properties are arranged by name, the first column lists the names of the selected action's properties: If a plus sign (+) appears beside a property name, this can be clicked to display the sub-properties of that property. These can be a list of possible values when the property represents a set of flags, or sub properties if the property represents an object (the value column gives the name of the object, enclosed in parentheses). Similarly, if a minus sign (-) appears, this can be clicked to collapse the sub properties. When a property has focus, you can also use the keyboard + and - keys to expand or collapse properties.

The second column displays the property values: When the property is selected, the value changes to an edit control where you can type a new value. If the value can be set using a dialog, a small button appears when the property is selected. Click this button to display a dialog where you can set the property.

If the value is an enumerated type, a drop-down button appears when the property is selected. Click this button to display a drop-down list that you can use to set the property.