SimpleBoundsLayout

SimpleBoundsLayout is like SimpleLayout, positioning views horizontally or vertically. However, SimpleBoundsLayout makes sure that no views overlaps other views when a view is rotated.

Table 4.4 shows the attributes in SimpleBoundsLayout.

Table 4.4. The attributes defined in the SimpleBoundsLayout class
NameUsageTypeDefaultAccessibility
axisTag and JSstringyread-write
 Description. The axis to lay out components. The value for this attribute is either “x” or “y”.
spacingTag and JSnumber0read-write
 Description. The distance between two views in pixels.

For example, the LZX application in Listing 4.6 uses SimpleBoundsLayout.

Listing 4.6. Using SimpleBoundsLayout
<canvas height="100">
    <include href="utils/layouts/simpleboundslayout.lzx"/>
    <simpleboundslayout axis="x"/>
    <view width="60" height="60" bgcolor="silver"/>
    <view width="60" height="60" bgcolor="gray" rotation="30"/>
    <view width="60" height="60" bgcolor="black"/>
</canvas>

Note that you must include the simpleboundslayout.lzx file under utils/layouts to use this layout. To compile the application, invoke this URL:

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

The generated output is displayed in Figure 4.6.

Figure 4.6. Using SimpleBoundsLayout

[View full size image]

For comparison, Listing 4.7 shows similar code that uses SimpleLayout.

Listing 4.7. Views may overlap in SimpleLayout
<canvas height="100">
    <simplelayout axis="x"/>
    <view width="60" height="60" bgcolor="silver"/>
    <view width="60" height="60" bgcolor="gray" rotation="30"/>
    <view width="60" height="60" bgcolor="black"/>
</canvas>

Use this URL to compile and run the code in Listing 4.7.

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

The result is shown in Figure 4.7:

Figure 4.7. Using simplelayout with rotated views

[View full size image]

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset