Constrain parent's size to children's size

[3.14]

is there a pre-defined layout or script that allows to resize a parent according to its children's height and width?
i think i can write a script to achieve it but if it already exists...

[antun]

If you don't set a view's dimensions it will automatically size to fit its children. Adam Wolff has a great blog entry that demonstrates that:

http://www.laszlosystems.com/~adam/blog/archives/000014.html

-Antun

[3.14]

that's why i thought but i've just made the tutorial about 'building a window' and the window doesn't resize itself to fit its children's size...
any clue?

[antun]

That's right - the window in the Window Tutorial doesn't resize because its dimensions are explicitly set:


<class name="mediaWindow"
x="10" y="10"
width="200" height="150"
clickable="true">


Furthermore all of its subview's dimensions are based on the classroot:


<view name="body"
width="${parent.width}">


(The content area is based on the width of the body because of the stableborderlayout).

If you wanted to get really clever, you could write a method that gets called whenever a view gets added to the content area:


<method event="onaddsubview">

</method>


... that adjusts the size of the classroot accordingly.

-Antun

[tsailipu]

Greetings,

I am a new member of the community and currently evaluating Laszlo.

I have been reading up the documentation to get a sense of how Laszlo classes, events, and rendering work, and have tried to do dynamic update of a view's height depending on the total height of its child views. Yes, not setting the view's height attribute will allow the view to automatically stretch to fit all the children. I am looking to, however, have a view add some more padding after the last child view. If the default layout has this attribute, that would solve this simple problem (why does simplylayout has only inset that affects the first child view? why doesn't Laszlo offers a bordered box component like HTML tables where one can set the border spacing and color at will -- a 2D layout construct like HTML table, that is?)

Anyhow, here is the sample code. I am trying to add an additional spacing of 10 after the last child.

<class name="grayBorderWhiteBox" align="center" bgcolor="#666666" width="${parent.width * 0.95}">
<simplelayout axis="y" inset="0"/>
<attribute name="defaultplacement" value="content" type="string"/>
<view bgcolor="#666666" height="1" width="${parent.width}"/>
<view name="content" x="1" bgcolor="#ffffff" width="${parent.width-2}">
<constantlayout axis="x" value="10"/>
<simplelayout axis="y" spacing="10" inset="5" />
<method event="onaddsubview">
//super.init();
/*<![CDATA[
super.init();
Debug.write(this.subViews.length + " subViews");
var contentHeight = 0;
for (var i=0; i<this.subViews.length; i++) {
Debug.write("subView #" +i+ " height = "+ this.subViews[i].height);
contentHeight += this.subViews[i].height + 10; // 10 is the y-spacing
}
Debug.write("contentHeight = " +contentHeight);
this.setHeight(contentHeight);
]]> */

this.setAttribute('height', this.height+10);
</method>
<!-- content -->
</view>
<view bgcolor="#666666" height="1" width="${parent.width}"/>
</class>

<grayBorderWhiteBox>
<view name="lbl" x="5">
<text><b>Label:</b></text>
</view>
<text>Custom Text</text>
<button text="test"/>
</grayBorderWhiteBox>


You can see that I am trying to use onaddsubview as well as make the method overwrite init of the view.... However, onaddsubview this way doesn't work, and the init-overwriting approach has some weird rendering problem if the instance contains more complicated UI components inside. Is there a simple solution to this seemingly easy task?

Thanks,
Philip

[antun]

<view> has a measureHeight() method which you can use to find the total height of its contents. In most cases, a view will fire its oninit event after its children have finished initing. i.e. you can do something like:


<view oninit="setHeight( measureHeight + 10 )">
...


-Antun

[tsailipu]

Hi Antun,

Thanks for the timely reply. Unfortunately, this doesn't work. Attached please find the sample, complete code. I even tried, instead of the oninit event, using the init-method-overwriting approach as well.

For now, that is enough learning curve for me for this piece.... I do know that if I don't try to make the grayBorderWhiteBox into a class and insert the subviews like this -- that is, type everything directly and in the parent/content view's height attribute, simply do a straight addition of all the subview's height plus the final padding of 10 -- the rendering works.

Perhaps you can shed further light about what's going on with Lazslo rendering/event logic here....

Thanks,
Philip

[antun]

Hi Philip

In your code, you wrote:


<view name="content" x="1"
bgcolor="#ffffff"
width="${parent.width-2}"
oninit="setHeight(measureHeight+10)">


measureHeight() is actually a method call, so you'd have to do:

setHeight(measureHeight()+10)

-Antun

[tsailipu]

:) I guess I should have done a search on measureHeight on the docs first. I simply typed in what you mentioned in your last previous reply.

(Talking of which, why isn't there a search available on Lazslo docs or probably an index of all the keywords/methods/attributes in Laszlo? The "Find" on LZX Reference Contents tab doesn't seem to do anything).

This is pretty good. At least indeed there is something simple for handling this simple dynamic task....

Thanks,
Philip

[antun]

That find feature searches for part of the tag/API name, but it won't search method names.

-Antun

The "Find" on LZX Reference Contents tab doesn't seem to do anything).