Ten Steps in Shoes: step 3, Buttons

An image says more than a thousand words. Trying trying to find the right image to convey the words takes a thousand clicks. While Google takes the lead in many different technologies nowadays, they have not yet found a smart way to index pictures. Usually, finding the right picture for a new blogpost takes ages.

Good news though, a while back I bought my first DSRL camera and am fully experimenting with it at the moment. So, in the future I can just make my pics in stead of searching the internets.

But, while an image can say more than a thousand words, does it speak the same language as the observer? Well, like many things it's all a matter of perspective.
The above image can be viewed from a few perspectives providing an impression of the situation of my blog. One one hand we see Shoes taking steps. Like the series I was supposed to blog. On the other hand we see a person standing still. That's me standing still, being preoccupied with stuff, not blogging or doing much else. He's stepped upon by a giant. That giant might well represent Google crushing me with too much information in one step, deleting my
draft-blogposts with the other. Taking another point of view it could be me taking steps again. Maybe it was me taking steps on myself...

...right, anyway, it's time to check out the Shoes button!

Here's how you add a button to a Shoes app:

Shoes.app do
b = button("button")
end

Now we want the button to do something. You can pass a block to a button like so:
Shoes.app do
b = button("button"){ alert "you pushed the button" }
end

A block is code between { and }, it can be another method, or multiple lines of code, whatever you want. You can read more about blogs at the blogpost on struggling with ruby.

In our block we used an alert, a type of control. Don't worry about those, we will talk more about those in the next step.

So that's it, yeah!

p.s. announcing to do series of blogposts is a really bad idea. Either deal with stuff in one post or don't blog about it. Hard lessons of the blogosphere are learned the hard way!

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!

10 Steps in Shoes, step 1: Para's

Phew, this has been one of those weeks in which you need to put everyone and everything on hold. But now is not a time to stand still, instead we are going to start the Shoes travel by taking the first step in Shoes. It's going to be a short walk though, just 10 steps to be exact. There are 10 basic concepts in Shoes and we will take a look at the basic possibilities of each one as we talk the talk and learn to walk the walk. We will keep it short, so you have no excuses not to walk with us, let's go!

Wear your Shoes
To start taking steps, you first need to have Shoes. So make sure you have Ruby and Shoes installed.

Tie your Shoes
Before we can start using anything in Shoes, we need to create a Shoes app.
Open a file in your favorite editor, mine being vi and call it step1.rb. Notice the .rb extension, that's for Ruby, not Shoes. But how does Ruby know we want to run a Shoes app? Well just write "Shoes.app do" in the first line of your Shoes code. See, Shoes is easy! How to end a Shoes app? Any guesses? Yes you are right, write "end"!

Here's what your Shoes app looks like:

Shoes.app do

end

Para's
Now that you know how to start coding a Shoes app, let's take the first step in Shoes! Any programming starts with a first program to salute the world, so you need to know how to write some text, or a paragraph if you have much to say. Lets write a short paragraph, in fact lets not say paragraph but say para instead.

Shoes.app do
para "Hello World!"
end

Save your file and open it with Shoes by running "shoes step1.rb" or just opening an app from the Shoes GUI. You will get something like this:

Your shoes application screen just gets filled with the characters you provided to para. Para works quite like writing on a piece of paper, you can write in diferent sizes, in different styles, on different locations and in different colors and when you have reached the end, you start again at the following line. Let's try it. Reopen your file in your editor and add the following line:

para "Hello World, are you there?", :size => 48

Save, run and take a look.
What we did here is use the size style option. Note the comma and the semicolon. Style options are key-value pairs of a hash, hence we use => to say that key size has value 48. This is just like the way we use hashes in Ruby. First I thought the biggest size of text in shoes is 48 and it could not grow beyond 48. This is not true however. You can have really huge letter sizes, I'm not sure if there is a maximum. There is some weird behaviour if you use really, really large values though.

