Tag: panel

Layout

Layout

You apply a Layout Manager to a Panel or other container to control the position of its child components. The available layouts are Absolute, Border and Grid. When creating a Panel or container you are given the choice of Layout Manager in the New Panel wizard or New Container wizard. You can also select the container and click the Layout tool in the Panel Editor toolbar. Some containers have an explicit Layout Manager already assigned and in these cases the Layout tool is disabled.

Layout options tool in the panel editor toolbar

Absolute layout

Absolute Layout will position and size children according to absolute values relative to the container. Minimal and maximum sizes and component alignment can be defined. Position and size properties are available under Layout properties for both the container and for individual components in the Property Editor. Click to view or double click the Layout button in the Property Editor tool bar to isolate the Layout properties. Components in the Absolute Layout have the following Layout properties:

Absolute layout properties in property editor

To achieve a responsive design with Absolute Layout, percentages can be used in Left, Top, Width, and Height values. The Property Editor also accepts percentages in combination with pixel values. For example, a component can be given a Top value of 50% minus one half of its width, to keep it in the vertical center of its parent container regardless of the containers size and shape.

Border layout

The Border layout will always stretch to fill its parent container; the Border layout will position components in the five defined regions of Top, Bottom, Center, Right and Left (Leading and Trailing are also defined for RTL language design). Visual hints are provided when dropping a component into a container with Border layout. Multiple components can be placed in the same region.

Layout regions appearing in a container with border layout

Click or double click the Layout button in the Property Editor tool bar. Components in the Border Layout have the following layout properties:

Border layout properties in property editor

The regions can be resizable at runtime by setting the Resizable property. The following values are only meaningful when the Resizable option is used: Define the limits for how small and how big with Minimum size and Maximum size as well as the initial size Width and Height.

The properties defining how the container should behave are the following:

The top and bottom regions extend the entire width of the container and the remaining regions are placed in the middle. With the left and right (or leading and trailing) regions, the side regions take priority, extending the full height of the container. If the Gutters property is defined, the regions will have spacing between. The Live resize property will allow the regions to be resized at runtime.

Grid layout

The Grid Layout arranges components in rows and columns. The properties defining the Grid Layout are the following:

Grid layout properties in property editor

The number of columns is defined and the number of rows is then calculated as depending on the number of components added. The ‘Same width’ and ‘Same height’ properties specify whether the columns and / or rows should be distributed evenly in the Grid. The ‘Cell spacing’ and ‘Cell padding’ can be defined and will then be applied for all cells in the Grid.

The potential overflow of the Grid container’s content is determined by the Horizontal and Vertical align properties.

Detail of Grid layout properties that control content and grid overflow

When dragging a component over a Grid layout container, the container displays visual hints for positioning the component. Depending on the settings mentioned above, the Grid will adapt to the new components, potentially adding rows and columns.

Grid cell regions that appear in a container with Grid layout

Another way to design the structure of the Grid is to use the Grid layout actions tool in the toolbar. If the container is not empty, the way in which the newly introduced components should relate to earlier components can be specified in the Distribute dropped components menu in the toolbar.

Component distribution options tool in the panel editor toolbar.
Dynamically loading Images at Runtime

Dynamically loading Images at Runtime

To load images into your application at runtime, start with a placeholder in an Image component. Dynamically loaded images do not require an Image Definition in the Image Definitions Folder, but instead require that you instantiate a RuntimeImageDefinition in your Java code. You can use the UICreateEvent to access your Panel and its Image component, and use the Image component’s setImage method to assign the image that you are accessing by URL or API.

For details on accessing Panels and UI Components in Java code see the UI Annotations section.

(IMG)

Sample Java code for setting an Image Definition dynamically and loading an image at runtime
The Panel Editor

The Panel Editor

The main Panel Editor and all corresponding panel views are visible when a Panel is selected in your project’s tree view in the iizi Explorer. By double-clicking any Panel in your project’s Explorer tree view, a Tabbed Panel Editor is added to your workbench; you can, in this way, have several Panels opened at a time.

The Panel tree view is above the Property Editor and to the right of these is the Design area where you can see a graphical representation of your Panel in Microsoft Internet Explorer. These three windows make up your Panel design-oriented workspace. You can also view your design externally in Chrome Canary or IE.

Panel Editor Toolbar

The Panel Editor has a main toolbar holding tools for manipulating the components and the Panel being designed. The panel editor toolbar is located above the tree view and the Design Area. The Panel Editor has the basic tools needed to manipulate components after they have been created: Cut, Copy, Paste and Delete and all actions performed during design are revertible with Undo and Redo.

Panel editor tool bar and detail of Redo, Cut, Copy, Paste and delete

Components can be aligned inside their bounding box. When a component is created, it is given a default size, but the bounding box of the component can eventually be any size; the component can then be aligned, horizontally and vertically inside of its own bounding box.

Bounding Box and align tools for alignment of component within its own bounding box

Components are selected by clicking in the Panel area or in the Panel tree view. Multiple components are selected by using ctrl-click or shift-click. Other ways of selecting multiple components can be configured in the Selection tool in the toolbar. When multiple components are selected, they can be aligned relative to each other with the Component align tool.

