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.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
axis | Tag and JS | string | y | read-write |
Description. The axis to lay out components. The value for this attribute is either “x” or “y”. | ||||
spacing | Tag and JS | number | 0 | read-write |
Description. The distance between two views in pixels. | ||||
inset | Tag and JS | number | 0 | read-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.
<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.
The code in Listing 4.3 lays out its components 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.
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.
<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.