Shoes: Stacks and Flows

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

···

--
Posted via http://www.ruby-forum.com/.

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

···

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

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

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

···

On Mon, Aug 2, 2010 at 2:53 AM, Jason Watson <jbw@jbw.cc> wrote:

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

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

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

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!

···

--
Posted via http://www.ruby-forum.com/\.

It doesn't really, but it has a similar idea. In HTML, you might
replace the stacks with <div> 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

···

On Mon, Aug 2, 2010 at 10:57 PM, Terry Michaels <spare@frigidcode.com> wrote:

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!
--
Posted via http://www.ruby-forum.com/\.