The view of your iiziApp consists of UI Components that present data to the user and provide means to interact with the application. Before any components can be created and designed, a main container needs to be created to hold them. In iiziGo, this component is called a Panel. All UI design is done in the Panel Editor which is visible when a Panel Tab is selected. The Panel Editor is comprised of a Property Editor, a Design view and a tree view; this tree view provides the overview of the selected Panel. The tree view contains the hierarchy of the components in the Panel, as well as layout and style where applicable.
Creating and editing the view of your application as Panels enables a rich and versatile way to design and visualize an HTML and CSS user interface. Your work with Panels updates immediately in the Design view, in a browser or on any connected device without the need to refresh a page or rebuild your application. The Design area shows a live instance of the Panel and its components. This means that any change in component properties and hierarchy will be visible immediately. Likewise, any change in the Design area will be immediately reflected in the Panel’s properties.
The string type used directly for text can allow the use of HTML tags, or iiziTags for a text ID, and any combination of these. The Property Editor indicates this option by displaying a ‘TEXT’ and an ‘HTML’ icon in the value field. Clicking either of these icons will open the Text Editor with support for iiziTags, text IDs, HTML tags and links.
The title and tooltip text properties in the property editor
This combination of text, HTML, links, virtualspace references and text references are stored in iiziGo’s KString type which is an extension of Java’s String type. The KString allows a specified list of HTML tags and offers security in making other HTML tags illegal; JavaScript is also prohibited in KStrings. Complete information and functionality can be found in the KString API.
HTML:
TEXT:
The Text Editor and text editor toolbar
The iiziGo IDE employs novel and versatile ways for working with and organizing the text content of your iiziApp. All the text content of your project can be stored in a Text table, and this is automated for you in iiziGo through the process of externalizing texts. With all text content saved in your Text tables, text can contain HTML markup, be reused throughout the app and can benefit from iiziGo language translation features.
Externalizing Text
While you cannot type directly into any of the text components in the Design Editor, your text content workflow can be made rapid and flexible by typing or pasting text directly into the value field of any text property in the Property Editor.
Just as easily, a Text Editor can be opened by clicking the ‘TEXT’ or ‘HTML’ button at the start of the value field. Text content that you enter in either the value field or in the Text Editor can then be automatically stored in a Text table by simply right-clicking the Panel and choosing: ‘Externalize texts’. You will be prompted to assign an existing Text table to the Panel if one is not already assigned. On completion of externalizing texts, the text content of all components in the Panel will be moved to your Text table and given a text ID. Text in the value field will be replaced by an iiziTag representing a link to the correct ID and content in you Text table.
This process can be applied to individual components as well, by right clicking on the component and choosing ‘Externalize texts.’ In all cases, the Panel in question must be assigned a default text table in its ‘text table’ property in the ‘Default text table’ section, in the Panel’s Base properties.
