Tag: VirtualSpace

Attaching Methods to VirtualSpace events

Attaching Methods to VirtualSpace events

A Java method and its annotation are automatically created when adding a method to the VirtualSpace event in the VirtualSpace Property Editor. In this example, we will attach a method to the OnVSFocus First assign a vsGroup to the ‘state and focus’ property of a Panel. With the vsGroup selected in the VirtualSpace Editor, the Property Editor displays the ‘Connectors’ section in which you can choose from the following events: OnVSCreate, OnVSDestroy, OnVSFocus, OnVSChange, and OnVSState. By clicking the more “…” button to the right of the OnVSFocus property, you can create a new Java method – with the correct annotation – that will be called every time your Panel gains focus or loses focus.

Below is a simple Java method created through the Property Editor to react to the OnVSFocus event. The method tests the property isFocusGained in which the iizi API method setScreenOrientation is called. For the inverse case, when focus is lost, the unlockScreenOrientation method in called. Notice that the main VirtualSpace itself is referenced in the Java class, and that the client session is accessed by a reference to the iizi Client Gyro.

Creating Java methods on VirtualSpace events in the properties view of the VirtualSpace editor
Attaching methods to VirtualSpace entities

Attaching methods to VirtualSpace entities

You can attach a Java method to react to any changes in a VirtualSpace entity’s instance value, as well as any changes to its state, by specifying a method name for OnVSChange. To listen to focus changes, use OnVSFocus. The method name specified must be present in the class that is attached to the VirtualSpace. You chose the method name, but your custom method must have the respective Java Method Signatures:

The method name editor has a more “…” button that drops down a menu to help you to create a new method, to select an existing method, or to define or fix the method annotation with the correct componentPath.

Java class and method connections

Java class and method connections

Your Java code can be connected to the VirtualSpace through a Java class that uses the iizi Annotations for Java shown above.

Creating annotations for a class is automatic when you create a class through the Java Class property in the Property Editor. The iizi Annotation is created with the class. With this automated approach, iiziGo has already created a back reference for the VirtualSpace participant.

Creation of a new Java class for a VirtualSpace

Creating annotations for a method is also automatic when you create a method through the properties of a VirtualSpace entity in the VirtualSpace Editor. In the example below, the method will be connected to the OnVSChange property of a vsGroup. The iizi Annotation is created with the method, and the method is created with the correct Java Method Signature. With this automated approach, iiziGo has already created a back reference for the VirtualSpace participant. It is recommended to use Ctrl-shift-S, Save All, frequently, as you make major changes to your Panels, Text tables and VirtualSpace entities. This will enable iiziGo to update the many references needed to maintain live connections between your source code, Panels and VirtualSpace.


Creating Methods through the properties view of the VirtualSpace editor
VirtualSpace Table creation

VirtualSpace Table creation

Now that results are present, the VirtualSpace Table can be created and connected to the columns using the tool:  Wizard to create the vsTable, the columns and the connections. Click on the table creation wizard to open a prompt to create the table with 4 columns named as the database columns; if asked to open the VirtualSpace, reply No. The database editor tree now shows the connection of the result to the table and columns instead of the VirtualSpace.

Database connector editor tree view

Now select the populate table tool:  Populates the connected vsTable with the rows of last result set.

The tool will ask you to populate twenty-three rows in the vsTable, and although it prompts you to go to the vsTable, select “No”. Hover the mouse over the table or over the columns in the VirtualSpace reference column to display the tooltip. The tooltip for the vsTable also displays the first five rows and the connections. By carefully moving the mouse into the tooltip – to avoid dismissing it – you can select a column header in the table. This will open the VirtualSpace Editor and focus the selected column.

VirtualSpace table editor
Connect to a VirtualSpace

Connect to a VirtualSpace

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.

Data-oriented components

Data-oriented components

Upon creation of components that require data connections, you will be guided to connect the component to an existing VirtualSpace, and to create a vsField, vsTable or vsAction entity for that VirtualSpace.

Name your VirtualSpace entities as you would variables and fields in Java code (for e.g. vsMyAction); a “vs” prefix will help keep your application organized and make VirtualSpace entities easily distinguishable from Java fields and UI Component names.

VirtualSpace connections

VirtualSpace connections

Whether you have started working on your new iiziApp through the UI, data-source or Java code, you have already made some connections to a VirtualSpace. It is recommended that you create the four possible VirtualSpace entities inside of vsGroups; these entities can then be updated and controlled individually or simultaneously by updating the vsGroup. This means that the VirtualSpace is likely to be a representation of the data model at a specific application instance.

To connect the UI components to VirtualSpace entities, the Panel must first be connected to a VirtualSpace. In this way, you will connect UI components that handle data to a VirtualSpace entity. UI components which handle actions, such as buttons, are likely to have a vsAction property.

  • Click the more “…” button in the value field of the VirtualSpace property of the Panel.
Connect a panel to VirtualSpace from the property editor.
  • Select to connect to a VirtualSpace by either creating one or selecting a VirtualSpace.
  • Create a vsField in the VirtualSpace Editor.
Connect a component to a VirtualSpace entity from the property editor.
  • Connect the component to the vsField.
  • Click the more “…” menu in the value field of the vsAction property to create a vsAction or connect to an already existing.
The vsAction property under Actions in a button component’s properties.

The VirtualSpace supports drag and drop of itself and its components using the Link operation. You can create a connection between the drag-dropped elements and the destination; the destination can be a Panel or its components, a Data Connector or its data input or output.

Edit values for VirtualSpace entities

Edit values for VirtualSpace entities

The vsField has a Value editor that better shows all the value settings:

  • Type: the datatype of the value,

  • Null: if the value is Nullable or not (clicking on ‘Null’ hyperlink will set the value to null,

  • Value: entry field to enter the value in a string that can be parsed by the value type in question without pattern, e.g. 0 for a Double, P2DT3H4M for a Duration of 2 days, 3 hours and 4 minutes, 12:45:56 for a LocalTime value,

  • Pattern: the pattern to use for the formatter of the value type, e.g. #,##0.00;(#,##0.00) for a number with 2 decimals displayed as (123.45) when negative, hh’o”clock’ a, zzzz for a date as 12 o’clock PM, Pacific Daylight Time,

  • Use tag processing: use this option to enable the plain string entered as pattern to accept tags to reference a text table for special localized patterns depending on the language used for the client session.

  • Locale: combobox used for testing purposes to see how a value would look like in a specific locale. The tooltip of the Value entry field shows a preview of the value with the pattern in the specified locale; you can also toggle the preview to always be shown.

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.


  • 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

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/

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.