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
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.
