Tag: desktop

Components

Components

Most of the components are implemented using the Dojo framework. Many of the components are cross-platform meaning that they will exist for all types of devices, but they will look and behave differently depending on the device. Other components will only exist in a desktop or mobile version. Some components require special containers; Table column components belong in a Table container, for example, and cannot be placed anywhere else. Map markers belong in a Map marker container, List item components must be placed in a List Group container, and so forth.

The JavaScript source code of your components is not available to the developer. However, the skinning, sizing, positioning – and much more – are exposed as component properties in the Property Editor. Further manipulation of components can be achieved through your Java code. A component’s available properties are also determined by the Layout Manager of its parent container.

A note on Responsive design

A note on Responsive design

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.

Create your iiziApp

Create your iiziApp

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.

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

Social media & sharing icons powered by UltimatelySocial

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.

Close