Tag: iiziGo

iiziRun Developper

iiziRun Developper

iiziRun Developer is free to install from App Store and Google Play. The iiziRun Developer app is used to test UI designs developed with the iiziGo IDE. It also runs iizi universal apps from an iiziServer without having to submit your app to Google Play or the App Store more than once.

         

Video tutorial for downloading and installing iiziRun Developer at the iiziPlatform YouTube Channel:  https://www.youtube.com/watch?v=t1Z7r6HsJIo

After installing iiziRun Developer on a mobile device, configure a server and choose your iiziApp. At this point in your set up, your iiziServer must be running in iiziGo.

On opening iiziRun Developer you are prompted to open a Panel or add an application; tap ‘Add Application’ and continue directly to ‘Server’ and then tap ‘Add Server’.

Having chosen ‘Add Server’, enter the server definition and port for your computer’s local IP or local network IP, and click the blue ‘Save’ icon at top to save. Upon tapping ‘Application’ you should find your current iiziApp available, tap it to choose it, and once added, tap the blue ‘Save’ icon at top. Repeat the above process for any phone or tablet you wish to use for development and testing.

As you develop your iiziApp, you can update and view your work instantly on connected devices with iiziRun Developer. Connect as many devices as you wish for viewing and testing you Java code, Panels and components, or any other app functionality.

Panel Design and the Panel option on iiziRun Developer

In addition to runtime tests, you can choose any Panel from the iiziRun Developer ‘Open Panel’ section and develop with your device connected by Wi-Fi or by cable. The Open Panel option in iiziRun Developer does not require running the iizi Development Server. All changes made to your Panel should update immediately on all your connected phones and tablets without needing to refresh or relaunch. This view of a single Panel displays the iiziGo’s localhost design view, and like the Design Editor, does not include UI actions, links or connections to other Panels.

To connect a device to the iiziGo localhost instance, choose ‘Open Panel’ in iiziRun Developer and set up an iiziGo instance by tapping: iiziGo instance > add iiziGo. Here you can add your localhost address or IP.

Styles

Styles

Apart for the Property Editor which enables you to set and change all the styles available to your components and containers, iiziGo offers you a comprehensive interface for creating style sheets called the Style Editor. You can use the Style Editor to create a named CSS style. This named style can then be referenced in the Base properties of a component, under the property group, ‘Styles’ where a component will have two properties, Normal and Disabled.

As of the present version of iiziGo, only the components for which the ‘Styles’ property group appear in the Property Editor are eligible for named style sheets.

Styles group in the property editor for attaching a named style sheet

To create a new named style, right-click on the Styles folder in your project’s tree view and choose ‘New style’. The Style Editor will open. The Style Editor includes a live presentation of all the style properties offered in the Style section of your Panel’s Property Editor. Explore and create CSS styles by experimenting with properties; you will see that the results update immediately in the Style Editor display.

(EDIT IS Required here)
The styles editor with instant presentation of the CSS styles
Working with Text tables

Working with Text tables

The Text table organizes your text content into accessible, reusable text entries that are assigned a text-ID. The texts are Strings that allow HTML tags and special iiziTags. Development in iiziGo utilizes four custom iiziTags for working with text content. Your text entries, referenced by an ID, are either plain texts, plain texts with iiziTags, HTML texts, or HTML texts with iiziTags. The iiziTags can be references to other text-IDs, or to a virtualspace, or to an Image Definition or to a hyperlink; most UI components use HTML texts.

Your application’s data providers can update text in the Text table which in turn update the UI through their respective virtualspace. When you create a project with Quickstart a Text table is created for you in the Text tables folder.

A text table with text IDs, iiziTags, HTML and text
The Text Editor and the KString Type

The Text Editor and the KString Type

The string type used directly for text can allow the use of HTML tags, or iiziTags for a text ID, and any combination of these. The Property Editor indicates this option by displaying a ‘TEXT’ and an ‘HTML’ icon in the value field. Clicking either of these icons will open the Text Editor with support for iiziTags, text IDs, HTML tags and links.

The title and tooltip text properties in the property editor

This combination of text, HTML, links, virtualspace references and text references are stored in iiziGo’s KString type which is an extension of Java’s String type. The KString allows a specified list of HTML tags and offers security in making other HTML tags illegal; JavaScript is also prohibited in KStrings. Complete information and functionality can be found in the KString API.

HTML:

TEXT:
The Text Editor and text editor toolbar
Externalizing Text

Externalizing Text

The iiziGo IDE employs novel and versatile ways for working with and organizing the text content of your iiziApp. All the text content of your project can be stored in a Text table, and this is automated for you in iiziGo through the process of externalizing texts. With all text content saved in your Text tables, text can contain HTML markup, be reused throughout the app and can benefit from iiziGo language translation features.

Externalizing Text

While you cannot type directly into any of the text components in the Design Editor, your text content workflow can be made rapid and flexible by typing or pasting text directly into the value field of any text property in the Property Editor.

Just as easily, a Text Editor can be opened by clicking the ‘TEXT’ or ‘HTML’ button at the start of the value field. Text content that you enter in either the value field or in the Text Editor can then be automatically stored in a Text table by simply right-clicking the Panel and choosing: ‘Externalize texts’. You will be prompted to assign an existing Text table to the Panel if one is not already assigned. On completion of externalizing texts, the text content of all components in the Panel will be moved to your Text table and given a text ID. Text in the value field will be replaced by an iiziTag representing a link to the correct ID and content in you Text table.

