Make GUI Apps with Shoes


Published on

Presentation for the October 1 ECRuby Open House. A shorter version of the Twin Cities Code Camp IV slideshow with updated content.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi, I’m Brian, and I’m gonna talk to you about Shoes.
  • No, not THOSE kind of shoes..
  • 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.
  • Highly dynamic, high level, 100% object oriented, 100% open source, and really easy to learn.
  • The syntax is simple - no unnecessary semicolons or curly braces. The interpreter knows when lines end.
  • so the type is set when you assign something to the variable.
  • but once it’s set, it’s set.
  • here we use the to_s method to turn the integer 25 into the string 25.
  • This is pretty common though, so Ruby handles it.
  • It even handles nils gracefully.
  • Note that the parameters you pass in aren’t typed.
  • 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.
  • Ruby has a built-in way of handling this pattern. It’s a huge time-saver.
  • Square brackets means array.
  • Hashes are lookups. You have the curly braces surrounding the hash’s contents.
  • HashRocket.
  • Remember... everything is an object.
  • The simplest Shoes app ever.
  • Here we can make an alert pop up when we click the button. Notice how easy it is to read that code?
  • 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.
  • You can create gradients if you create a range
  • 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.
  • Flows simply align next to eachother.
  • Shoes has helpers for various types of text.
  • You can grab user input easily
  • and you can make that input secret. It’s not encrypted in your code though.
  • You can use a edit box instead of an edit line if you want a multiline input box
  • You create dropdown lists by passing an array to the list box.
  • The @names section contains the names we add, and names get added when we click the button.
  • A window is just another Shoes app. There are some tricks you can use to pass data between the windows, too.
  • The video player plays mp3s, oggs, avis, movs, flvs and more.
  • When the app starts, these libraries get installed to the user’s home directory.
  • This searches YouTube and displays thumbnails of videos it finds that match the search. Clicking a video plays the clip.
  • This is a simple MP3 player.
  • So you can load files, save files, and choose colors.
  • 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.
  • You can grab the sample apps you saw here from my repository on GitHub, and you can grab Shoes there too.
  • Make GUI Apps with Shoes

    1. 1. Make GUI Apps with Shoes Brian Hogan
    2. 2. Shoes?
    3. 3. simple GUI toolkit
    4. 4. why ruby? • Highly dynamic • Very high level • 100% object oriented • 100% open-source • Really easy to learn
    5. 5. simple code. age = 42 first_name = "Homer" start_date = 1980, 06, 05 annual_salary = 100000.00
    6. 6. Ruby is dynamically typed
    7. 7. but strong-typed!
    8. 8. so a string and a number can be declared without a type...
    9. 9. ...but you can’t just add a number to a string without converting it. age = 25 "you are " + age.to_s + " years old!"
    10. 10. there’s a shortcut for building strings though: age = 25 "you are #{age} years old."
    11. 11. #{} embeds an expression in a string, converting the result to a string!
    12. 12. Ruby has simple logic. if on_probation(start_date) puts "Yes" else puts "no" end
    13. 13. Methods (functions) are simple too. # if start date + 6 months is > today def on_probation?(start_date) (start_date >> 6 > end
    14. 14. 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
    15. 15. ...or awesome! class User attr_accessor :first_name, :last_name end
    16. 16. Everything is an object... even integers and strings!
    17. 17. Arrays colors = ["Red", "Green", "Blue"]
    18. 18. Hashes (dictionaries) attributes = {:age => 25, :first_name => "Homer", :last_name => "Simpson"}
    19. 19. =>
    20. 20. Hashes as parameters for methods are very common.
    21. 21. Blocks some_method do some_code_you_wrote end
    22. 22. Blocks can iterate... @colors = ["red", "green", "blue"] @colors.each do |color| puts color end
    23. 23. and encapsulate code create_table :products do |t| t.string :name t.text :description t.boolean :visible t.integer :price end
    24. 24. You use them all the time in Ruby.
    25. 25. in fact, every method can take a block. 5.times do puts "Hello!" end
    26. 26. Blocks make it easy to write your own language.
    27. 27. DSL - Domain Specific Language
    28. 28. Shoes is a DSL for making GUI apps.
    29. 29. A Shoes app is an object.
    30. 30. You use blocks to define the user interface and trigger events,
    31. 31. :title => "Hello World" do alert "Hello World" end
    32. 32. :title => "Hello World" do button "Click me" do alert "Hello World" end end
    33. 33. :title => "Hello World", :width => 320, :height => 240 do background red end
    34. 34. :title => "Hello World", :width => 320, :height => 240 do background end
    35. 35. stacks
    36. 36. :title => "Hello World", :width => 320, :height => 240 do stack do para "Hello" para "World" end end
    37. 37. flows
    38. 38. :title => "Hello World", :width => 320, :height => 240 do flow do para "Hello" para "World" end end
    39. 39. Combine stacks and flows.
    40. 40. :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
    41. 41. :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
    42. 42. edit_line :title => "Hello World" do para "Enter your name" @name = edit_line end
    43. 43. edit_line :title => "text boxes" do para "Password" @pass = edit_line(:secret => true) end
    44. 44. edit_box :title => "text boxes" do para "About Me" @about = edit_box end
    45. 45. list_box :title => "text boxes" do para "Colors" @color = list_box :items => ["green", "red", "blue"] end
    46. 46. Use .text to grab the values in the boxes. :title => "Hello World" do para "Enter your name" @name = edit_line button "Go" do name = @name.text alert "Hello #{name}" end end
    47. 47. Since everything is an object, you can work with it... even stacks and flows!
    48. 48. do para "add name" button "Add" do @names.append do para @name.text end @name.text = "" end @names = stack end
    49. 49. Ooooh.. windows! do button "Open window" do window :title => "Child" do para "Hello!" end end end
    50. 50. Shoes can load images, play music, and play movies.
    51. 51. You can use and embed almost every Ruby library
    52. 52. It can open browser windows...
    53. 53. ..and hook into the OS’s open, save, fonts, and color pickers.
    54. 54. Make games with Shoes!
    55. 55. You can build installers for Windows, Linux, and Mac.
    56. 56. What makes Shoes so great?
    57. 57. It lets you build things fast...
    58. 58. ...and have fun doing it.
    59. 59.
    60. 60. questions? twitter: bphogan