Instead of using a para with a certain size value, you can use any of the following:

title (same as para with size of 34)
subtitle (same as para with size of 26)
tagline (same as para with size of 18)
caption (same as para with size of 14)
para (default size is 12)
inscription (same as para with size of 10)

Colour your shoes!
Even though the eighties have long gone and nobody knows what happend to King, we still want to colour our shoes! Don't click that link if you keep some youth sentiment about that moment you saw your first ever music clip on tv, you have been warned! Better humn that song and use the Shoes equivalent to spraycans to be cool like so:

Shoes.app do
para "Hello World!", :size => 48, :stroke => dodgerblue
subtitle "Why are you not answering?", :stroke => red
tagline "Hmm wait, what to say in case it does answer?", :fill => "#FF0000"
inscription "...yes quite some responsibility to be the one who talks to the world", :fill => darkkhaki
end

What do you think this app will look like? Save and run it! As you might have noticed you can use style options for colors too. Colors can be specified by their name or their hexadecimal Red-Green-Blue value. Here's a list for color names and values. We also used some alternatives to para's.

The Fonts is cool
Heeeyy, use cool Fonts and the girls will be kissing with a snap of the fingers! But that was in a time of innocence and the coolest technology around was a motorcycle. For people who have grown up and want more then just kissing, there is Shoes. The happy days are over, but Shoes has many Fonts.

Shoes.app do
para "heeeeyyyy":font => "Helvetica, Arial"
end

These Shoes are made for walking
I guess you get it by now. There is much more you can do with para and it's siblings. Almost everything is related to style.
You should be able to work it out for yourself, just look at the shoes help on styles. Not all styles work for everything, so note what it says after "For".
Here's a small example of various possibilities.

Shoes.app do
para "Centered text!", :size => 14, :align => "center", :stroke => firebrick
subtitle "justify", :justify => true, :stroke => hotpink, :fill => black
para "top and left", :top => 150, :left => 222, :stroke => mediumspringgreen
tagline "oblique", :emphasis => "oblique", :stroke => peru
inscription "displace", :displace_left => 20, :top => 180
para "more left less top", :top => 250, :left => 280, :stroke => olive
title "strikethrough and strikecolor", :strikethrough => "single", :strikecolor => crimson
caption "leading", :leading => 10
para "undercolor", :underline => "single", :undercolor => darkorchid, :top => 210
tagline "Variant Weight", :variant => "smallcaps", :weight => "heavy", :stroke => gold
end

A few last tips: use alt + ? for help and alt + . to reload your Shoes app in the Shoes GUI. Use alt + / for the Shoes console to see debug messages. Use alt + p to package your app.
I suggest you play with the various options for a bit, and get ready for Step 2!

GUI toolkit extravaganza wrap-up

Folks, I have decided to conclude the GUI toolkit extravaganza. There were two more toolkits to follow, monkeybars and qtruby. But alas, I am not going to check those out any time soon. I just don't feel very curious about these toolkits anymore and want to do some more exploring of Shoes. But I'll take those two toolkits along in the following overview.

The big question is off course, which one is the best? It all depends on what you need and what effort you are willing to invest (ooh how cliché!). When it comes to GUI toolkits for Ruby, there are three basic categories: system-dependant, system-independent and the category for those that won't fit elsewhere. Let's take a brief look at each category:

System-dependant: ruby-gnome2 and qtruby
These are toolkits specifically written to support a certain system, a specific window manager for example. These toolkits offer a big load of functions, sometimes not even restricted to graphics. For example, ruby-gnome2 has some audio functionality as well. The amount of available functionality and the fact that you need to understand the given window manager as well, makes these toolkits a bit complex and the learning curve steep. I would only consider to learn and use these if I really needed to use some system specific functionality that other toolkits don't provide. Otherwise I'd walk on and find something more simple which I could use in more situations.

If you need to do some qt stuff here's some info:
a book
korundrun: bindings for KDE and qt api's
KDE techbase

