All visual elements have property sub-elements which describe the position and size of the visual element on the device screen. Which property sub-elements are used depends on how the element is drawn on the screen.

Most visual elements are drawn with a bounding rectangle defined using width and height sub-elements. The horizontal and vertical positions of these visual elements are defined using x and y elements. Examples of bounding rectangle visual elements include the box, label, and image elements. 

Figure 1. A box displayed by the visualelements.ujml sample.

Other visual elements are drawn as a series of lines where you specify a starting point, an ending point, and (depending on the line-oriented visual element) one or more intermediate points along the line. Horizontal and vertical positions of these points are defined using x and y property elements or some variation thereof. Examples of line-oriented visual elements include the line, polyline, and polygon elements. 

Figure 2. A self-overlapping polygon displayed by the visualelements.ujml sample.

All position property elements are specified in terms of a number of pixels from a starting point. For visual elements which are not nested, the starting point is the upper-left corner of the device screen. For visual elements which are nested inside of a parent visual element, the starting point is the upper-left corner of the parent's bounding rectangle. See Nesting. In either case, this upper-left corner is specified as zero ('0') for both the horizontal and vertical coordinates. 

This means a non-nested visual element with x and y property elements both set to zero would be located in the upper-left corner of the device screen. A similar non-nested visual element with x and y property elements both set to 50 would be located 50 pixels to the right and down from the upper-left corner of the device screen. 

Figure 3. A box positioned on the device screen. 

Figure 4. A line positioned on the device screen.

Nested visual elements are positioned relative to their parent element's upper-left corner. So a visual element with x and y property elements both set to 10 nested inside our visual element with x and y property elements both set to 50 would be located 60 pixels to the right and down from the upper-left corner of the device screen. 

This works for each level of nesting. If a box contains an oval, the oval is positioned relative to the box. If the oval contains an image, the image is positioned relative to the oval, which is positioned relative to the box, and so on. 

Figure 5. A nested box positioned relative to its parent.

For all visual elements it is possible for all or part of the element to be positioned off of the device screen, by either using negative values or very large values for the position properties. 

In the same way a nested visual element may be positioned outside of its parent element. For example, if a nested visual element has a negative value for its x or y property elements, it would display partly or completely outside of the parent visual element. The same thing applies if the nested visual element has x or y property element values greater than the width or height of the containing visual element. 

Note: If set to true, the x-clip property element of a container causes any nested property elements to be clipped to the container. This means they will not draw outside the boundaries of the container. See x-clip. However, not all devices support region clipping. 

Figure 6. A nested box with a negative horizontal position value relative to its parent.

All size property elements are specified in terms of a number of pixels from the upper-left corner of the visual element. So the lower-right corner of a visual element with x and y property elements both set to 50 and width and height property elements both set to 25 would be located 75 pixels to the right and down from the upper-left corner of the device screen. 

A visual element may have width or height property elements which are greater than the size of the container or which extend outside of the container after starting from the position coordinates. The same rules apply for this as do for positioning outside of the container.

Different devices have screens of different dimensions; a visual element positioned and sized to fit one device might look out of proportion or even be entirely off of the screen of another device. You can determine the screen dimensions of a device at run time and adjust your visual element sizes as needed. See Determining Device Context, Screen Resolution.

A bounding rectangle visual element cannot have a negative size, where either width or height is a negative value. However, a bounding rectangle visual element may have a zero size -- where both width and height are equal to 0. In this case, the visual element is effectively invisible and will not appear on the screen. Line-oriented visual elements which start and end with the same horizontal and vertical coordinates will display as a single pixel.

Visual Elements, Nesting, Determining Device Context, Screen Resolution, <x>, <y>, <width>, <height>, <x-clip>, visualelements.ujml