Constraints, events and layouts
From OpenLaszlo
There are three ways to manage space in a Laszlo application: constraints, events, and layouts. Each has an appropriate use.
1. Constraints
Constraints are an effective and light-weight solution for when you want to tie a single attribute to another attribute. A simple example:
<canvas width="200" >
<checkbox id="cbox" text="Show Window"
x="10" y="10" />
<window visible="${cbox.value}"
x="5" y="30"
width="150" height="150" />
</canvas>
Constraints are also effective when a single attribute of an object is tied to one or more other attributes. For example, the left edge of this view is attached to the right edge of that view:
<view name="right" bgcolor="#CAD0EC" y="30"
x="${divider.x + divider.width}"
width="200" height="200" >
</view>
2. Events
Constraints are easy to use when you are first developing an application, but when you have multiple attributes that need to be tied to a single attribute, using an event is more efficient and often easier to write. For example, the following code is a small bit of logic that might be used to make a scrollbar. This shows how the height of the thumb and the scrollbar and both affected when the size the the viewing area changes:
<canvas>
<view id="bar" bgcolor="silver" width="20">
<view id="thumb" bgcolor="0xeaeaea" width="20"/>
</view>
<view x="50" width="100" height="200" bgcolor="yellow"
onmousedown="resizer.apply()" onmouseup="resizer.remove()">
<resizestate name="resizer"/>
<method event="onheight">
bar.setHeight(this.height);
thumb.setHeight(this.height / canvas.height * this.height);
</method>
</view>
</canvas>
3. Layouts
If you find yourself creating a crazy web of constraints where multiple attributes affect multiple other attributes, consider writing a layout. The code for simplelayout is in /lps/components/utils/layouts/. I always start with that to create a new layout.
If you are writing a layout, I would recommend that you specific a "duration" attribute and then call subview.animate(attr, pos, this.duration, false) instead of subview.animate(attr, pos). This is done in wrappinglayout (and should be done in all layouts really). It takes advantage of an optimization where if you call animate and the duration is 0, it simply sets the attribute.
