Stacks and Flows

Since the mouse wheel and PgUp/PgDn? are so pervasive on every platform, vertical scrolling has really become the only overflow that matters. So, in Shoes, just as on the web, width is generally fixed. While height goes on and on.

Now, you can also just use specific widths and heights for everything, if you want. That'll take some math, but everything could be perfect.

Generally, I'd suggest using stacks and flows. The idea here is that you want to fill up a certain width with things, then advance down the page, filling up further widths. You can think of these as being analogous to HTML's "block" and "inline" styles.

Stacks

A stack is simply a vertical stack of elements. An element is placed directly under the element preceding it.

A stack is also shaped like a box. So if a stack is given a width of 250, that stack is itself an element which is 250 pixels wide.

Flows

A flow will pack elements in as tightly as it can. A width will be filled, then will wrap beneath those elements. Text elements placed next to each other will appear as a single paragraph. Images and widgets will run together as a series.

Like the stack, a flow is a box. So stacks and flows can safely be embedded and, without respect to their contents, are identical. They just treat their contents differently.

Last thing: The Shoes window is a flow.

Combining Flows and Stacks

Learning to combine flows and stacks is essential to figuring out how to do Shoes.

Take this two-column layout, for instance:

 #!ruby
 Shoes.app do
   stack do
     image "static/hackety-org-header.png"
   end
   stack :width => 200 do
     # column 1
     text "column 1"
   end
   stack :width => -200 do
     # column 2
     text "column 2"
   end
 end

The important thing to remember in this example is that the window itself is a flow. It is a flow that contains three boxes: the header and two columns.

• The first stack (the header) has no width, so it fills 100% of the width.
• The second stack has a width of 200 pixels, right under the first stack, so it runs along the left side.
• The third stack has a width -200, which means 100% minus 200 pixels. So this fills the right side of the second stack. (Unless the window is resized at 200 pixels or less.)

Oh, and this example would still be the same two-column layout if these stacks were flows. Since the window itself is a flow, it sorts these boxes into the two columns. Stacks and flows are identical from the outside. They only affect the way their insides are laid out.

I suppose this is the biggest difference between layouts in HTML and Shoes. In HTML, elements float themselves. In Shoes, elements follow their container.

Widths and Heights

Both widths and heights can take positive and negative widths. Also, percentages.

Setting a width is common. Basically: any time you don't want an element to fill the width.

Height should be specified in two cases:

• You want a scroll bar inside a stack or flow.
• You want an element to vertically fill its container.