Property editor

Styles

Apart for the Property Editor which enables you to set and change all the styles available to your components and containers, iiziGo offers you a comprehensive interface for creating style sheets called the Style Editor. You can use the Style Editor to create a named CSS style. This named style can then be referenced in the Base properties of a component, under the property group, ‘Styles’ where a component will have two properties, Normal and Disabled.

As of the present version of iiziGo, only the components for which the ‘Styles’ property group appear in the Property Editor are eligible for named style sheets.

Styles group in the property editor for attaching a named style sheet

To create a new named style, right-click on the Styles folder in your project’s tree view and choose ‘New style’. The Style Editor will open. The Style Editor includes a live presentation of all the style properties offered in the Style section of your Panel’s Property Editor. Explore and create CSS styles by experimenting with properties; you will see that the results update immediately in the Style Editor display.

(EDIT IS Required here)

The styles editor with instant presentation of the CSS styles

Components List

The following is a comprehensive list of components available in the current version of iiziGo. Where indicated, a component is classified specifically for mobile or for desktop. Some components require specific parent containers. All components have default properties that can be viewed and edited in the Property Editor.

		*Button*	With default border color change on mouse down
		*Checkbox*
		*Radio button*
		*Tab Bar*
		*Progress bar*
		*Slider*
		*Image component*
		*Combobox*
		*Spinner*
		*Progress indicator*	Indicates user interface is busy
		*Switch* Mobile only	Common to phone and tablet interface
		*Text Field*	Single line input text, output text
		*Text Area*	Scrollable multi-line, input text, output text
		*Label*	Dynamic and static output text
		*Output text*	Requires a virtualspace connection

…

Properties

The properties of the selected component are shown – and are editable – in the Property Editor. If the Property Editor is not visible, select a Panel, a container, or any component, and the Property Editor will appear below the Panel’s tree view. For a complete guide to using the Property Editor see section Editors, Tools and Tabs.

The properties that appear in the Property Editor are context sensitive and depend entirely on the selected component or selected container. A property consists of a name on the left and a corresponding value to the right. Hovering over the property name displays a tooltip description of the property. Experienced web developers will find many familiar HTML5 and CSS3 attributes as name-value pairs.

Container and component properties

Always keep in mind that the properties displayed for you in the Property Editor correspond to the container or component that is selected. With nothing selected – or with focus outside of the Panel Editor – your Property Editor will be empty. With several components selected, the editor will exclude unshared properties.

An undefined property may not have a value at all, and will not exist in the mark-up that defines your component. This is like excluding an attribute or property when writing HTML and CSS; it simply will not exist in the mark-up. Some properties are required and therefore require values, and are assigned a default value. To see the default values, mouse over the property for the tooltip or click the arrow at the start of the value field to reveal its default value in the value field.

The name, actions, events and states of a component will always be found in the Base properties. The width, height and position will be in the Layout properties and most all the remaining properties we associate with CSS will be found in the Styles properties.

General properties

Although property sets are different depending on the component selected, the following properties exist for all components: Name, Title, Tooltip text, and the boolean states: Enabled and Visible.

The Text Editor and the KString Type

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 Property Editor

Components are defined by their Properties. The properties are laid out in a context-sensitive table called the Property Editor. All component and container properties can be set and changed in the Property Editor; since the list of properties available in the property editor can be long, all properties are structured into groups.

The toggle button for base, layout and style properties

The list of properties corresponding to each property group can be opened and closed independently of each other. Double-click one of the three buttons to isolate a properties list. Each list is organized into subgroups as a tree structure; the combined property list can be filtered with the help of the Filter text field in the Toolbar of the Property Editor.

The header of the property editor

A property consists of a name on the left and a corresponding value to the right. Hovering over the property name displays a tooltip description of the property. Experienced web developers will find many familiar HTML5 and CSS3 attributes as name-value pairs.

Properties as name-value pairs and tooltip of a property name

The property value can be defined or undefined ; clicking the blue arrow will erase the property values. Clicking the plus-sign icon will reveal current values and/or enable you to set values.

The value of a property can be of different data types, but in most cases the value is represented and manipulated as a string; exceptions to this are color and boolean values. The type integrity of the value is maintained by the Property Editor where improper types are marked as erroneous and the description appears in the Problems view.

Error displayed in both the property editor and problems view

Keep in mind that an undefined property may not have a value at all, as it will not exist in the mark-up that defines your component. This is akin to excluding an attribute or property when writing HTML and CSS; other properties may require values and are assigned a default value.

Further styling for normal and disabled states can be achieved through named styles created with the Style Editor, see section Styles.

Two details of the property editor showing various style properties

Note: Some of the possible values accepted by the Property Editor are not evident or listed in the property description nor listed as hints in the value field. If you are experienced in modern CSS3 markup, you can try any of the techniques you are familiar with, and you may find that the Property Editor accepts and interprets most current CSS values and formats. One example of this is the use of the viewport’s vmin attribute which is accepted as percentages, pixel values, and equations composed of the two.

