The Image widget is used to display images. You can also
provide a title for the image by specifying a value for the hint property.
Implementation base
The Image widget is
a Dojo-based widget.
The image widget can also be implemented
by using the HTML <img> tag and the <div> tag with an image
background.
Properties
The following properties can
be configured for the Image widget.
Table 1. Properties that can
be configured for the Image widgetProperty |
Description |
dataName |
The dataName property
is the name of the data element to which the widget is bound. This
property is optional. |
styleClass |
The styleClass property
specifies the class selector that is associated with the widget.
If you do not configure the styleClass property, the default class
selector is used instead. |
visibility |
The visibility property
defines how a widget is displayed on a GUI. The following values can
be specified for this property:- visible
- The widget is displayed on a GUI and users are able to interact
with the widget.
- hidden
- The widget is not displayed on a GUI, but it occupies space on
the GUI.
- gone
- The widget is not displayed on a GUI, and it does not occupy space
on the GUI.
|
id |
The id is the identifier
for the widget. |
hint |
The hint is a description
of the widget that is displayed as a tooltip for a user. The hint
property has multilingual support. |
location |
The location property
specifies the relative path of the image. |
width |
The width property specifies the width of the
widget. |
height |
The height property specifies the height of
the widget. |
Data mapping
If you specify the relative
path of an image in the location property, the image is retrieved
from the relative path that has been specified. If you specify a data
element to which the image widget is bound in the dataName property,
the image is retrieved from the location that is specified in the
context.
ECA editor support
The following events
and properties can be configured for the Image widget with the ECA
editor.
Note: The ECA editor does not support functions for the Image
widget.
Table 2. Events that can be added to the Image
widget by using the ECA editor.Event |
Description |
onClick |
Is fired when the left
mouse button is clicked. |
onFocus |
Is fired when the widget
receives focus because the user moves the mouse pointer over the widget. |
onBlur |
Is fired when the widget
does not receive focus, or when the user clicks outside the widget,
or when the widget is hidden. |
onMouseDown |
Is fired when a mouse
button is clicked. |
onMouseUp |
Is fired when a mouse
button is released |
onMouseEnter |
Is fired when the
mouse pointer moves over the widget. |
onMouseLeave |
Is fired when the
mouse pointer moves out of the widget. |
onMouseMove |
Is fired when the
mouse pointer moves over nodes that are contained in the widget. |
Table 3. Properties that can be configured for the Image
widget by using the ECA editor.Property |
Description |
location |
The location property
specifies the relative path of the image. |