This process can be applied to individual components as well, by right clicking on the component and choosing ‘Externalize texts.’ In all cases, the Panel in question must be assigned a default text table in its ‘text table’ property in the ‘Default text table’ section, in the Panel’s Base properties.

Keyboard shortcuts

Keyboard shortcuts

All Eclipse shortcuts for managing files and folders, managing Editor windows and navigating within Editors are maintained in the iiziGo framework.

It is recommended to use Ctrl – shift – S, Save All, 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.

Common Java code editor shortcuts

All code hinting and Java code editing shortcuts are available in iiziGo.

Ctrl – shift – S   Save All

Ctrl – D      Delete Line

Ctrl – L      Go to Line

Ctrl – shift – T   Open Type

Ctrl – shift – R   Open Resource

Navigation

Up and Down arrow keys to navigate any tree view or list;

Forward arrow key for expanding tree items;

Ctrl or Shift–click for multiple selection.

Ctrl-3 to hide-show text filter and search fields.

Double-click the main Tab Bar at top of Panel Editor to expand or collapse it in the   workspace.

Common Design keyboard shortcuts

With a component selected you may do any of the following:

Alt + Ctrl + left arrow to cycle through fill, center, alignment, etc.

With a property selected you may do any of the following:

Up and down arrow keys to toggle between attributes

Up and down arrow keys to increase or decrease numerical values

Keyboard shortcuts unique to iiziGo

Some of the keyboard shortcuts unique to the iiziGo plugin are written for you in the menu dropdown for each tool.

iizi IDE

iizi IDE

Developers who are familiar with Eclipse will find that much of the same workspace functionality exists in the iizi Workbench. Any options that are not user-facing, can be accessed by right-clicking and double clicking menu items. As with all Eclipse-based development environments, the iiziGo IDE presents a collection of Views and Editors. The editors that are visible in Eclipse at any given time are context sensitive, and depend on which Tab is selected or which item in a tree view is selected.

The iizi Explorer

The Eclipse Project Explorer is replaced by the iizi Explorer and contains four views: your iiziModule Project Explorer, the Outline View, the iizi Server Configuration View and a Data Source Explorer.

The iiziGo Explorer Tabs

The main workspace

The main workspace is determined by whichever Editor Tab is selected at top. Tabs can represent Panels editor, Text tables editor, the Virtualspace editor, the Image Definitions editor and, of course, the Eclipse Java code editor.

Open Editor Tabs

All menu bars and toolbars are context sensitive to the selected Tab. When you start the iizi Workspace, a Panel Editor is already open for each main Panel, along with a Text table Editor open for a Text table, and a Virtualspace Editor open for a virtualspace; all these are created when starting with iiziGo Quickstart.

The bottom section of the main workspace holds the Problems View, the iizi Console, and a Session View which are configurable and familiar Eclipse debug views.

Problems, and iizi Console Views
The Selector Editor

The Selector Editor

Create a new Selector by right-clicking the Selectors folder and choosing New Selector. When finished, the Selector Editor will open in a new Tab. You can also open the editor at any time by double clicking a Selector in the Selector folder. The six available keywords are listed in the Selector Editor where you can click any keyword to open a comprehensive list of all properties. The editor writes iizi Selector Expressions and you choose from the available properties.

The Selector Editor has toolbar that allows you to define an input device to test against your new expression. The default input device is the last device connected to iiziGo. The editor instantly tells you if your expression finds or fails to find the device.

The selector editor and its toolbar with example of an iizi selector expression.
Available APIs in iiziGo

Available APIs in iiziGo

The many methods exposed by the iizi Platform API are available to you through Eclipse’s Java code completion. The iizi Core and Plugin Libraries are not visible in the iiziExplorer, but only in the Eclipse Java Perspective. For the complete iizi Platform Java API Specification see the iizi Java API reference at https://support.iizi.co.

You can also access the JavaDoc from your local installation, generally using port 2800 using the link http://localhost:2800/ and selecting the JavaDoc link on the displayed page.

What does it mean?

What does it mean?

If your web application includes Java code from a previous project or has been partially developed in another IDE, you can paste your Java code and folder structure into iiziGo after creating a new iizi Quickstart project. During deployment for distribution, all directories and libraries are packed into your iiziApp.

Having started with Quickstart, a main Java class is created for you in the src package. This has been named with your iizi project’s name, and contains the minimal iizi Annotations necessary for integrating your Java code into your iiziApp; you can connect your Java project through this class. At present – version 1.0 – only one Java class can serve as the annotated entry point for a VirtualSpace or a UI Panel.

A Java class annotation and three annotated Java methods

All references to iizi elements are made using a reference path name in the following format: “module:/path/name”. Java code is updated and changed using Eclipse refactoring mechanisms whenever required.

Your Java classes can be annotated to a VirtualSpace directly while your Java methods will have annotations to VirtualSpace entities. In the iizi Platform you do not normally add the ‘listeners’ that are common in UI programming; instead, you connect a method to the place requiring the specific functionality.

Follow us

Facebook
Instagram
Twitter
LinkedIn
LinkedIn
Youtube
RSS
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