Tag: mobile

Set up iiziServer for live development

Set up iiziServer for live development

The two apps for mobile, iiziRun Developer and iiziRun Custom, are downloaded by both the developer and end-user for testing or consuming an iiziApp. You will use iiziRun Developer on all your mobile devices as you test and develop with iiziGo. Your finished application is deployed with a special version of iiziRun Custom that has a custom graphical appearance to represent your software’s branding and meant to be downloaded by the consumer of your application.

– To use the iiziServer included in iiziGo, only minimal server configuration is required. In the Eclipse Run/Debug menu, find and click the small menu drop down next to the green Run icon and choose ‘run configuration’.

– You can also go to ‘Run’ in the main menu and choose ‘Run Configurations…’ to open the server configuration editor.

– Right-click ‘iizi Development Server’ and choose ‘new configuration.’

– You can also right-click your project and choose ‘Run As’ > ‘Run on iizi Development Server’ which will open the ‘Create, manage and run configurations’ window. You must double click iizi Development Server in the tree view on the left, to open the iiziServer Editor.

The iiziServer editor for quick configuration of a development server

For the simplest development server set up, keep the config.iiziServer path as is, choose a range of ports, and leave the environment to the default file. Only one application per server is possible. Later, if you wish, you can configure multiple environment files. Click ‘Run’ to start the server.

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.

Locking orientation for Mobile

Locking orientation for Mobile

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.

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