Juixe Techknow

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.

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.

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.

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.

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.

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.

Technorati Tags: ruby, shoes, gui, ui, _why, tutorial

Related posts:

1. Running with Shoes – Form and Function
2. Running with Shoes – 2D Graphics and Animation
3. Running with Shoes – Colorfy
4. Running with Shoes – Tasty Text
5. Running with Shoes – Show Me More
6. Running with Shoes – 2D Examples