IMAGE item type

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:

-- Grid-based layout (ATTRIBUTES item definition)
IMAGE f001 = cars.picture, SIZEPOLICY=FIXED, STRETCH=BOTH;

-- Stack-based layout (STACK item)
IMAGE cars.picture, SIZEPOLICY=FIXED, AUTOSCALE;

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.

-- Grid-based layout (ATTRIBUTES item definition)
IMAGE img1: logo, IMAGE="fourjs.png", SIZEPOLICY=FIXED, STRETCH=BOTH;

-- Stack-based layout (STACK item)
IMAGE : logo, IMAGE="fourjs.png", SIZEPOLICY=FIXED, AUTOSCALE;

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 an 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

Defining the widget size

The size of an IMAGE widget can be controlled in grid-based or stack-based layout by several attributes such as SIZEPOLICY, AUTOSCALE and STRETCH.

For more details about image sizing, see Controlling the image layout.