IMAGE item type
Defines an area that can display an image resource.
IMAGE item basics
The IMAGE
item type defines an area where a picture resource can be
displayed.
Defining an IMAGE
An IMAGE
form item can be defined as a form field image or as a static
image. Use a form field image when the content of the image will change often during program
execution (for example, to display images from the database). Use a static image if the image
remains the same during program execution.
Front-ends support different presentation and behavior options, which can be controlled
by a STYLE
attribute.
For more details, see Style attributes common to all elements
and Image style attributes.
Form field IMAGE item
Use a form field image item to display values that change often during program execution, for example if the image is stored in the database.
The picture resource is defined by the value of the field.
The value can be changed by the program using the DISPLAY BY NAME / DISPLAY TO
instruction, or just by changing the value of the program variable bound to the image field when
using the UNBUFFERED
mode in an interactive instruction.
When defining the IMAGE
item in the form, use a field name to identify the
element in programs:
IMAGE f001 = cars.picture, SIZEPOLICY=FIXED, STRETCH=BOTH;
Static IMAGE item
Use a static image item to display an image that does not change during program execution, such as form decoration pictures and logos.
The resource of the image is defined by the IMAGE
attribute; the item is not a
form field. This kind of item is not affected by instructions such as CLEAR FORM
or the DISPLAY TO
instruction.
IMAGE img1: logo, IMAGE="fourjs.png", SIZEPOLICY=FIXED, STRETCH=BOTH;
Providing the image resource
To display an image, the front-end needs the image data, which can be provided in different ways.
For example, you can specify a URL, a mapped icon, or a plain image file (centralized on the application server).
For more details about image resource specification, see Providing the image resource.
Detecting IMAGE clicks
To inform the dialog immediately when an image was clicked, define the ACTION
attribute in the IMAGE
item, and implement the corresponding ON ACTION
handler in the dialog:
-- Form file (grid layout)
IMAGE : logo, IMAGE="fourjs.png",
ACTION=show_about;
-- Program file:
ON ACTION show_about
-- The image was clicked
The program can then react immediately when the user selects the image element.
Where to use IMAGE
An IMAGE
form item can be defined with an item tag and an IMAGE item definition in a GRID
, SCROLLGRID
and TABLE
/TREE
.
Defining the widget size
The size of an IMAGE
widget can be controlled by several attributes such as
SIZEPOLICY
, AUTOSCALE
and STRETCH
.
For more details about image sizing, see Controlling the image layout.