Shoes: Stacks and Flows

Prev: Ruby 1.9
Next: S3 2010 Workshop on Self-sustaining Systems (Call for Papers)

From: Terry Michaels on 2 Aug 2010 03:31

---

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/.

From: Jason Watson on 2 Aug 2010 04:53

---

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

From: jeremy Ruten on 2 Aug 2010 05:13

---

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(a)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
>
>
>
>

From: Terry Michaels on 3 Aug 2010 00:57

---

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/.

From: jeremy Ruten on 3 Aug 2010 01:21

---

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(a)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/.
>
>

 | 
Pages: 1
Prev: Ruby 1.9
Next: S3 2010 Workshop on Self-sustaining Systems (Call for Papers)