Juixe Techknow

The Shoes microframework has a small number of succinct data entry controls. Essentially you can create User Interface forms and screens with buttons, text fields, text areas, and select options.

All of the Shoes UI controls can have associated code blocks that execute when the control changes. For example, lets create a text field in Shoes, default it with a string value, and print the current text in the console when someone edits the text field. Here is the code that does what we want!

[source:ruby]
Shoes.app do
stack do
@text = edit_line :text => “Default Value” do
puts “Text Changed To: #{@text.text}”
end
end
end
[/source]

Notice that the method edit_line creates a text field. The method edit_box create a text area, and edit_list creates a select box. To create a button, simply use the aptly named button method.

Lets create a little more elaborate Shoes UI example. Lets add a text field, selection list, and button in a Shoes canvas. When the button is pressed, we will set the text field with the value of the currently selected value in the list.

[source:ruby]
Shoes.app do
stack do
@text = edit_line
@list = list_box :items => [‘Apple’, ‘Orange’, ‘Guava’]
button ‘Update’ do
@text.text = “You Selected: #{@list.text}”
end
end
end
[/source]

Lets create another Shoes example. This time lets dynamically update the available items in a list when a button is pushed. Here is the code for this scenario.

[source:ruby]
Shoes.app do
@counter = 0
stack do
@list = list_box :items => [@counter.to_s] do
puts “list changed”
end
button ‘Add To List’ do
@counter += 1
# Pushing new item to array does not update list
# To update list values call items=
@list.items = (@list.items < < @counter.to_s) end end end [/source] Notice that for to update the available values in the list, you need to call the items= method. To create a text area use the edit_box method. Like the edit_line, edit_box accepts a code block that is executed every time the text is modified. As expected, you can set the edit box height and width. The height needs to be an integer number of pixels. The width can be an integer number of pixels or a decimal (0.0 - 1.0) for the percent of the available space. For example, to create a text box that is 200 pixels high and takes up 50 percent of the available canvas width we can use code like the following. [source:ruby] Shoes.app do stack do @box = edit_box 'Default', :width => 0.5, :height => 200 do
puts @box.text
end
end
end
[/source]

All Shoes UI control widgets, and shapes for that matter, can be made to hide, and appear by invoking the hide and show methods respectively.

As of this writing, Shoes does not support checkboxes, radio buttons, tabs, or tables.

There are more Shoes GUI tutorials and code samples here.

Technorati Tags: ruby, shoes, ui, user interface, form