Ten Steps in Shoes: step 2, Stack & Flow

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!