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>