Tag: style

Image Definitions

Image Definitions

All images and graphics used in your iiziApp must have an Image Definition. Your Image Definitions are kept in the Image Definitions folder. To create a new Image Definition, right-click your folder and choose either new definition for an Image (the same wizard is used for jpg, png, or gif) or new definition for an SVG.

Simple image definitions

After importing a graphic or image asset into your Assets folder, Right-Click your Image Definitions folder and choose New Image Definition. It is recommended that you give a name to the image definition that includes the asset name and ends in the word ‘definition’ or ‘ImageDefinition’. In the Image Definition Wizard, you give your definition a name, choose to make an image-set or a single image file definition, and then link your asset to its definition. You can then reference your image or graphic asset by its definition anywhere in your application.

New Image Definition Wizard

Complex image definitions

Open the Image Definition Editor by double-clicking an Image Definition or creating a new definition. As with all iizi editors, the Image Definition Editor is divided into a tree view, and a property Editor. At the top is the Image Definition Editor toolbar.

The image definition is built by adding new styles and image resolutions. It can then be referred to from an Image component by the Definition name. The displayed image on the end-user will depend on the component state as well as the device resolution.

Select the image file and specify the grid values. “Marching ants” will show the identified images. A warning or error message will be shown in the dialog if values are or seem incorrect.

Once completed, the image definition can be used to represent an image with states that are taken from the UI component in question. The image above consists of an image of a Radio button and Checkbox. In this case, two Image Definitions for the same file should be created, with locations only defined for the respective image; you will have to delete the inappropriate image locations.

These images consist of 32 icons in 4 different files with the states enabled/disabled and LTR/RTL:

FirstProject:/media/commonIcons/commonIconsObjActEnabled.png
FirstProject:/media/commonIcons/commonIconsObjActDisabled.png
FirstProject:/media/commonIcons/commonIconsObjActEnabled_rtl.png
FirstProject:/media/commonIcons/commonIconsObjActDisabled_rtl.png

You can see that the RTL icons are mirrored (but not all of them).

An image definition of the type Multiple images with optional styles is then used to identify the location of the images as well as to set their names. The states are defined by adding a New image style that will contain the image file reference and style information, in this case a combination of RTL and Disabled.

Image definition states with optional styles
Detail of properties in the Image Definition Editor
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.

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