abs

Use absolute positioning and sizing for components inside of the abs tag. The sizing and positioning of child components must be specified as attributes of those child components.

Syntax

<abs container attributes>

    <component child component attributes> </component>

    <component child component attributes> </component>

    . . .

</abs>

Container Attributes

In addition to General Attributes, the following attributes may be specified to the <abs> tag:

Attribute

Values

Restrictions

Description

virtualwidth

Integer

 

Defines a virtual width and height to use for all coordinates inside of the container. All offsets and dimensions inside of the container are scaled based on current width/height vs. virtualwidth/virtualheight. 

When these attributes are used, the UI will scale as the container size changes.

virtualheight

Integer

 

Child Component Attributes

In addition to General Attributes, the following attributes may be specified to child components:

Attribute

Values

Restrictions

Description

left

Integer

 

Defines the distance between the left edge of the abs and the component.

When combined with right it will force the component to fill the available area.

right

Integer

 

Defines the distance between the right edge of the abs and the control.

When combined with left, it will force the component to fill the available area.

top

Integer

 

Defines the distance between the top edge of the abs and the control.

When combined with bottom, it will force the component to fill the available area.

bottom

Integer

 

Defines the distance between the bottom edge of the abs and the control.

When combined with top, it will force the component to fill the available area.

width

Integer

Ignored if both left and right are specified.

Defines the width of the control.  If undefined, the control’s calculated preferred size will be used.

height

Integer

Ignored if both top and bottom are specified.

Defines the height of the control.  If undefined, the control’s calculated preferred size will be used.

virtualwidth and virtualheight

If the virtualheight and virtualwidth attributes are not set, components within the abs container will be displayed in their specified size. Resizing the abs container will not scale the child components. If the abs area does not encompass the area required for the specified components, the components will be cropped.

If virtualheight and virtualwidth attributes are set, component size and position within the abs container are scaled according to:

 

Examples

The following example creates an abs container with 4 buttons placed in a 2x2 grid. The buttons will not scale if the abs is resized (they will be cropped):

<abs left="16" top="16" width="250" height="250">

<button left="5" top="5" width="100" height="100" name="1"/>

<button left="110" top="5" width="100" height="100" name="2"/>

<button left="5" top="110" width="100" height="100" name="3"/>

<button left="110" top="110" width="100" height="100" name="4"/>

</abs>

The following example creates an abs container with 4 buttons placed in a 2x2 grid. The buttons will scale if the abs is resized:

<abs left="16" top="16" width="250" height="250" virtualwidth="250" virtualheight="250">

<button left="5" top="5" width="100" height="100" name="1"/>

<button left="110" top="5" width="100" height="100" name="2"/>

<button left="5" top="110" width="100" height="100" name="3"/>

<button left="110" top="110" width="100" height="100" name="4"/>

</abs>

In the following example, the 2x2 grid will be scaled to half its original size. All buttons will appear 50x50 pixels in size:

<abs left="16" top="16" width="125" height="125" virtualwidth="250" virtualheight="250">

<button left="5" top="5" width="100" height="100" name="1"/>

<button left="110" top="5" width="100" height="100" name="2"/>

<button left="5" top="110" width="100" height="100" name="3"/>

<button left="110" top="110" width="100" height="100" name="4"/>

</abs>