NOBODY KNOWS SHOES

Shoes is a cross-platform mini-gooey toolkit for the Ruby programming language written _Why. I installed Shoes on an Ubuntu box ran with it (bad pun intended).

Let’s move from puns to code. A simple Shoes application is wrapped around the following piece of code.

1. Shoes.app :height => 250, :width => 200 do
2. end

Shoes.app :height => 250, :width => 200 do end

As you can see, a Shoes application is simply a Ruby block. You can pass in a hash or arguments with the values for the window’s default height and width. If you save the above piece of code as Appy.rb you can run it from the Shoes installation directory by running the following command.

./shoes Appy.rb

If you run the above application it simply opens a empty application window. An empty window is pretty much useless. An GUI application needs buttons and text fields to be of practical use. Lets add two buttons to our application that when pressed print out an informational bit of text to the console.

1. Shoes.app :height => 200, :width => 200 do
2. button "Button One" do
3. puts "Button One Pressed"
4. end
5. button "Button Two" do
6. puts "Button Two Pressed"
7. end
8. end

Shoes.app :height => 200, :width => 200 do button "Button One" do puts "Button One Pressed" end button "Button Two" do puts "Button Two Pressed" end end

When working with soft gooeys the second thing one needs to learn after how to add a button is how to layout it out. As of this writing (Release 117), Shoes provides two layout managers, Stack and Flow. Stack lays out your components from top to bottom. The Flow layout container lays out UI widgets from left to right. Building on top of our Shoes application the following code layouts out the two buttons using the Stack cointainer with a 10 pixel margin.

1. Shoes.app :height => 200, :width => 200 do
2. stack :margin => 10 do
3. button "Button One" do
4. puts "Button One Pressed"
5. end
6. button "Button Two" do
7. puts "Button Two Pressed"
8. end
9. end
10. end

Shoes.app :height => 200, :width => 200 do stack :margin => 10 do button "Button One" do puts "Button One Pressed" end button "Button Two" do puts "Button Two Pressed" end end end

To add a simple text field just call the text field with the default text value.

1. Shoes.app :height => 200, :width => 200 do
2. stack :margin => 10 do
3. button "Button One" do
4. puts "Button One Pressed"
5. end
6. button "Button Two" do
7. puts "Button Two Pressed"
8. end
9. text "Text Field"
10. end
11. end

Shoes.app :height => 200, :width => 200 do stack :margin => 10 do button "Button One" do puts "Button One Pressed" end button "Button Two" do puts "Button Two Pressed" end text "Text Field" end end

Here is how the above code renders.

I would be a bit more practical if we can update the text field based on some condition, say when a button is pressed. Since we need to reference the text field in the code block for each button we need to have a variable for it. Also, instead of printing text to the console, we will display it in the text field.

1. my_text_field = nil
2. Shoes.app :height => 200, :width => 200 do
3. stack :margin => 10 do
4. button "Button One" do
5. my_text_field.replace "Button One Pressed"
6. end
7. button "Button Two" do
8. my_text_field.replace "Button Two Pressed"
9. end
10. my_text_field = text "Text Field"
11. end
12. end

my_text_field = nil Shoes.app :height => 200, :width => 200 do stack :margin => 10 do button "Button One" do my_text_field.replace "Button One Pressed" end button "Button Two" do my_text_field.replace "Button Two Pressed" end my_text_field = text "Text Field" end end

As you can see, you can get started writing Shoes GUI applications fairly quickly. But as mentioned earlier, Shoes is a mini-GUI toolkit that is still under development. _Why has mentioned that he intends to keep Shoes small. From what I can gather from sample applications and the online code repository Shoes provides additional widgets such as an edit_line, edit_box, and list_box. But I was not able to find any information regarding tabs, check boxes, radio boxes, or trees.

In the next installment of Running with Shoes, I’ll go over it’s 2D and animation capabilities.

http://www.juixe.com/techknow/index.php/2007/08/27/running-with-shoes-a-mini-gui/
http://sergiosantos.info/2007/8/shoes-a-ruby-gui-toolkit
Download "Nobody knows Shoes"