System-independent: fxruby and wxruby
Usually these toolkits are a layer cake of wrappers and libraries. Both are supported by many systems and allow you to code an app that looks the same on different systems. There is not much difference between these two toolkits. Fx is older which is bad because it just looks a bit dated, but on the other hand there is a decent amount of documentation, including a book on fxruby. Wx is a bit younger and looks better. One other difference is that wx is truly native, so all widgets are in the same style your window manager is. Fx looks mostly the same on different platforms. Both toolkits provide all standard GUI functions.

If you are looking for a toolkit to make mainstream GUI's I'd go for one of these. Walk on if you want something different, something that's more suited for beginners or something more fun.

The category for those that won't fit elsewhere: Monkeybars & Shoes
Monkeybars:
This toolkit is for rubyists who evolved from Javabut still want to code swing but this time using Ruby code. So if you learned Swing in a past life and don't want to learn a new GUI language again, I guess this is for you! Here's some background info:
project page
screencastic screencast

Shoes:
My personal choice and recommendation. If you don't have very specific wishes you should try shoes and see if it fits! Why? Because it's the easiest and most enjoyable. If you later find that you need something which Shoes can't do you can always choose to learn something else.
To learn Shoes you only need to take 10 steps, so stay tuned as we take 10 steps with Shoes in the following postings!

GUI toolkit extravaganza part IV: Shoes

Happy new year and all that. Yes I know, I haven't posted on my blog for ages. There's a perfectly good reason for that you know, see it was fricking freezing over here and my blog froze as well. Now the thaw has set in, time to get back at the GUI toolkit extravaganza. You do remember this GUI toolkit journey we started way back in 2008 right?...right? Well ok I guess I can't blame you, after all it has been a while and there probably were some parties...

Once upon a time, a curious ruby learner wondered what he had to do to get his ruby programs do some GUI work. The learner quickly found himself in a scary forest of GUI toolkits for Ruby. Not knowing which one to choose and frightened by the aspect of learning the wrong toolkit he decided to take a peek at each one and write down the main differences. After each of his travels he would share his journeys with GUI toolkit extravaganza episodes.

Originally the following toolkits were on the menu:

Ruby-Gnome2
FXRuby
WXRuby
Ruby Cocoa
Shoes
Monkeybars
QtRuby

Next up was to be Ruby Cocoa, but alas this is a Ruby GUI toolit for MacOS/X only and there's no apples here only bananas...

Noticed my somewhat crazy writing style with an flair of eccentricity and impressions of genius have you? Yes my sweet children, you are correct when you think this must have something to do with Shoes! You were in fact still in the scary GUI toolkit forest and now you have been kidnapped by some catbunny!

Shoes
So what's Shoes? It's crazy, it's fun it's genius! It's small and simple but powerfull. It's somewhat webbie and easy to learn. And it's ooh shiny! And most of all it's quite fun and hassle free.

ease of installation
You can get binaries for varius operating systems, source code is available and compiling is easy.

documentation
There's plenty of documentation on Shoes, and for a change it's great fun to read it! Here's what I have found so far:

Nobody Knows Shoes, the superb manual from _why, the author of Shoes in hardcopy, html or pdf.
Online shoes documentation (online as in included in the app)

The Shoes webpage includes many documentation and tutorials as well.


supported platforms
There are binaries for Linux, Mac and Windows and sources are available as well. Ubuntu has included a slightly older version in their repositories.

complexity
Shoes has been the easiest of all to learn and use. There are no complex constructs or difficult syntax issues.

functionality
Shoes offers a simple but effective toolkit. There are some things that are just not there, things like window tabs or OpenGL stuff for example. But Shoes is not a GUI toolkit in the classic sense.
Don't think too quickly you cannot do this or that because it lacks something. There's lots and lots you can do with Shoes you just need to think a bit about Human-Computer interaction and use your creativity. Yes, creativity is what Shoes is all about. If you don't understand what I'm talking about, just check Nobody Knows Shoes and the Shoe-box.