UI Annotations

Another form of annotation that exists in iiziGo is the UI Annotation. To access any of the UI Component Events in your Java code you must first set the ‘Events’ property on the component’s Panel. A UI Annotation will be added to your Java class. Then you can set a Java method to respond to any of the familiar UI events by assigning a value to a component’s UI event. A UI Annotation will be added to your Java Method.

Creating classes in the panel’s property editor

Common UI Events

OnUICreate	OnUIValueChange
OnUIDestroy	OnUIAction
OnUIConnect	OnUISelection
OnUIBack	OnUITextChange
OnUIFocus	.

Creating or selecting Java methods through a component’s Events property

In the following example, we will add a Java method to the UI Event, OnUICreate; our method will lock the mobile device orientation when the Panel is created. A Java method and its annotation are automatically created when adding a method to a UI Event in the Panel’s Property Editor. With the Panel selected in the Property Editor, the Property Editor displays the ‘Events’ section in which you can choose from the UI Events listed above. By clicking the more “…” button to the right of the OnUICreate property, you can create a new Java method – with the correct annotation – that will be called when your Panel is created. And by doing the same when it is destroyed. Notice that the client session is accessed on the event by a reference to the iizi Client Gyro.

A Java methods for locking screen orientation triggered by the UI events

Attaching Methods to VirtualSpace events

A Java method and its annotation are automatically created when adding a method to the VirtualSpace event in the VirtualSpace Property Editor. In this example, we will attach a method to the OnVSFocus First assign a vsGroup to the ‘state and focus’ property of a Panel. With the vsGroup selected in the VirtualSpace Editor, the Property Editor displays the ‘Connectors’ section in which you can choose from the following events: OnVSCreate, OnVSDestroy, OnVSFocus, OnVSChange, and OnVSState. By clicking the more “…” button to the right of the OnVSFocus property, you can create a new Java method – with the correct annotation – that will be called every time your Panel gains focus or loses focus.

Below is a simple Java method created through the Property Editor to react to the OnVSFocus event. The method tests the property isFocusGained in which the iizi API method setScreenOrientation is called. For the inverse case, when focus is lost, the unlockScreenOrientation method in called. Notice that the main VirtualSpace itself is referenced in the Java class, and that the client session is accessed by a reference to the iizi Client Gyro.

Creating Java methods on VirtualSpace events in the properties view of the VirtualSpace editor

VirtualSpace Actions and Java methods

UI components with click action events, typically buttons or menu items, have a VS Action property listed under ‘Action’ in the Property Editor. For common interactions between components and Java methods, create a vsAction in your VirtualSpace and connect the vsAction to your Java method.

Creating a vsAction on a UI component through the component’s properties view

With the vsAction selected in the VirtualSpace Editor, search the Property Editor for the ‘Connectors’ section; here, in the value field of the OnVSAction property, click the more “…” menu and select a Java method or create a new method.

Create or assign a Java method to a vsAction in the properties view of the VirtualSpace editor

Java class and method connections

There is a tutorial video just down below.

Your Java code can be connected to the VirtualSpace through a Java class that uses the iizi Annotations for Java shown above.

Creating annotations for a class is automatic when you create a class through the Java Class property in the Property Editor. The iizi Annotation is created with the class. With this automated approach, iiziGo has already created a back reference for the VirtualSpace participant.

Creation of a new Java class for a VirtualSpace

Creating annotations for a method is also automatic when you create a method through the properties of a VirtualSpace entity in the VirtualSpace Editor. In the example below, the method will be connected to the OnVSChange property of a vsGroup. The iizi Annotation is created with the method, and the method is created with the correct Java Method Signature. With this automated approach, iiziGo has already created a back reference for the VirtualSpace participant. It is recommended to use Ctrl-shift-S, Save All, frequently, as you make major changes to your Panels, Text tables and VirtualSpace entities. This will enable iiziGo to update the many references needed to maintain live connections between your source code, Panels and VirtualSpace.

(IMG)

Creating Methods through the properties view of the VirtualSpace editor

Connect to a VirtualSpace

Later, you will connect your Panels to a VirtualSpace and connect components to vsFields in the Panel’s corresponding VirtualSpace. Select a Panel in the Panel’s tree-list and explore its properties in the Property Editor. Note the property ‘Primary’ under Base > VirtualSpace > Primary; this is a boolean which must be true for only one of your Panels. Keep this property unchecked – secondary – for all other Panels.

Once you have placed components into a Panel, you are ready to connect the Panel and its components to a VirtualSpace. Connection to the VirtualSpace creates the variable-data binding that enables the component to perform actions in the application context, update instantly, present and edit data.

If your Panel is not connected to a VirtualSpace, select your Panel in the Panel Editor tree view and under the Panel Properties, click the ‘…’ menu and choose ‘Select VirtualSpace’.

After this, you can click on ‘State & focus‘ and choose ‘Select VS Component‘.

You can similarly connect any UI Component to a vsGroup, vsField or vsTable.

Tag: Property editor