Selection tool and component alignment tools

The Design area

The Design area shows a live instance of the Panel and its components. Any changes to the component properties or hierarchy will be visible immediately. Likewise, any change in the Design area will be immediately reflected in the Panel’s properties. The Design Area Toolbar is at top far right; from the Client tool, you can choice to open the Design Viewer.

Design area tool bar showing: refresh, device choice, orientation, client, language and Zoom
UI Annotations

UI Annotations

Another form of annotation that exists in iiziGo is the UI Annotation. To access any of the UI Component Events in your Java code you must first set the ‘Events’ property on the component’s Panel. A UI Annotation will be added to your Java class. Then you can set a Java method to respond to any of the familiar UI events by assigning a value to a component’s UI event. A UI Annotation will be added to your Java Method.

Creating classes in the panel’s property editor

Common UI Events

OnUICreate

OnUIValueChange

OnUIDestroy

OnUIAction

OnUIConnect

OnUISelection

OnUIBack

OnUITextChange

OnUIFocus

.

Creating or selecting Java methods through a component’s Events property

In the following example, we will add a Java method to the UI Event, OnUICreate; our method will lock the mobile device orientation when the Panel is created. A Java method and its annotation are automatically created when adding a method to a UI Event in the Panel’s Property Editor. With the Panel selected in the Property Editor, the Property Editor displays the ‘Events’ section in which you can choose from the UI Events listed above. By clicking the more “…” button to the right of the OnUICreate property, you can create a new Java method – with the correct annotation – that will be called when your Panel is created. And by doing the same when it is destroyed. Notice that the client session is accessed on the event by a reference to the iizi Client Gyro.

A Java methods for locking screen orientation triggered by the UI events
Choosing a device list, device orientation and zoom

Choosing a device list, device orientation and zoom

The Design Editor shows a live instance of the Panel and its components. This means that any change in a component’s properties and hierarchy will be visible immediately. Likewise, any change in the Design Editor will be immediately reflected in the Panel’s properties. It is recommended to use 100% view under the ‘Zoom’ option in the Design Editor menu bar; test your Panel’s design in portrait or landscape instantly using the device ‘Orientation’ option, and compare your Panel’s design on other devices using the simulate device option.

The iiziGo Design Editor Toolbar
Connect devices for Live preview

Connect devices for Live preview

As you develop your iiziApp, you can update and view instantly on connected devices with iiziRun Developer mobile app. In addition to the live updates in Design Editor, you can connect as many devices as you wish for viewing and testing your Java code, UI Components or any other app functionality as you develop.

Set up iiziServer for live development

To use the iiziServer included in iizi, minimal server configuration is required.

  • Choose the menu item ‘Run > Run configuration’, select and press  to create a ‘New Launch Configuration’.
  • Fill in the Name to e.g. iizi Development Server and enter the File name for the server configuration that is required.

When your iiziServer has been configured and is running in iiziGo:

  • Download iiziRun Developer from the App Store and Google Play for free.
  • Open iiziRun Developer to ‘Open a Panel’ or ‘Add application’.

Design viewer

Test your designs and code in real-time on any device. To access the iizi Design Viewer, click on  in the toolbar above the Design Editor for a desktop viewer and download the iiziRun Developer app for a phone and tablet viewer on a real device.

In iiziRun Developer:

  • Click ‘Open Panel’, then select ‘iiziGo instance’ or add your iiziGo by entering your DNS computer name and the default port 2800, make sure ‘Secure’ is off.

Choose the language and theme (for now, only iOS is available).

  • Enter the ‘address’ of the iiziGo machine. The ‘address’ can be either a DNS name (recommended) or an IP address.
  • Launch the app and see how the app simultaneously adapts when changes are made in iiziGo.
  

Tip: On the main screen of iiziRun Developer, you can choose another language for the panel to display, e.g. in Russian or Chinese (all texts are translated automatically without checking in the panels below).

 

If you see the little  sign next to the panel name, you can choose language to display in the opened panel (of course, this requires that you app is configured for multiple languages).

Tip: To quickly restart iiziRun Developer, touch the screen with 5 fingers at the same time, and you will get a message box about restarting.

Test your iiziApp live

After having created your iiziApp and configured the iiziServer – this will enable you to test your iiziApp in real-time and on any device to get a look and feel of the app.

    • Tap “Add Application”, then select ‘Server’ and tap ‘Add Server’.
    • Add your computer’s local IP or local network IP and type port 8080.
    • Click the blue ‘Save’ icon at the top.
    • Upon tapping ‘Application’, select your current iiziApp and click the blue “Save” icon.
    • Click on your iiziApp and select ‘Launch’.
    • Your iiziApp is ready to use!
  • Repeat the above process for any phone or tablet you wish to use for development and testing.
  
Adding a New Server, selecting Application, then the launched app, in this case ServerAdmin.

Again, use your 5 fingers and touch the display to restart iiziRun Developer if you wish to perform some other operation.

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