performance
No complaints here, these shoes are suited for running.

looks
Shoes apps look wonderfull. Take a look at the shoebox to get some impressions!

You can find Shoes at:
http://www.shoooes.net/

Christmas: relief, salvation and commercialism

Christmas eve has finally arrived! To some, Christmas brings emotions of relief or salvation. To others, it's just one of those days filled with obligatory social calls and commercialism.

The days that precede Christmas have been as hectic as they possibly can. One one side I had to make some preparations for the social necessities. And on the other side there was the commercial aspect, in Christmas times known as 'desperately trying to find something to give to someone while moving to endless black crowds carrying baby buggies with loss of orientation and decency'.

If only had nothing else to do, I could fully indulge myself and study the strange mental state people get in while on a Christmas shopping spree...But, I had to attend also to more enlightened things such as coding my Shoes course assignments. The course is great and lots of fun. This is not just getting some exercises done. There is a great social aspect where you can interact with other coders and see solutions from other people, things you would have never thought of yourself. Also, having a skilled teacher who carries a contagious enthusiasm providing some excellent exercises helps to decrease the learning curve and keeps it fun! Unfortunately, the better must sometimes give way to the good...
But, if you are interested in learning some GUI programming, there is good news for you! The 3rd batch of the shoes programming course at Rubylearning has been announced, and it starts on 14 February. That's no holidays to bother you!

Throwing myself at the Christmas shopping crowd did pay off at the very end. The right presents were obtained, and to further add to the joy, I finally got hold of my own very ASUS EEE PC! After a disastrous adventure on eBay, countless disappointments in the shops, and a somewhat obsessive compulsive venture to the ugliest city of my country, I am pleased to announce: ladies and gentlemen: I got em. Apparently the very last, ASUS EEE PC 1000HD, and specially for Christmas: the white version! Unfortunately, _no_ shop in .nl sells the Linux version. Apparently consumers prefer to pay for a Windows license and the dreadful OEM CD instead of a nice 40GB SSD. Well, if the noise will start to bother, I guess I'll visit jkk mobile and put the SSD in myself. It's a relieve to find that ubuntu eee runs flawlessly and everything works like a charm. All adjustments have been made to resume my ruby coding and blogging as well.

The holiday's have not arrived for me yet though. Starting tomorrow I have the social calls to make and right after that I'll travel to Berlin for the 25C3. But there is one thing that's different in this busy week as opposed to the previous: an EEE with a full sized keyboard! I get to do some work while I'm wasting my time, finally salvation!

Marry Christmas!

Shoes course at Ruby learning

No post for the GUI toolkit extravaganza this time since I've been having some problems getting wxRuby to run properly. But this posting is related since we will deal with Shoes in one of the upcoming posts in the GUI toolkit extravaganza. So I just wanted to let you know I rolled in to the Shoes online course at rubylearning.org. It's a paid course, the cost is 5$ which is not much money. Why, the author of Shoes, seems to be happy about this course so I thought I'd give it a try. Anyway, the POIRPWSC101 course starts at 13 December and ends at 26 Dec 2008. This is a nice short time, so I should be able to keep focus :)

Some while back I tried to follow the Free Online Core Ruby Programming Course (FORPC101), it was good but I did not manage to keep up due to poor planning on my side. It seems that since this time they are providing a few more interesting courses including the following:

POIRPWSC101 - Paid Online Ruby with Shoes Programming Course
POIRPWDC101 - Paid Online FXRuby and MySQL Programming Course

If the Shoes fit, I think I'll sign up for the FXRuby and MySQL course as well. But it depends a little on my private and professional schedules. Oh and offcourse I'll write about my experiences on this Ruby class on this blog as well. If you are interested in taking a free, or almost free course on Ruby take a look at Rubylearning.