Absolute Positioning

All views and components have the x and y attributes that specify their position in the container’s coordinate space. Changing the value of x and y changes a view’s or a component’s position. However, while this positioning strategy is flexible, it is not always the best or easiest approach. For one, you have to calculate the width and height of each component so that they don’t overlap. In addition, the views maintain their absolute positions when the container is resized. For example, consider the LZX application in Listing 4.1.

Listing 4.1. Absolute positioning

<canvas height="60">
    <view x="0" y="0" bgcolor="silver" width="20" height="20"/>
    <view x="40" y="0" bgcolor="gray" width="20" height="20"/>
    <view x="80" y="0" bgcolor="black" width="20" height="20"/>
</canvas>

To test this application, direct your browser to this URL:

http://localhost:8080/lps-4.0.x/app04/absolutePositionTest1.lzx

The generated application is shown in Figure 4.1.

Figure 4.1. Absolute positioning

[View full size image]

When the Web browser is resized, however, some of the components may not be visible anymore. Clearly, we need a different approach.