1. Computing
Send to a Friend via Email

What's a Stack? What's a Flow? --The Shoes Layout Manager

By

6 of 6

Flows of Stacks, Stacks of Flows
What's a Stack? What's a Flow? --The Shoes Layout Manager

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
  1. About.com
  2. Computing
  3. Ruby
  4. Graphical User Interfaces
  5. Shoes
  6. Flows of Stacks, Stacks of Flows

©2014 About.com. All rights reserved.