Explains how image form items can be sized, according to the type
of front-end layout system.
Image sizing basics
How an
IMAGE item renders on the front-end screen depends on these
factors:
- The type of layout used (grid-based or stack-based layout).
- The size of the form item tag in the LAYOUT section, or the
WIDTH and HEIGHT attributes defined for the IMAGE
item.
- The combination of image item attributes (SIZEPOLICY,
AUTOSCALE, STRETCH). These attributes may have a limited effect
based on the front-end platform.
- The image resource (actual picture file) size when displayed (especially when
SIZEPOLICY=DYNAMIC/INITIAL).
- The scaleIcon presentation style attribute, for elements using
icons such as BUTTON or TOOLBAR items.
Image size in grid-based layout
The AUTOSCALE attribute indicates if the picture must be scaled to the
available space in the image item. The space is defined by the SIZEPOLICY
attribute, the STRETCH attribute, and the form item size (the form item tag in the
layout or the WIDTH and HEIGHT attributes).
The STRETCH attribute defines how the image item adapts to the parent container
when it is re-sized. The default is NONE.
The SIZEPOLICY attribute defines how the image widget gets its size,
according to the context:
- When SIZEPOLICY is INITIAL (the default) and
AUTOSCALE is not used, the size of the widget is defined by the first
picture displayed in the form element. The size will not change if other pictures with
different sizes display in the widget.
- When SIZEPOLICY is DYNAMIC, the size of the widget is
automatically adapted to the size of the pictures displayed in the image form item. The
AUTOSCALE attribute makes no sense and will have no effect.
- If SIZEPOLICY attribute is set to FIXED, the size of the
widget is defined by the form specification file, either by the size of the
item-tag in the layout, or by the WIDTH and
HEIGHT attributes. With a fixed image widget size, if AUTOSCALE is
not used, scrollbars may appear if the picture is greater than the widget.
By default, the size of the image widget defaults to the relative width and height defined by the
item-tag in the form layout section. The size of an image widget can also be specified in the
WIDTH and HEIGHT attributes, but these attributes will only have
an effect when SIZEPOLICY=FIXED.
Note: On some platforms, the image widgets automatically add a border to the source picture. For
these platforms, if the image form item is the same size as the image, you may need to
increase the size of the image form item to avoid automatic scrollbars. For example, if your
image source has a size of 500x500 pixels and the widget displays a border with as size of 1
pixel, you will have to set WIDTH and HEIGHT to 502
pixels. If you do not, scrollbars will appear or the image will shrink if
AUTOSCALE is used. Alternatively, you can avoid the image border with the
borderpresentation style attribute.
Image size in stack-based layout
With a stacked layout, where form items display vertically on each other, by default
the image is auto-scaled with the correct aspect/ratio into the available form
space.
The image size can be controlled by the HEIGHT attribute.
If the HEIGHT attribute is set, it is expressed in
CHARACTERS as for grid-based layout, and the width is determined by
the correct aspect/ratio.