Understanding Layouts and Layout Management

1

On a recent thread, I was pointed in the direction of using StackLayout, which I had not encountered before. I have been digging through the documentation and had a question - but if anyone simply knows a good resource for learning more about this, I’m very interested in moving away from the more tedious approach to GUIs and learning this approach better, overall.

Using this as a basic example:

		View().layout_(
			HLayout(*~q = Array.fill(5, { Slider()
				.orientation_(\vertical) }))
		)

I’ve assigned a variable to the array (I’m not entirely sure about the function of the asterisk, though) - to give me access to each individual element, so I can assign distinct “action” functions for them. I would also like to generate different sizes for the sliders here.

If anyone has a moment to help me correct for best practices, I’d appreciate it. Thank you.

2

I’ve started redacting a guide about this, but it is waiting for developer’s approval before being released…
And it covers your tab view example :smiley: .

jamshark70, who gave you this code, is super strong in SC, so he uses cool syntax short cuts and knows fancy tricks, but this might be confusing if you are not comfortable with them.

Let’s do the same with a simpler syntax:

(
var win = Window();

var buttonA = Button()
.string_("a")
.action_({ "a".postln; });

var buttonB = Button()
.string_("b")
.action_({ "b".postln; });

var buttonC = Button()
.string_("c")
.action_({ "c".postln; });

win.layout_(
	HLayout(
		buttonA,
		buttonB,
		buttonC
	)
);

win.front;
)

GUI components are independent this time. You can assign their actions independently, configure them, etc. Then they are added to the Layout. In jamshark70’s example, he does HLayout(*~q = Array.fill(5, { Slider().orientation_(\vertical) }), which creates all sliders and the layout at once. Do you need to factorize your UI, or are you ok settings things manually?

Now, in this example, you should replace HLayout with a VLayout:

win.layout_(
	VLayout(
		buttonA,
		buttonB,
		buttonC
	)
);

to see that Layouts are simply objects that distribute subviews in space. You gave them a list of views, they distribute them.

For the size, here’s an example. I start ‘hacking’ buttons max height which is constrained by default, then use a slightly different syntax:

(
var win = Window();

var buttonA = Button()
.string_("a")
.action_({ "a".postln; })
.maxHeight_(9999);

var buttonB = Button()
.string_("b")
.action_({ "b".postln; })
.maxHeight_(9999);

var buttonC = Button()
.string_("c")
.action_({ "c".postln; })
.maxHeight_(9999);

win.layout_(
	VLayout()
	.add(buttonA, 2)
	.add(buttonB, 1)
	.add(buttonC, 3)
);

win.front;
)

The numbers specified along the views, when they are added to the layout, are called their ‘stretch’. It is the ratio ‘weight’ relative to other widgets. In this example, buttonC is 3 times bigger than buttonB.

2 Likes