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.
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.
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.
The iiziGo environment makes it possible to develop iiziApps from either the UI side-first, or the data provider-first, or Java code-first, or any combination of these techniques. Your iiziGo allows both mobile-first or desktop browser oriented development. UI designers and UX professionals can also use the iiziGo to create the user interface without programming expert skills.
Creating your first iiziApp
How to create iiziProfile wizard helps you to create the base for your first iiziApp. There is a tutorial video just down below.
The iiziGo project Quickstart followed by multi-language Text table for you project.
Enter your Project name.
Tick the device types you want: Phone, Tablet, Desktop.
If you wish to target multiple languages, leave the tick to ‘Create text tables with automatic translation’.
Choose the target languages by typing in the language code or by filtering the languages and click “Add”. The first language specified is the base language, i.e. the language you intend to use when you develop the application. When you use automatic translation, English (en) is recommended as Google Translate or Microsoft Azure Cognitive Service to translation gives the best result as it translates accurately.
Click “Finish” and you’re ready to go!
Creating a new iiziApp
Right click in Project Manager and choose ‘New > Project’.
Under ‘iizi’, choose to create a ‘New iizi Module Project’ in Quickstart mode.
Alternatively,
Choose in the main Eclipse Menu Bar ‘File > New’ or type Alt + f.
Select ‘New iizi Module Project’ in Quickstart mode.
After the New iizi Module Project Wizard is open, repeat the instructions as explained in the section above Creating your first iiziApp.
Module project and Project properties
Your new project is referred to as an iiziApp or/and iizi Module Project.
Your new iiziApp will appear in the iizi Explorer with the project’s folder structure already created for you.
Inside the VirtualSpaces folder you will find a default VirtualSpace named ‘mainVirtualSpace’.
The Panels package contains folders and a ‘mainPanel’ for each device: one for phone, tablet and desktop.
The iizi Explorer is used instead of the Eclipse Package Explorer because it is tailored for the iizi Platform. If you choose to enable additional connector plug-ins, there will be additional folders displayed in the iizi Explorer for the respective connector.
Application properties
By creating your new iiziApp through Quickstart, your project will have default initial-focus which indicates the Panel that will open first when your application launches.
Right-click your project and choose ‘Properties > iizi > App’ to find iiziApp Application Properties.
Further global application settings can be found at ‘Windows > Preferences > iizi’.
By continuing to use the site, you agree to the use of cookies. More information
The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.
