Shoes Layout

Question

I'm trying to produce a shoes layout like the following:

example GUI layout http://csclub.uwaterloo.ca/~s3weber/gui.png

the text is giving me a problem. I tried:

stack {
   flow {
      check
      stack {
         para 'text 1'
         para 'text 2'
      }
      para 'Free'
   }
}

But that doesn't work at all. Any ideas?

Answer 1

In particle, for later visitors, you need to set the width of the stack inside the flow because otherwise it will be at width 100% and the check and para will be pushed to their own rows. Something like this works great, with an added border to visualize the box.

Shoes.app do
  stack {
    flow {
      border black
      check 
      stack :width=>-80 do
        para 'text 1'
        para 'text 2'
      end
      para 'Free'
    }
  }
end

Setting the width of the stack to -80 allow it to use all of the space in the row and leave 80 pixels for the other components, which appears to be the desired behavior for an app like this.

Note also that Ruby is confused when you use an implicit hash parameter in conjunction with a block delimited by braces, so you either need to use do..end as I have here or enclose the parameters to stack inside of parentheses.

Answer 2

Did you set the widths of all elements properly?