Make GUI Apps with Shoes
         Brian Hogan
Shoes?
simple GUI toolkit
why ruby?
• Highly dynamic
• Very high level
• 100% object oriented
• 100% open-source
• Really easy to learn
simple code.
age = 42
first_name = "Homer"
start_date = Date.new 1980, 06, 05
annual_salary = 100000.00
Ruby is dynamically
       typed
but strong-typed!
so a string and a
  number can be
declared without a
      type...
...but you can’t just add
  a number to a string
 without converting it.
age = 25
"you are " + age.to_s + " years old!"
there’s a shortcut for
building strings though:

  age = 25
  "you are #{age} years old."
#{} embeds an
 expression in a string,
converting the result to
       a string!
Ruby has simple logic.
 if on_probation(start_date)
   puts "Yes"
 else
   puts "no"
 end
Methods (functions) are
     simple too.
  # if start date + 6 months is > today
  def on_probation?(start_date)
      (start_date >> 6 > Date.today)
  end
Classes can be boring...
class Person
  @first_name
  @last_name

  def first_name=(f)
    @first_name = f
  end

  def first_name
    @first_name
  end

  def last_name=(l)
    @last_name = l
  end

  def last_name
    @last_name
  end
end
...or awesome!
class User
  attr_accessor :first_name, :last_name
end
Everything is an
object... even integers
     and strings!
Arrays

colors = ["Red", "Green", "Blue"]
Hashes (dictionaries)
attributes = {:age => 25,
              :first_name => "Homer",
              :last_name => "Simpson"}
=>
Hashes as parameters
for methods are very
     common.
Blocks
some_method do
  some_code_you_wrote
end
Blocks can iterate...
@colors = ["red", "green", "blue"]

@colors.each do |color|
  puts color
end
and encapsulate code
create_table :products do |t|
  t.string :name
  t.text :description
  t.boolean :visible
  t.integer :price
end
You use them all the
   time in Ruby.
in fact, every method
   can take a block.
     5.times do
       puts "Hello!"
     end
Blocks make it easy to
   write your own
      language.
DSL - Domain Specific
      Language
Shoes is a DSL for
making GUI apps.
A Shoes app is an
     object.
You use blocks to
   define the user
interface and trigger
       events,
Shoes.app :title => "Hello World" do
  alert "Hello World"
end
Shoes.app :title => "Hello World" do
  button "Click me" do
    alert "Hello World"
  end
end
Shoes.app :title => "Hello World",
          :width => 320,
          :height => 240 do

  background red

end
Shoes.app :title => "Hello World",
          :width => 320,
          :height => 240 do

  background red..black

end
stacks
Shoes.app :title => "Hello World",
          :width => 320,
          :height => 240 do

  stack do
    para "Hello"
    para "World"
  end
end
flows
Shoes.app :title => "Hello World",
          :width => 320,
          :height => 240 do

  flow do
    para "Hello"
    para "World"
  end
end
Combine stacks and
     flows.
Shoes.app :title => "Hello World",
          :width => 320,
          :height => 240 do

  stack :width => "100%" do
    background gray
    title "Hello World"
  end

  stack :width => "50%" do
    flow :width => "100%" do
      para "Left side has some text"
    end
  end

  stack :width => "50%" do
    background white
    para "Right side has some text"
    para "without an inner flow."
  end

end
Shoes.app :title => "Hello World" do
  stack do
    banner "Hello there."
    title "The quick"
    subtitle "brown fox"
    tagline "jumped"
    caption "over"
    para "the"
    inscription "lazy dog"
  end
end
edit_line
Shoes.app :title => "Hello World" do
  para "Enter your name"
  @name = edit_line
end
edit_line
Shoes.app :title => "text boxes" do
  para "Password"
  @pass = edit_line(:secret => true)
end
edit_box
Shoes.app :title => "text boxes" do
  para "About Me"
  @about = edit_box
end
list_box
Shoes.app :title => "text boxes" do
  para "Colors"
  @color = list_box :items => ["green", "red", "blue"]
end
Use .text to grab the
        values in the boxes.
