Shoes: Stacks and Flows

Ruby
1

I’m still learning Shoes – working on basic formatting. I’m a little
confused, though, with the results of this code:

app = Shoes.app do
background “#FFFFFF”
flow :width => 1.0 do
stack do
para “North America”
button(“View”) do
end
end
stack do
para “Europe”
button(“View”) do
end
end
stack do
para “Asia”
button(“View”) do
end
end
end
end

After reading the manual, I had the impression that the above code would
produce something like this:

text text text
button button button

Instead I get:

text
button
text
button
text
button

2

On 2010-08-02 08:31:23 +0100, Terry M. said:

end

end
text
button
text
button
text
button

To get what you wanted you can do it like this:

Shoes.app do
stack do
flow do
para “North America”
para “Europe”
para “Asia”
end
flow do
button(“View 1”) do
end
button(“View 2”) do
end
button(“View 3”) do
end
end
end
end

Flow seems to go left to right so having in two flows like this works,
otherwise you get everything going left to right in the order you add
them.

~jbw

3

If you set the widths of the stacks explicitly, they will flow in one
line:

app = Shoes.app do
background “#FFFFFF”
flow :width => 1.0 do
stack :width => 0.33 do
para “North America”
button(“View”) do
end
end
stack :width => 0.33 do
para “Europe”
button(“View”) do
end
end
stack :width => 0.33 do
para “Asia”
button(“View”) do
end
end
end
end

You’d do the same sort of thing in HTML to get this layout, so it’s
probably the right way to do it.

jeremy

4

jeremy Ruten wrote:

If you set the widths of the stacks explicitly, they will flow in one
line:

app = Shoes.app do
background “#FFFFFF”
flow :width => 1.0 do
stack :width => 0.33 do
para “North America”
button(“View”) do
end
end
stack :width => 0.33 do
para “Europe”
button(“View”) do
end
end
stack :width => 0.33 do
para “Asia”
button(“View”) do
end
end
end
end

You’d do the same sort of thing in HTML to get this layout, so it’s
probably the right way to do it.

jeremy

Thanks. This does what I want.

Correct me if I’m wrong, but HTML doesn’t really have the construction
equivalent of a “flow”. I wish it did, though!

5

It doesn’t really, but it has a similar idea. In HTML, you might
replace the stacks with

elements and apply a “float: left;”
style to them, specifying the width of each one. They’d then “flow” in
a horizontal line like a Shoes flow. That’s all I meant in my HTML
comparison.

jeremy