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.
If you wish to develop your mobile app for portrait only, or landscape only, the iizi API provides Java methods ‘setOrientation’ and ‘unlockOrientation’ which can be called on a VirtualSpace event or a Panel’s onUICreate event. You can decide when to lock or unlock the orientation of your app, either at the start of the application or for any Panel.
Finding the best UI experience on mobile and desktop, in both portrait and landscape and across all mobile devices is an art. All Layout Managers offer ways to achieved responsive design. The iiziGo design workbench offers Responsive horizontal and Responsive vertical properties of components when placed in the Absolute Layout. This feature allows a component to be assigned a different size or position when the device orientation is changed.
An example of layout properties for a component in Absolute Layout
With a Border Layout, you must assign components a region property of value: top, center, bottom or left and right. These regions resize in relation to one another when device orientation is changed. Responsive design for mobile devices can also be achieved by working with iizi selectors. Selectors can be set on the Phone and Tablet packages in your easy project, as well as for portrait and landscape for any given Panel, by creating and assigning selectors to portrait and landscape packages. For a full description of how to use selectors, see section Selectors of this chapter.
The Design Editor shows a live instance of the Panel and its components. This means that any change in a component’s properties and hierarchy will be visible immediately. Likewise, any change in the Design Editor will be immediately reflected in the Panel’s properties. It is recommended to use 100% view under the ‘Zoom’ option in the Design Editor menu bar (1. on image); test your Panel’s design in portrait or landscape instantly using the device ‘Orientation’ option (2. on image), and compare your Panel’s design on other devices using the simulate device option (3. on image).
The iiziGo Design Editor Toolbar
Although the JavaScript code, HTML and CSS markup are hidden from you, if you cannot adjust or skin a component to your liking in the Property Editor, you can add HTML to all components that have text fields by using iiziGo KStrings. This includes adding a <div>, <span> or <style> tag.
With a component selected, you will find all the component’s properties listed in the Property Editor. The properties of a component are divided into Base properties, Layout properties and Style properties. You can view all these at once or double-click one of the three buttons in the properties tool bar to isolate a group of properties. You can also find any property quickly with the search field.
The Property Editor toolbar
Use the Property Editor to change the properties of your components in real time and to apply all component designs as you would when writing CSS. With a Panel or any of its components selected, you will find all necessary tools for manipulating properties and attributes in the Property Editor and the Panel Editor toolbar.
The Panel Editor toolbar
Quick UI Primer
Type and text
You cannot type directly into any of the text components in the Design Editor. It is recommended to store all your app’s dynamic and static text in a Text Table. Text can also be entered in the text property under Panel Properties > Text for all text components, or double-click the text properties value field to open a text editor or text table editor.
Selection
All Base, Layout and Style properties are context sensitive to the component selected. Multiple component selection is supported for properties shared by multiple components. You can select a component in the Panel’s component tree list, or in the Design Editor.
Bounding Box
The component’s Bounding Box serves as a resize box only if the component’s Horizontal and Vertical aligns are set to fill; these are found in the Layout properties. Otherwise the Bounding Box can be larger or smaller than the component, allowing you to align the component within the Bounding Box.
Width, Height, Left and Right
Most of the time it is not recommended to assign width and height to components in iiziApps. As with all responsive UI design, the layout is device-dependent; the Layout Manager in iiziGo will handle position and resizing of your components.
Duplication
All components can be copied and pasted either from the component list in the panel tree or in the Design Editor. Right-click a component a choose Copy; you can then past it and all its properties into the same Panel or into any other Panel in your app.
Upon creation of components that require data connections, you will be guided to connect the component to an existing VirtualSpace, and to create a vsField, vsTable or vsAction entity for that VirtualSpace.
Name your VirtualSpace entities as you would variables and fields in Java code (for e.g. vsMyAction); a “vs” prefix will help keep your application organized and make VirtualSpace entities easily distinguishable from Java fields and UI Component names.
Drag and drop components from the component tool bar, or right-click in the Design Editor and choose from the complete component menu. You can also right click in the Panel Editor tree view and choose from the same menu.
The placement of a component behaves differently depending on the Layout Manager assigned to your panel.
Once created, the component’s default properties will appear in the Panel Properties. To set default properties on components before they are created, right-click the component in the toolbar and choose ‘Edit default properties’.
When using Quickstart, a Layout Manager is automatically assigned to the three main panels in three separate panel subfolders. When creating new Panels, you must assign a Layout Manager for your new Panel in the New Panel Wizard. There are four possible layouts: Absolute Layout, Border Layout, Grid Layout and Flex Layout. For more information on Layout, see Layout section.
If your web application requires designing the UI first, iiziGo provides a comprehensive drag and drop UI builder with an extensive list of UI components. No JavaScript or HTML development is required.
Your user interface builder in iiziGo is the Panel Editor and is based on the Panel Container. The Panel is always a main container for a view and will be the root container for UI components; each Panel can be thought of as a page. Having created your new project with Quickstart, there are already several Panels created for you. Start with the mainPhonePanel or mainTabletPanel by double clicking it in the iizi Explorer.
Components are selected by clicking on the component’s name in the Panel’s tree view or by clicking the component directly in the Design Editor. Multiple components are selected by using ctrl-click or shift-click. The Panel organizes its children and resizes in strict accordance with its Layout Manager. It is important to remember that a component’s available properties are also determined by the Layout Manager of its parent container.
