Image

Use an Image widget to display a graphic image such as a company logo, photo, or illustration in PNG, JPEG, GIF, or WebP format.

To learn how to use this widget programmatically, refer Quantum Visualizer Widget guide.

Important Considerations

The following are important considerations for an Image widget:

The following table shows examples of valid and invalid file names:

Valid File Names Invalid File Names Remarks
myicon.png Myicon.png The file name is invalid because it contains an uppercase character.
icon2.png Icon_2.png The file name is invalid because it contains uppercase character and an underscore.
accntsummary.png aCCNT&summary.png The file name is invalid because it contains uppercase characters and special character.
accountdetails.png Details.png The file name is invalid because it contains an uppercase character.
flightstatus123.png continue.png The file name is invalid because it contains a Java keyword.

Look Properties

Look properties define the appearance of the widget. The following are the major properties you can set:

For descriptions of the properties available on the Look tab of the Properties pane, see Look.

Skin Properties

Skin properties define a skin for the widget, including background color, borders, and shadows. If the widget includes text, you can also specify the text font.

Note: On iOS and the Android platforms, rounded border skins are not supported.

For an Image widget, you can apply a skin and its associated properties for the following states:

Skin Definition
Normal The default skin of the widget.
Hover Skin

The look and feel of the widget when the cursor hovers over the widget.

Note: Hover skins are available only on the Windows (native) Tablet platform.

For more information about applying skins, see Understanding Skins and Themes.

Image Properties

Image properties specify properties that are available on any platform supported by Quantum Visualizer, and assign platform-specific properties.

Scale Mode

Specifies how the image is scaled within the Image widget.

Default: Maintain Aspect Ratio

The following scale options are available:

Source

Specifies the source of the image to be displayed. You can specify an image from the Resources folder or an image URL.

To specify an image:

  1. Click the Edit button to open the Source dialog box.
  2. Do one of the following:
  3. Click Open. The Source property displays the file name or URL of the image.

Downloading Image

Specifies the image displayed when the remote source is being downloaded.

To specify an image, click the Edit button open the Downloading Image dialog box. You can either select an available image or specify an image URL.

Failed Image

Specifies the image to be displayed when the remote resource is not available.

To specify an image, click Edit button to open the Failed Image dialog box. You can either select an available image or specify an image URL.

Tool Tip

For the Windows Tablet platform, specifies a message that displays when you hover the mouse pointer over the widget .

Actions

Actions define what happens when an event occurs. On an Image widget, you can run an action when the following event occurs:

For more information, see Add Actions.

Placement Inside a Widget

The following table summarizes where an Image widget can be placed:

Flex Form Yes
VBox Form Yes
FlexContainer Yes
FlexScrollContainer Yes
HBox Yes
VBox Yes
Scroll Box Horizontal Orientation - Yes
Vertical Orientation- Yes
Tab Yes
Segment Yes
Popup Yes
Template

 

Header- No
Footer- No

 

 

 

 

 

Rev Author Edits
8 SHS SHS
7.2.1 SHS SHS
Copyright © 2020 Temenos. All rights reserved.