Laszlo Home Page APP...?

[thedavidjackson]

I'd like to know if someone can tell me how to link several different views together to respond in animation format the way that the Laszlo home page app does. (when you click on one section, the other ones change size and shift around). I know that laszlo has built in a feature that automatically ties all the views in a sequence together, but how do I extend that to the parent level. This is what I have right now...

<canvas width="800" height="600">
<class name="box" height="100" width="100" bgcolor="blue"/>
<class name="borderedbox" extends="box" onmouseover="this.changeSize(100)" onmouseout="this.changeSize(-100)">
<attribute name="bordersize" value="3"/>
<view bgcolor="yellow" x="${parent.bordersize}" y="${parent.bordersize}" width="${parent.width - parent.bordersize*2}" height="${parent.height - parent.bordersize*2}"/>
<method name="changeSize" args="pixels">
this.parent.animate("width", pixels, 500, true);
this.animate("height", pixels, 500, true);
</method>
</class>
<view>
<simplelayout axis="y" spacing="10"/>
<view>
<simplelayout axis="x" spacing="10"/>
<borderedbox/>
<borderedbox/>
<borderedbox/>
</view>
<view>
<simplelayout axis="x" spacing="10"/>
<borderedbox/>
<borderedbox/>
<borderedbox/>
</view>
<view>
<simplelayout axis="x" spacing="10"/>
<borderedbox/>
<borderedbox/>
<borderedbox/>
</view>
</view>
</canvas>


This is not what I want. This is just using the default function that LS has built in. It doesn't reference the other boxes when one box is moused over.

If you think of the rows as 1, 2, 3, and the columns as a, b, c:

A1 B1 C1
A2 B2 C2
A3 B3 C3

When I mouse over B2, then I want B1 and B3 to swell in width and shrink in height, while A2 and C2 to swell in height and shrink in width.

(NOTE: the corners will obviously need to adjust as well).

I hope I've explained this well enough. The feature can also be seen in the calendar app, and is the main reason that I wanted to start developing in Laszlo in first place (cinematic experience, and all).

THANKZ!
david.

[thedavidjackson]

really? NO ONE knows how to do this?

[mdavis]

The easiest way to do this is to move the animation to the row level and constrain the height of the boxes to the row height.

I'll post some code here in a minute, but that should get you heading in the right direction.