Navigation: Create Ebooks And Publications >

Designing User Interface





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.




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


For instance, if you do not want to use a component in your ebook, you can turn its Visible property to False.


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.


Some components have an Edit button to open the associated UI editor.


  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.


All changes made are directly saved!


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.