UI – IIZI

Panels

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.

Connecting text to components

There are several ways to connect dynamic text to the components in your user interface. A diverse and powerful combination of links, formatting and data injection is possible. With text content that already exists in your Text table, you can build and format text using the tools in the Text Editor toolbar.

The text table and virtualspace connection tools in the text editor toolbar

In the Text Editor toolbar, the ‘Link to Text table tool’, {T} will allow you to connect your current text to a new text ID, or insert text already stored in the Text table. In this way, you can build combinations of raw text and HTML formatting.

In the Text Editor toolbar, the Link to the Virtualspace entity tool, {V} will allow you to connect your current text to a new or existing vsField. Virtualspace references are not stored in the text table, but enable injection of a data directly into a text.

The ‘Link tool’ allows you to insert a hyperlink to a vsAction or vsFocus, enabling navigation links or to link to any functionality within your application.

The hyperlink connection prompt from the link tool in the text editor toolbar

Images and font icons are also supported in the text content of a component. Wherever HTML tags are allowed, you can use the Image tool in the Text Editor tool bar to insert an image reference from any of your application’s image definitions.

Language code

The Language code matching expression is used to select language from the end-user device. Language codes can be matched using simple languages (without country or other additions such a language variant, e.g. “en” for any English language).

The language code selector expression is typically used when you require a certain UI for a region, e.g. you could create a selector that matches the languages available in the European Union because your application has legal information to display, and another for the Unites States.

All languages will be shown when unselecting the Simple checkbox.

Example expression:

{ Lang: "fr" }

Using Selectors

Perhaps the most common Selector is the device match, Dev, used to match a feature belonging to the end-user device. The available device properties are divided into the following feature groups with the following prefixes: Capabilities cap, Orientation orient, Size size, Type type and Operating System os. A selector expression with Dev is used to provide a UI design that matches a device, a specific device capability, device type or device operating system.

There are two ways to match environment variables using either the Wild Card WC, or RegExp to match an environment variable in a regular expression. Selector expressions using an environment variable can be used to find progressive devices such as wearables and WebTV.

Further customization is possible through selector expressions using the Java keyword that allow you to direct your application flow through a custom java class designed to handle advanced or unknown devices. The Selector editor will create a Java class for you or guide you to connect an existing class.

VirtualSpace Actions and Java methods

UI components with click action events, typically buttons or menu items, have a VS Action property listed under ‘Action’ in the Property Editor. For common interactions between components and Java methods, create a vsAction in your VirtualSpace and connect the vsAction to your Java method.

Creating a vsAction on a UI component through the component’s properties view

With the vsAction selected in the VirtualSpace Editor, search the Property Editor for the ‘Connectors’ section; here, in the value field of the OnVSAction property, click the more “…” menu and select a Java method or create a new method.

Create or assign a Java method to a vsAction in the properties view of the VirtualSpace editor

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.

Start with UI

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.

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

How iiziApps run on iizi Platform

The iizi Platform allows immediate results on both desktop and the devices connected as you design and code your iiziApp. The optimal set-up in iiziGo gives you an immediate result in a web browser on both desktop and the devices connected to your development environment. In this way, the entire life cycle of your app can be previewed in the development stage.

The UI properties of your web application are mirrored using streaming between the server side and the client over a WebSocket. This connection is maintained during development, testing and exists between your server and client devices when your iiziApp is in the hands of your customers.

On the client side, your app is a web application with access to native capabilities for smart phones and tablet by means of the Cordova plug-in (formally PhoneGap).

Server and client on the iizi Platform

iiziApps operate browser-based web applications running on the server-side in association with the iiziRun app for mobile, downloaded by the end-user. All your application coding is done in Java on the server side. On smartphone and tablet devices, your iiziApp controls a hybrid application which is partly native – using the device functions directly – and partly a web application using HTML5 and JavaScript. This is achieved by iiziRun mobile app, the runtime app built on Apache Cordova, formally known as PhoneGap, tailored for use on the iizi Platform. Your version of iiziRun is customized to reflect the branding of your iiziApp business application.

iiziApps are streamed from the iiziServer to the client. The server side application requires an iiziServer that enables open communication through a web socket connection. There is constant and immediate communication between your server-side iiziApp and the end-user. It provides very fast communication protocol with low latency, meaning that the end-user gets data to and from the server instantaneously. If you are targeting desktop, no client-side app is necessary; on desktop systems, a pure web application interface is used through the installed browser.

iiziApps and clients

Focus driven iiziApps

The UI flow is governed by the focus in the iizi VirtualSpace and a Deployment of iiziApps to the end-user. This is done using the two focus engines built into AppGyro and ClientGyro. The focus model makes it possible to enable devices that are related to the user in question. The application could also continue to run off-line on the end-user device depending on how the iiziApp is designed. The off-line support is not yet available, but is planned.

When an end-user starts an iiziApp, a new client session is created in the server’s ClientGyro engine. The ClientGyro is then either starting a new AppGyro application session, or connected to an existing AppGyro application session of the same user. This enables an end-user to start an iiziApp from a phone or other device and then, even in parallel, pick up the same application session from a different phone, a tablet or a desktop system, or to start a new application session. The server and/or application is configured for parallel session support by default, but is optional and can be reconfigured either in the server or the iiziApp in question.

Deployment of iiziApps

Your iiziApp can consist of iiziModule projects and Java projects. It can also refer to libraries and directories containing Java code, both project-based and external. To run the application on an iiziServer, the iiziApp must be compiled into a Jar file. This compiled Jar file – the Application Distribution – is produced in the Application Distributor utility integrated into the iiziGo. The Application Distributor is also available as a stand-alone Java program that you can run from a batch file or build system such as Maven, Ant or Gradle.

