Using <wrappinglayout>

[antun]

A very powerful layout in LZX is the <wrappinglayout>, which arranges sibling elements in a neat grid, and readjusts them to fit the width of their container:


<canvas width="800" height="700">
<include href="utils/layouts/wrappinglayout.lzx" />
<class name="smImg" width="75" height="75" stretches="both" />

<window resizable="true" title="My Icons" width="250" height="275">
<wrappinglayout horz_spacing="5" vert_spacing="5"/>

<smImg resource="http://www.lzlo.com/clipart/abduction.png" />
<smImg resource="http://www.lzlo.com/clipart/blue_book.png" />
<smImg resource="http://www.lzlo.com/clipart/burn.png" />
<smImg resource="http://www.lzlo.com/clipart/cherry.png" />
<smImg resource="http://www.lzlo.com/clipart/click_me.png" />
<smImg resource="http://www.lzlo.com/clipart/compass.png" />
<smImg resource="http://www.lzlo.com/clipart/doggie.png" />
<smImg resource="http://www.lzlo.com/clipart/globe.png" />
<smImg resource="http://www.lzlo.com/clipart/hal9000.png" />
<smImg resource="http://www.lzlo.com/clipart/heart.png" />
</window>

</canvas>


In this example we're using a bunch of equally sized images (that's the reason for the <smImg> class), that are loaded at runtime.

Enjoy!


Thanks to iconfactory (http://www.iconfactory.com/) for the icons.