Tag: Components

Components List

Components List

The following is a comprehensive list of components available in the current version of iiziGo. Where indicated, a component is classified specifically for mobile or for desktop. Some components require specific parent containers. All components have default properties that can be viewed and edited in the Property Editor.

  Button With default border color change on mouse down
  Checkbox
  Radio button
Tab Bar Contains buttons only
  Progress bar
  Slider
  Image component
Combobox
  Spinner
Progress indicator Indicates user interface is busy
  Switch        Mobile only Common to phone and tablet interface
Text Field Single line input text, output text
  Text Area Scrollable multi-line, input text, output text
  Label Dynamic and static output text
  Output text Requires a virtualspace connection
  TableColumn Requires Table container
  Calendar
  Map Google Map API
Map Marker

 

List Items List Container > List Group Container Mobile Only
Simple List Item

Checkbox List Item

Radio Button List Item

Text Field List Item

Combobox List Item

DateTime List Item

Switch List Item

 

Menu Items Menu Bar Container > Menu Desktop Only
Checked Item

Menu Item

Menu Separator

Radio Item

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.

Panels

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.

Importing Images

Importing Images

All image types that are accepted by modern browsers are accepted in iiziGo. Use the Image Component to add images and graphics to your app or its content. All static images and graphics used in your iiziApp must have an Image Definition. For how to dynamically load images and graphics refer to Dynamically loading Images at Runtime.

All images and graphics for you iiziApp should be kept in your Assets folder. Copy and paste files and folders into the Assets folder or right click and import your image as you would any other asset into Eclipse. Before an image can be used in the application, the image file must be present in the Assets folder.

svg image file support

The Image component supports svg files. Image Definitions for SVG files are distinct from other Image Definitions. If the svg image displays differently than expected or will not display at all, you will have to open the file in an appropriate image editor and explore the svg mark-up. Search for the <svg> tag at beginning of file and delete everything before the tag.

The Property Editor

The Property Editor

Components are defined by their Properties. The properties are laid out in a context-sensitive table called the Property Editor. All component and container properties can be set and changed in the Property Editor; since the list of properties available in the property editor can be long, all properties are structured into groups.

The toggle button for base, layout and style properties

The list of properties corresponding to each property group can be opened and closed independently of each other. Double-click one of the three buttons to isolate a properties list. Each list is organized into subgroups as a tree structure; the combined property list can be filtered with the help of the Filter text field in the Toolbar of the Property Editor.

 The header of the property editor

A property consists of a name on the left and a corresponding value to the right. Hovering over the property name displays a tooltip description of the property. Experienced web developers will find many familiar HTML5 and CSS3 attributes as name-value pairs.

Properties as name-value pairs and tooltip of a property name

The property value can be defined  or undefined  ; clicking the blue arrow will erase the property values. Clicking the plus-sign icon will reveal current values and/or enable you to set values.

The value of a property can be of different data types, but in most cases the value is represented and manipulated as a string; exceptions to this are color and boolean values. The type integrity of the value is maintained by the Property Editor where improper types are marked as erroneous and the description appears in the Problems view.

Error displayed in both the property editor and problems view

Keep in mind that an undefined property may not have a value at all, as it will not exist in the mark-up that defines your component. This is akin to excluding an attribute or property when writing HTML and CSS; other properties may require values and are assigned a default value.

Further styling for normal and disabled states can be achieved through named styles created with the Style Editor, see section Styles.

Two details of the property editor showing various style properties

Note: Some of the possible values accepted by the Property Editor are not evident or listed in the property description nor listed as hints in the value field. If you are experienced in modern CSS3 markup, you can try any of the techniques you are familiar with, and you may find that the Property Editor accepts and interprets most current CSS values and formats. One example of this is the use of the viewport’s vmin attribute which is accepted as percentages, pixel values, and equations composed of the two.

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’. You can similarly connect any UI Component to a vsGroup, vsField or vsTable.

Create components quickly

Create components quickly

Drag and drop components from the component tool bar, or right-click in the Design Editor and choose from the complete component menu. You can also right click in the Panel Editor tree view and choose from the same menu.

The placement of a component behaves differently depending on the Layout Manager assigned to your panel.

Once created, the component’s default properties will appear in the Panel Properties. To set default properties on components before they are created, right-click the component in the toolbar and choose ‘Edit default properties’.

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