Other technologies employed

The UI of your iiziApp uses Dojo Toolkit JavaScript framework for desktop and mobile. Although JavaScript is used on the end-user to run the iiziApp, the JavaScript and Dojo source code are hidden from the development process; all development is maintained in Java on the server side. The JavaScript source code of your components is not available to you. However, the skinning, sizing, positioning – and much more – are exposed as component properties in the Property Editor. When running in Eclipse, the iizi integration with Eclipse Data Tools Platform (DTP) is used, while the server uses a direct JDBC implementation.

An automatic translation engine using Microsoft Azure Cognitive Translation and/or Google Translate services is provided to speed up simultaneous development of the localized application for preparing a world-ready application. Select the source language for development and you get automatic foreign language translation in the background. You can view your UI design and data representation on any device, in any language, at any time. Your application’s text content, once translated automatically, can be flagged for verification by a translator or language specialist.

The iizi Platform Java API

The many methods exposed by the iizi Platform Java API are available to you through Eclipse’s Java code completion. The iizi Core and Plugin Libraries are not visible in the iizi Explorer, but only in the Eclipse Java Editor. For the complete iizi Platform Java API Specification see the iizi® Java API Specification – version 1.2.0 at https://support.iizi.co/downloads/javadoc/1.2.0/

Java API Specification – version 2.1.0 at https://support.iizi.co/downloads/javadoc/2.1.0/

Overview

iizi is the remaking of app: it is a unified platform to simplify application creation by targeting all devices and exploiting native mobile capabilities. The new technology provided by iizi mixes solid and sustainable Java code with mobile technologies to design and build web-oriented enterprise applications. The iizi Platform is the smart and quick way to make cross-platform applications, for small businesses to enterprises – it offers the best of traditional enterprise IT and emerging rapid IT. iizi is the “aPaas” – application Platform as a Service targeting any kind of businesses.

It offers the following key features:

Simplicity: one code for everything and all media/OS
Security: integrated data protection, everything is stored on servers, not on devices
Sustainability: adaptive applications for all current and future OS
Analytics: integrated Big Data analysis tool
Integration: apps ready to integrate existing systems to create great value

iizi integrates innovative features such as:

Streaming: any OS supporting the configuration can be used to run the server, serve multiple domains and provide streaming of multiple iiziApps
Communication: live share apps, “Share” and “Follow me”
Independence: free to choose its support
Spirit: simple and different, almost everybody can code
Kick back program: developers are rewarded for their contribution to iizi

The iizi Platform consists of iiziGo, an Eclipse-based IDE, a development version of the iiziServer, an iiziServer in the cloud or in-house, and one or more module projects called iiziApps. Your iiziApp can have multiple specialized UI designs making it possible to target different devices of varying capabilities, formats and languages. Your iiziApp is a data consumer application and is not intended to provide data to other systems, only to be used to stream itself to the end-user devices.

iiziGo – Development environment

The state-of-the-art development tool for building iiziApps is named iiziGo, a fully-fledged Eclipse Oxygen 4.7 IDE (or better) environment using Java SE 64-bit version 8 and later. iiziGo runs on 64-bit operating systems only: Microsoft Windows 7 (with IE 11) or better; a release for Linux GTK and macOS is scheduled for later. The development tool allows workflow from the iizi Explorer, Panel Editor tree, and Design Editor, including all familiar Eclipse integrated tools.

To access the iizi Design Viewer, click on for a desktop viewer or download the iiziRun Developer app for a phone and tablet viewer on a real device (Android and iOS). Go to Google Play or App Store and search for “iizi Mindus”.

As a plugin, iiziGo is nested in the Java Core of Eclipse and is integrated in the editing, compiling, refactoring and searching of Java code. Changes in Java code are reflected immediately in the iizi Design Editor and Java code is automatically refactored for all iizi references.

Developping to the iizi VirtualSpace

Multi-device and cross-platform development are achieved in the iiziGo by developing to the iizi VirtualSpace: a unique concept to app development with the iizi Platform. This distinctive programming model offers multi directional data-binding by developing to the iizi VirtualSpace and its components, rather than coupling code directly to the UI. The resulting system is focus driven; changes on the end-user device will change focus in the VirtualSpace which, in term, controls the application flow.

Real-time on devices during development

The iizi Platform enables simultaneous development for all devices and platforms. The native capabilities of today’s tablets and smartphones are made available to your iiziApp web-based product through the free and customizable iiziRun mobile app downloaded to your end-user’s device.

Connect any target device to your iiziGo installation and observe how the iiziApp looks and behaves in real-time, both in the drag and drop UI design stage and when you write the application business logic in Java. You can even choose to see the application in one of the target languages as you design it in your original language.

Your iiziApp, which runs on the iiziServer, programmatically accesses the end-user’s mobile device functionality using iizi’s ClientGyro engine. In this way, device functions are extended to the server and application control.

Data providers and iiziServer

Data providers are plug-ins to iiziGo. Database and Web Services plug-ins are provided out-of-the-box, but new custom data providers can be created and added to the system as well.

The iiziServer runs stand-alone in a 64-bit Java SE 8 JDK (Java Development Kit) or better. There are two versions of the server; the Development iiziServer that runs not yet finished and/or completed iiziApp’s, and the Standard iiziServer used in production.

You can run your iiziServer in-house or in the cloud. The iiziServer is platform-independent, running on Linux, Windows, macOS, Mainframe, etc. – the choice is yours.

Tag: UI