SimpleLayout

You use SimpleLayout to place components next to each other, either horizontally or vertically. You can create an instance of SimpleLayout by using the simplelayout tag.

The SimpleLayout class adds three attributes, which are described in Table 4.2.

Table 4.2. The attributes defined in the SimpleLayout 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.
insetTag and JSnumber0read-write
 Description. The distance between the container’s border and the first view in pixels.

You can use the simplelayout tag in a view to lay out components and child views added to the former. As an example, consider the code in Listing 4.2 that places three views horizontally.

Listing 4.2. Arranging views horizontally
<canvas height="60">
    <simplelayout axis="x" spacing="4"/>
    <view bgcolor="silver" width="20" height="20"/>
    <view bgcolor="gray" width="20" height="20"/>
    <view bgcolor="black" width="20" height="20"/>
</canvas>

To test this application, use this URL:

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

The generated output is shown in Figure 4.2.

Figure 4.2. Laying out component horizontally using SimpleLayout

[View full size image]

The code in Listing 4.3 lays out its components vertically.

Listing 4.3. Laying out views vertically
<canvas height="200">
    <view x="5" y="4">
        <simplelayout axis="y" spacing="6" inset="6"/>
        <view bgcolor="silver" width="20" height="20"/>
        <view bgcolor="gray" width="20" height="20"/>
        <view bgcolor="black" width="20" height="20"/>
    </view>
</canvas>

Note that the simplelayout is added to a view position at (5, 4) and the first view is positioned at pixel 6 (thanks to the inset attribute).

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

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

Figure 4.4 shows the generated output.

Figure 4.4. Laying out component vertically using SimpleLayout

[View full size image]

Besides using a tag, you can also use the layout attribute of the LzView class to lay out the child views of a view. To this attribute, you assign the class name and the values for the layout manager’s attributes.

For example, the LZX application in Listing 4.4 shows an LzView that uses the layout attribute.

Listing 4.4. Using the layout attribute
<canvas height="200">
    <view layout="class:simplelayout; axis:x; spacing:50">
        <button>OK</button>
        <button>Cancel</button>
    </view>
</canvas>

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

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

The generated output is displayed in Figure 4.5.

Figure 4.5. Using the layout attribute

[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