Woow, I've been getting quite a lot of feedback on my last post. Thanks for the messages, I really appreciate it! It gets me even more enthusiastic about blogging and Shoes, I hope in my turn I get some other people to be Shoes enthusiasts. If I do, or you are already, consider blogging about it. For me it helps a lot in keeping focussed and to explore a bit further. I always love to read small articles and blogs on Ruby and Shoes, so if you happen to have one let me know!If you read my previous post, you might have noticed a lack of layout structure in one of the examples. Some of the text was right behind the other, or even overlapped, and it all just looked like a big unsorted pile. This might be fine for dirty clothes or dishes, but our app aint dirty! But no worries, you can create order in this chaos by making neat columns and rows, by using stacks and flows!
To help a bit in explaining, I'll introduce you to something else first. Meet background, background is quite a cool, colourful fellow. You can use background within stacks and flows. One famous flow is the Shoesapp itself. So try this:
Shoes.app do
background black
para "Look ma, a black background!", :size => 30, :align => "center", :stroke => crimson
end
Let's drift a bit farther from our main objective and try a gradient with an angle:
background "#FF0".."#0FF", :angle => 60
Or an image!
background "justsomelocal.jpg", :border => "FF0".."0FF", :strokewidth => 10
You can even use an online picture and a border like so
background "http://poignantguide.net/ruby/i/the.foxes-4c.png"
Sometimes, using online images seem to cause some problems. Don't know why exactly, let's move on for now.
The Stack
A stack is something that allows you to put one thing above the other, simple as that. Stacks can make your shoes look sexy!
Let's create a stack containing four para's:
Shoes.app do
stack do
para "heya"
para "we are stacked"
para "stacked you see?"
para "different lines"
end
end
Let's create put all the para's in their own stacks. One is blue, so he needs a friend:
Shoes.app do
stack do
background fuchsia
para "hi again"
end
stack do
background cornflowerblue
para "we are in stacks"
para "we are blue together"
end
stack do
background peru
para "each our own"
end
stack do
background gold
para "with our colours"
end
end
Remember some of the style options in the previous post? Well, you can use many of them exactly in the same way.
Shoes.app do
background black
stack :width => 100 do
background fuchsia
para "we are not wide"
end
stack :width => 200, :height => 150, :scroll => true do
background cornflowerblue
para "we are in stacks"
para "the stack is high"
para "content exeeds height"
para "bla"
para "blabla"
para "but we have a scrollbar"
end
stack :top => 250, :left => 150 do
background gold
para "some margin for errors"
end
end
The Flow
A flow is like a stack, but horizontal. But, unlike a stack, a flow has a limit. Why? Because there are no horizontal scrollbars, those suck anyway! So try to imagine your flow like a typewriter, going back and down when you have reached the end.
Now wait a minute, just think about it. Remember those para's from step 1? Remember how the para text was placed behind the others until it wrapped around? It's a flow! The shoes.app is a flow! So you already know the basic flow behaviour a bit. So lets just skip the talk and try a combination of stack and flow!
Shoes.app :width => 400, :height => 140 do
flow do
stack :width => '50%' do
background khaki
para "first stack"
para "stacks rock"
para "khakis are only cool in shoes"
end
stack :width => '40%' do
background peru
para "second stack"
end
para "i'm no stack but just in a flow, but did not fit", :stroke => blue
end
end
See, Shoes.app is a flow, so we can use the same style options for it, like setting the height! This example should demonstrate how stacks and flows differ from each other, but can work together. If only the people of the world were like stacks and flows!
