How to generate non-slicing layouts with SC's layout engine

[SchlauKunde]

The SC reference docs say:
"Layouts and Stacks may be nested to create arbitrarily complex layouts."

BUT: SC's layout managers always place their members all vertically or all horizontally; with such layout managers I can create arbitrary SLICING layouts, but NO NON-SLICING layouts - the simplest of which would be a so-called WHEEL layout with 5 members. NON-SLICING layouts can not be described as tabular structures ... Is it possible at all to generate managed non-slicing layouts with the SC layout engine ? If yes, an example would be fine :-) !

[Isomorphic]

Hello ShlauKunde,

To use a non-slicing layout, set slicing:false and puree:true.

Kidding of course. What is a non-slicing layout? Searching for this term just hits a lot of photoshop tutorials.

[SchlauKunde]

I have just created a non-slicing wheel layout and put it into a .png file; but I do NOT know how to append files to existing forum threads ...

[Isomorphic]

Hello Schlaukunde,

You can post it at any public web address and provide the URL, or alternatively, email it to support@isomorphic.com

[SchlauKunde]

A .png picture of a non-slicing wheel layout is now available at
http://www.kaitischler.name/ThisAndThat/NonSlicingWheelLayout.png

This layout is a non-slicing one since one cannot slice it into two halves without slicing one of the placed components, too.

[Isomorphic]

Hi SchlauKunde,

Juat add children to Canvas, not a Layout, and use a combination of snapTo settings and percentage sizing.

[SchlauKunde]

Thanks a bunch for the quick response :-) ! I will surely play around with Your advice and come back to this thread if I cannot develop those non-slicing layouts ...

[SchlauKunde]

I suppose I could really need an example ...

[Isomorphic]

Hello Schlaukunde,

Just checking whether you've figured this out on your own yet?

[SchlauKunde]

I have not been informed about Your addition to the thread by email though I have subscribed to it ... Therefore my answer comes somewhat late ...

And no: I have NOT figured this out on my own yet; I am just too much of a SmartClient coding newbie and therefore thought the best bet would be a concise example provided by You :-) !

[Isomorphic]

Here's an example using the snapTo positioning system:

isc.Canvas.create({
    ID:"wheelLayout",
    width:"100%", height:"100%", overflow:"hidden",
    children : [
        isc.Canvas.create({ snapTo:"C", width:"40%", height:"40%", backgroundColor:"darkorange", autoDraw:false, overflow:"hidden"}),
        isc.Canvas.create({ snapTo:"TL", width:"70%", height:"30%", backgroundColor:"palegreen", autoDraw:false, overflow:"hidden" }),
        isc.Canvas.create({ snapTo:"BL", width:"30%", height:"70%", backgroundColor:"hotpink", autoDraw:false, overflow:"hidden" }),
        isc.Canvas.create({ snapTo:"BR", width:"70%", height:"30%", backgroundColor:"darkgreen", autoDraw:false, overflow:"hidden" }),
        isc.Canvas.create({ snapTo:"TR", width:"30%", height:"70%", backgroundColor:"blue", autoDraw:false, overflow:"hidden" })
    ]
})

[SchlauKunde]

Thank You ! This wheel layout example seems to run like a charm in IE, FF and Opera :-) !

[Isomorphic]

Excellent - glad to help.