Shoes.app :title => "Hello World" do
  para "Enter your name"
  @name = edit_line
  button "Go" do
    name = @name.text
    alert "Hello #{name}"
  end
end
Since everything is an
object, you can work
 with it... even stacks
      and flows!
Shoes.app do
  para "add name"
  button "Add" do
    @names.append do
      para @name.text
    end
    @name.text = ""
  end
  @names = stack
end
Ooooh.. windows!
Shoes.app do
  button "Open window" do
    window :title => "Child" do
      para "Hello!"
    end
  end
end
Shoes can load images,
 play music, and play
       movies.
You can use and embed
  almost every Ruby
        library
It can open browser
      windows...
..and hook into the
OS’s open, save, fonts,
  and color pickers.
Make games with
    Shoes!
You can build installers
for Windows, Linux, and
         Mac.
What makes Shoes so
      great?
It lets you build things
          fast...
...and have fun doing it.
http://github.com/napcs/shoes_demo_apps/
           http://the-shoebox.org/
    http://github.com/whymirror/shoes/
questions?
brianhogan@napcs.com
   twitter: bphogan
http://www.napcs.com/

Make GUI Apps with Shoes

Editor's Notes

  • #2 Hi, I’m Brian, and I’m gonna talk to you about Shoes.
  • #3 No, not THOSE kind of shoes..
  • #4 This kind of Shoes. A simple framework for writing graphical apps in Ruby. You can use it to write fun stuff like games, or serious stuff like database viewers or a full-blown point-of-sale system.
  • #5 Highly dynamic, high level, 100% object oriented, 100% open source, and really easy to learn.
  • #6 The syntax is simple - no unnecessary semicolons or curly braces. The interpreter knows when lines end.
  • #7 so the type is set when you assign something to the variable.
  • #8 but once it’s set, it’s set.
  • #10 here we use the to_s method to turn the integer 25 into the string 25.
  • #11 This is pretty common though, so Ruby handles it.
  • #12 It even handles nils gracefully.
  • #14 Note that the parameters you pass in aren’t typed.
  • #15 This is a common pattern you see in Java, .Net, PHP, and other object oriented languages. You create instance bariables but you use getters and setters to access them.
  • #16 Ruby has a built-in way of handling this pattern. It’s a huge time-saver.
  • #18 Square brackets means array.
  • #19 Hashes are lookups. You have the curly braces surrounding the hash’s contents.
  • #20 HashRocket.
  • #26 Remember... everything is an object.
  • #32 The simplest Shoes app ever.
  • #33 Here we can make an alert pop up when we click the button. Notice how easy it is to read that code?
  • #34 Some methods set colors. Also notice that when we use hashes as parameters, it’s extremely clear to the reader of the code what’s configured. And the order doesn’t matter.
  • #35 You can create gradients if you create a range
  • #36 Shoes uses stacks to line elements on top of eachother. If you’ve done HTML, you can think of Stacks as block elements... each one starts on a new line.
  • #38 Flows simply align next to eachother.
  • #42 Shoes has helpers for various types of text.
  • #43 You can grab user input easily
  • #44 and you can make that input secret. It’s not encrypted in your code though.
  • #45 You can use a edit box instead of an edit line if you want a multiline input box
  • #46 You create dropdown lists by passing an array to the list box.
  • #49 The @names section contains the names we add, and names get added when we click the button.
  • #50 A window is just another Shoes app. There are some tricks you can use to pass data between the windows, too.
  • #53 The video player plays mp3s, oggs, avis, movs, flvs and more.
  • #54 When the app starts, these libraries get installed to the user’s home directory.
  • #55 This searches YouTube and displays thumbnails of videos it finds that match the search. Clicking a video plays the clip.
  • #56 This is a simple MP3 player.
  • #58 So you can load files, save files, and choose colors.
  • #59 Lots of people make games with Shoes, and it’s a great way to get your kids or younger siblings interested in programmin.g Since the code is open-source, you can learn from it.
  • #64 You can grab the sample apps you saw here from my repository on GitHub, and you can grab Shoes there too.