Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Basic Shoes is go.

  • Loading branch information...
commit 052fecb4e2e1a5cfc9629c23c1a19b8beeae8ea7 1 parent 3feef1c
Steve Klabnik steveklabnik authored

Showing 1 changed file with 183 additions and 0 deletions. Show diff stats Hide diff stats

  1. +183 0 lessons/basic_shoes.rb
183 lessons/basic_shoes.rb
... ... @@ -0,0 +1,183 @@
  1 +# encoding: UTF-8
  2 +
  3 +lesson_set "Basic Shoes" do
  4 +
  5 + lesson "Hello there!"
  6 + page "Let's get started" do
  7 + para "Welcome to your first lesson about Shoes! I'm going to introduce you to the ",
  8 + "basics that Shoes brings to everyone who programs."
  9 + para "If you didn't know, Shoes is a Ruby toolkit that lets you build GUI programs ",
  10 + "really easy and fun!"
  11 + flow do
  12 + para "(click the little "
  13 + icon_button :arrow_right, nil do
  14 + alert "Not this one! The one below!"
  15 + end
  16 + para " on the bottom of the screen to get started)"
  17 + end
  18 + end
  19 +
  20 + page "Lesson Controls" do
  21 + para "Before we move on, Here's a refresher on the controls you can use ",
  22 + "to move around in the Lesson."
  23 + flow do
  24 + icon_button :arrow_left, nil
  25 + para strong("back"), ": goes back one page"
  26 + end
  27 + flow do
  28 + icon_button :arrow_right, nil
  29 + para strong("continue"), ": goes to the next page"
  30 + end
  31 + flow do
  32 + icon_button :menu, nil
  33 + para strong("menu"), ": makes it easy to jump around to any lesson"
  34 + end
  35 + flow do
  36 + icon_button :x, nil
  37 + para strong("close"), ": closes the tutor"
  38 + end
  39 + para "Don't forget! Press "
  40 + icon_button :arrow_right, nil
  41 + para "to move to the next part. Have at it!"
  42 + end
  43 +
  44 + lesson "Apps"
  45 + page "Shoes.app" do
  46 + para "Okay! Shoes is tons of fun. It's really easy to get started. Here's the ",
  47 + "simplest Shoes app ever:"
  48 + embed_code "Shoes.app do
  49 +end"
  50 + para "Give that a spin!"
  51 + end
  52 +
  53 + page "It's just a block" do
  54 + para "You didn't say that you wanted anything in the app, so it just gives you ",
  55 + "a blank window. You can pass options in, too: "
  56 + embed_code "Shoes.app :height => 200, :width => 200 do
  57 +end"
  58 + para "This'll give you whatever sized app you want! We'll be putting all of the ",
  59 + "fun stuff inside of the ", code("do...end"), "."
  60 + end
  61 +
  62 + lesson "para"
  63 + page "The basics" do
  64 + para "Blank windows are pretty boring, so let's spice it up with some text!"
  65 + embed_code 'Shoes.app do
  66 + para "Hello, world"
  67 +end'
  68 + para "You know what to do by now. ", code("para"), " is short for 'paragraph.' It ",
  69 + "lets you place text in your apps."
  70 + para code("para"), " and other Shoes widgets take bunches of options, too. Check ",
  71 + "it:"
  72 + embed_code 'Shoes.app do
  73 + para "Hello there, world", :font => "TakaoGothic"
  74 +end'
  75 + end
  76 +
  77 + lesson "stacks"
  78 + page "They're default!" do
  79 + para "If you're looking to lay out your Shoes widgets, there are two options. The ",
  80 + "first is a ", code("stack"), ". A Stack is the default layout a Shoes app ",
  81 + "has. So this won't look much differently than one without the stack:"
  82 + embed_code 'Shoes.app do
  83 + stack do
  84 + para "Hello!"
  85 + para "Hello!"
  86 + para "Hello!"
  87 + end
  88 +end'
  89 + para "As you can see, the ", code("para"), "s are stacked on top of each other. ",
  90 + "By itself, kinda boring, since they already do this. But..."
  91 + end
  92 +
  93 + lesson "flows"
  94 + page "The counterpart of stacks" do
  95 + para code("flow"), "s are kind of like stacks, but they go sideways rather than ",
  96 + "up and down. Try this as an example:"
  97 + embed_code 'Shoes.app do
  98 + flow do
  99 + para "Hello!"
  100 + para "Hello!"
  101 + para "Hello!"
  102 + end
  103 +end'
  104 + para "Just a little bit different, eh?"
  105 + end
  106 +
  107 + lesson "stacks + flows"
  108 + page "With their powers combined..." do
  109 + para "You can combine the ", code("stack"), " with the ", code("flow"), "s ",
  110 + "to make whatever kind of layout you want. For example: "
  111 + embed_code 'Shoes.app do
  112 + flow do
  113 + stack :width => "50" do
  114 + para "Hello!"
  115 + para "Hello!"
  116 + para "Hello!"
  117 + end
  118 + stack :width => "50" do
  119 + para "Goodbye!"
  120 + para "Goodbye!"
  121 + para "Goodbye!"
  122 + end
  123 + end
  124 +end'
  125 + para "The ", code(":width"), " attribute sets how wide the stack is. Pretty simple."
  126 + end
  127 +
  128 + lesson "button"
  129 + page "Push it real good" do
  130 + para "Buttons are also super simple in Shoes. Just give them a title and a ",
  131 + "bunch of code to run when they get pushed:"
  132 + embed_code 'Shoes.app do
  133 + button "Push me" do
  134 + alert "Good job."
  135 + end
  136 +end'
  137 + para "I bet you're starting to see a pattern. Shoes loves to use blocks of code ",
  138 + "to make things super simple."
  139 + end
  140 +
  141 + lesson "image"
  142 + page "Pics or it didn't happen" do
  143 + para "There are two ways that you can show an image in a Shoes app. Either you ",
  144 + "have the file on your computer:"
  145 + embed_code 'Shoes.app do
  146 + image "#{HH::STATIC}/matz.jpg"
  147 +end'
  148 + para "(Can you figure out what this does? Don't feel bad if you can't.)"
  149 + para "You can also specify an image on the web:"
  150 + embed_code 'Shoes.app do
  151 + image "http://shoesrb.com/images/shoes-icon.png"
  152 +end'
  153 + para "Either one is fine. Shoes cares not."
  154 + end
  155 +
  156 + lesson "edit_line"
  157 + page "Getting some input" do
  158 + para "If you'd like to let someone type something in a box, well, ",
  159 + code("edit_line"), " is right up your alley!"
  160 + embed_code 'Shoes.app do
  161 + edit_line
  162 +end'
  163 + para "This is sort of boring though... why not get the information from the box?"
  164 + embed_code 'Shoes.app do
  165 + line = edit_line
  166 + button "Push me!" do
  167 + alert line.text
  168 + end
  169 +end'
  170 +
  171 + end
  172 +
  173 + lesson "Summary"
  174 + page "Great job!" do
  175 + para "There's a ton more things that you can do with Shoes, but you've got the ",
  176 + "basics down!"
  177 + para "If you'd like to learn more, you can visit the ",
  178 + link("Shoes website",
  179 + :click => "http://shoesrb.com/"),
  180 + " or press Control-M (or Command-M) to bring up the Shoes Manual."
  181 + end
  182 +
  183 +end

0 comments on commit 052fecb

Please sign in to comment.
Something went wrong with that request. Please try again.