WrappingLayout

WrappingLayout is similar to SimpleLayout, but it will ‘wrap’ the views it manages by changing lines or columns. Table 4.9 shows the attributes defined in WrappingLayout.

Table 4.9. The attributes defined in the WrappingLayout 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 JSnumber1read-write
 Description. The distance between two views in both axes in pixels. By default, both xspacing and yspacing are assigned this value.
xinsetTag and JSnumber0read-write
 Description. The distance between the container’s border and the first view in x axis in pixels.
yinsetTag and JSnumber0read-write
 Description. The distance between the container’s border and the first view in y axis in pixels.
xspacingTag and JSnumber read-write
 Description. The distance between two views in x axis in pixels.
yspacingTag and JSnumber read-write
 Description. The distance between two views in y axis in pixels.
durationTag and JSnumber0read-write
 Description. The number of milliseconds to use to animate the laying out of the views.

For example, Listing 4.12 presents an LZX application that employs WrappingLayout.

Listing 4.12. Using wrappinglayout
<canvas height="100" width="80">
    <wrappinglayout axis="x" spacing="5"/>
    <view width="30" height="40" bgcolor="silver"/>
    <view width="30" height="40" bgcolor="black"/>
    <view width="60" height="40" bgcolor="gray"/>
</canvas>

To compile the program, use the following URL:

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

Figure 4.12 shows the result.

Figure 4.12. Using WrappingLayout

[View full size image]

As you can see, the third view is displayed on the second line. Otherwise, using SimpleLayout, it would have been truncated.

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

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