Flows and stacks don't just contain the visual elements of an application, they can also contain other flows and stacks. By combining flows and stacks, you can create complex layouts of visual elements with relative ease.
If you're a Web developer, you may note this is very similar to the CSS layout engine. This is intentional. Shoes is heavily influenced by the Web. In fact, one of the basic visual elements in Shoes is the "Link" and you can even arrange Shoes applications into "pages."
In this example, a flow containing 3 stacks is created. This will create a 3 column layout, with the elements in each column being displayed vertically (because each column is a stack). The width of the stacks is not a pixel width as in previous examples, but rather 33%. This means each column will take 33% of the available horizontal space in the application.
Shoes.app :width => 400, :height => 140 do
flow do
stack :width => '33%' do
button "Button 1"
button "Button 2"
button "Button 3"
button "Button 4"
end
stack :width => '33%' do
para "This is the paragraph " +
"text, it will wrap around " +[b r] "and fill the column."
end
stack :width => '33%' do
button "Button 1"
button "Button 2"
button "Button 3"
button "Button 4"
end
end
end
