shoes 3.0.1 → 4.0.0.pre1

data/static/manual-en.txt

@@ -8,18 +8,17 @@ You see, the trivial Shoes program can be just one line:
 
 {{{
  #!ruby
- Shoes.app { button("Click me!") { alert("Good job.") } }
+ Shoes.app{button("Click me!"){alert("Good job.")}}
 }}}
 
 Shoes programs are written in a language called Ruby.  When Shoes is handed
 this simple line of Ruby code, a window appears with a button inside reading
 "Click me!"  When the button is clicked, a message pops up.
 
-On Linux, here's how this might look: !{:margin_left => 100}man-shot1.png!
+On Linux, here's how this might look: !{margin_left: 100}man-shot1.png!
 
 While lots of Shoes apps are graphical games and art programs, you can also
-layout text and edit controls easily. !{:margin_left =>
-40}shoes-manual-apps.gif!
+layout text and edit controls easily. !{margin_left: 40}shoes-manual-apps.gif!
 
 And, ideally, Shoes programs will run on any of the major platforms out there.
 Microsoft Windows, Apple's Mac OS X, Linux and many others.
@@ -95,7 +94,7 @@ Here's how to run the installer:
 
  * On '''Mac OS X''', you'll have a file ending with '''.dmg'''.  Double-click this file and a window should appear with a '''Shoes''' icon and an '''Applications''' folder.  Following the arrow, drag the Shoes icon into the '''Applications''' folder. !man-intro-dmg.png!
  * On '''Windows''', you'll download a '''.exe''' file.  Double-click this file and follow the instructions. !man-intro-exe.png!
- * On '''Linux''', you'll download a file ending with '''.run'''.  Double-click this file and Shoes will start up.  (You can also run this file from a prompt as if it was a shell script.  In fact, it is a shell script!)
+ * On '''Linux''', you'll need to compile your own Shoes. Check out [[https://github.com/shoes/shoes/wiki/Building-Shoes-on-Linux this page]] for more. We want to provide packages eventually!
 
 ==== Step 2: Start a New Text File ====
 
@@ -229,10 +228,10 @@ the [[Element.window]] and [[Element.dialog]] methods, in addition to
 Shoes.app.
 
 {{{
- Shoes.app :title => "MAIN" do
+ Shoes.app title: "MAIN" do
    para self
    button "Spawn" do
-     window :title => "CHILD" do
+     window title: "CHILD" do
        para self
      end
    end
@@ -300,7 +299,7 @@ App object so you can do somefurther editing.
    end
    def add(msg)
      @stack.app do
-       @stack.append do
+       append do
          para msg
        end
      end
@@ -326,11 +325,11 @@ Fixed widths on slots are great so you can split the window into columns.
 {{{
  Shoes.app do
    flow do
-     stack :width => 200 do
+     stack width: 200 do
        caption "Column one"
        para "is 200 pixels wide"
      end
-     stack :width => -200 do
+     stack width: -200 do
        caption "Column two"
        para "is 100% minus 200 pixels wide"
      end
@@ -347,12 +346,12 @@ differently.  To be sure that the end of the slot is chopped off perfectly, the
 slot becomes a '''nested window'''.  A new layer is created by the operating
 system to keep the slot in a fixed square.
 
-On difference between normal slots and nested window slots is that the latter
+One difference between normal slots and nested window slots is that the latter
 can have scrollbars.
 
 {{{
  Shoes.app do
-   stack :width => 200, :height => 200, :scroll => true do
+   stack width: 200, height: 200, scroll: true do
      background "#DFA"
      100.times do |i|
        para "Paragraph No. #{i}"
@@ -443,8 +442,8 @@ To illustrate:
 
 {{{
  Shoes.app do
-   stack :margin => 10 do
-     @edit = edit_box :width => 1.0 do
+   stack margin: 10 do
+     @edit = edit_box width: 1.0 do
        @para.text = @edit.text
      end
      @para = para ""
@@ -467,7 +466,7 @@ UI Gothic'''.
 
 {{{
  Shoes.app do
-   para "てすと (te-su-to)", :font => case RUBY_PLATFORM
+   para "てすと (te-su-to)", font: case RUBY_PLATFORM
     when /mingw/; "MS UI Gothic"
     when /darwin/; "AppleGothic, Arial"
     else "Arial"
@@ -709,7 +708,7 @@ you'll get back a `true`. If not, you'll get back `false`.
 {{{
  #!ruby
  if confirm("Draw a circle?")
-  Shoes.app{ oval :top => 0, :left => 0, :radius => 50 }
+  Shoes.app{ oval top: 0, left: 0, radius: 50 }
  end
 }}}
 
@@ -847,7 +846,7 @@ App object is created and filled up with stacks, flows and other Shoes
 elements.
 
 The App is the window itself. Which may be closed or cleared and filled with
-new elements. !{:margin_left => 100}man-app.png!
+new elements. !{margin_left: 100}man-app.png!
 
 The App itself, in slot/box terminology, is a flow.  See the ''Slots'' section
 for more, but this just means that any elements placed directly at the
@@ -863,11 +862,11 @@ resizable.
 
 {{{
  #!ruby
- Shoes.app(:title => "White Circle",
-   :width => 200, :height => 200, :resizable => false) {
+ Shoes.app(title: "White Circle",
+   width: 200, height: 200, resizable: false) {
      background black
      fill white
-     oval :top => 20, :left => 20, :radius => 160
+     oval top: 20, left: 20, radius: 160
  }
 }}}
 
@@ -914,7 +913,7 @@ If you attach a block to a download, it'll get called as the `finish` event.
  #!ruby
  Shoes.app do
    stack do
-     title "Searching Google", :size => 16
+     title "Searching Google", size: 16
      @status = para "One moment..."
 
      # Search Google for 'shoes' and print the HTTP headers
@@ -936,11 +935,11 @@ Another simple use of `download` is to save some web data to a file, using the
  #!ruby
  Shoes.app do
    stack do
-     title "Downloading Google image", :size => 16
+     title "Downloading Google image", size: 16
      @status = para "One moment..."
 
      download "http://www.google.com/logos/nasa50th.gif",
-       :save => "nasa50th.gif" do
+       save: "nasa50th.gif" do
          @status.text = "Okay, is downloaded."
      end
    end
@@ -951,29 +950,6 @@ In this case, you can still get the headers for the downloaded file, but
 `response.body` will be `nil`, since the data wasn't saved to memory.  You will
 need to open the file to get the downloaded goods.
 
-If you need to send certain headers or actions to the web server, you can use
-the `:method`, `:headers` and `:body` styles to customize the HTTP request.
-(And, if you need to go beyond these, you can always break out Ruby's OpenURI
-class.)
-
-{{{
- #!ruby
- Shoes.app do
-   stack do
-     title "GET Google", :size => 16
-     @status = para "One moment..."
-
-     download "http://www.google.com/search?q=shoes", 
-         :method => "GET" do |dump|
-       @status.text = dump.response.body
-     end
-   end
- end
-}}}
-
-As you can see from the above example, Shoes makes use of the "GET" method to
-query google's search engine.
-
 === location() » a string ===
 
 Gets a string containing the URL of the current app.
@@ -1023,8 +999,8 @@ entire class of elements.  (Like giving all paragraphs a certain font.)
 Styles are easy to spot.  They usually show up when the element is created.
 
 {{{
- Shoes.app :title => "A Styling Sample" do
-   para "Red with an underline", :stroke => red, :underline => "single"
+ Shoes.app title: "A Styling Sample" do
+   para "Red with an underline", stroke: red, underline: "single"
  end
 }}}
 
@@ -1035,9 +1011,9 @@ The style hash can also be changed by using the [[Common.style]] method,
 available on every element and slot.
 
 {{{
- Shoes.app :title => "A Styling Sample" do
+ Shoes.app title: "A Styling Sample" do
    @text = para "Red with an underline"
-   @text.style(:stroke => red, :underline => "single")
+   @text.style(stroke: red, underline: "single")
  end
 }}}
 
@@ -1045,7 +1021,7 @@ Most styles can also be set by calling them as methods.  (I'd use the manual
 search to find the method.)
 
 {{{
- Shoes.app :title => "A Styling Sample" do
+ Shoes.app title: "A Styling Sample" do
    @text = para "Red with an underline"
    @text.stroke = red
    @text.underline = "single"
@@ -1079,9 +1055,8 @@ degrees counter-clockwise and the gradient will go from left to right.
 
 For: ''flow, stack''.
 
-Pins a slot relative to another slot or element.  Also, one may write `:attach
-=> Window` to position the slot at the window's top, left corner.  Taking this
-a bit further, the style `:top => 10, :left => 10, :attach => Window` would
+Pins a slot relative to another slot or element.  Also, one may write `attach: Window` to position the slot at the window's top, left corner.  Taking this
+a bit further, the style `top: 10, left: 10, attach: Window` would
 place the slot at (10, 10) in the window's coordinates.
 
 If a slot is attached to an element that moves, the slot will move with it.  If
@@ -1100,7 +1075,7 @@ will start without asking the user.
 For: ''all slots and elements''.
 
 Sets the pixel coordinate of an element's lower edge.  The edge is placed
-relative to its container's lower edge.  So, `:bottom => 0` will align the
+relative to its container's lower edge.  So, `bottom: 0` will align the
 element so that its bottom edge and the bottom edge of its slot touch.
 
 === :cap » :curve or :rect or :project ===
@@ -1246,7 +1221,7 @@ being 100%.)
 
 For: ''all slots and elements''.
 
-Hides or shows this object.  Any object with `:hidden => true` are not
+Hides or shows this object.  Any object with `hidden: true` are not
 displayed on the screen.  Neither are its children.
 
 === :inner » a number ===
@@ -1287,11 +1262,12 @@ Sets the spacing between lines in a text block.  Defaults to 4 pixels.
 
 For: ''all slots and elements''.
 
-Sets the left coordinate of this object to a specific pixel.  Setting `:left =>
-10` places the object's left edge ten pixels away from the left edge of the
+Sets the left coordinate of this object to a specific pixel.  Setting `left: 10` places the object's left edge ten pixels away from the left edge of the
 slot containing it.  If this style is left unset (or set to `nil`,) the object
 will flow in with the other objects surrounding it.
 
+You might also want to give it a :top, if it's acting a bit funny. Sometimes it needs both. :)
+
 === :margin » a number or an array of four numbers ===
 
 For: ''all slots and elements''.
@@ -1299,7 +1275,7 @@ For: ''all slots and elements''.
 Margins space an element out from its surroundings.  Each element has a left,
 top, right, and bottom margin.  If the `:margin` style is set to a single
 number, the spacing around the element uniformly matches that number.  In other
-words, if `:margin => 8` is set, all the margins around the element are set to
+words, if `margin: 8` is set, all the margins around the element are set to
 eight pixels in length.
 
 This style can also be given an array of four numbers in the form `[left, top,
@@ -1339,7 +1315,7 @@ Sets the outer radius (half of the ''total'' width) of the star, in pixels.
 
 For: ''star''.
 
-How many points does this star have?  A style of `:points => 5` creates a
+How many points does this star have?  A style of `points: 5` creates a
 five-pointed star.
 
 === :radius » a number ===
@@ -1355,9 +1331,9 @@ double this number.
 For: ''all slots and elements''.
 
 Sets the pixel coordinate of an element's right edge.  The edge is placed
-relative to its container's rightmost edge.  So, `:right => 0` will align the
+relative to its container's rightmost edge.  So, `right: 0` will align the
 element so that its own right edge and the right edge of its slot touch.
-Whereas `:right => 20` will position the right edge of the element off to the
+Whereas `right: 20` will position the right edge of the element off to the
 left of its slot's right edge by twenty pixels.
 
 === :rise » a number ===
@@ -1373,7 +1349,7 @@ element has a `:rise` of -10 pixels.
 
 For: ''flow, stack''.
 
-Establishes this slot as a scrolling slot.  If `:scroll => true` is set, the
+Establishes this slot as a scrolling slot.  If `scroll: true` is set, the
 slot will show a scrollbar if any of its contents go past its height.  The
 scrollbar will appear and disappear as needed.  It will also appear inside the
 width of the slot, meaning the slot's width will never change, regardless of
@@ -1476,11 +1452,13 @@ or edit_line.
 For: ''all slots and elements''.
 
 Sets the top coordinate for an object, relative to its parent slot.  If an
-object is set with `:top => 40`, this means the object's top edge will be
+object is set with `top: 40`, this means the object's top edge will be
 placed 40 pixels beneath the top edge of the slot that contains it.  If no
 `:top` style is given, the object is automatically placed in the natural flow
 of its slot.
 
+You should probably give it a :left, too, if it's acting strange. It likes to have both. :)
+
 === :undercolor » a Shoes::Color ===
 
 For: ''banner, caption, code, del, em, ins, inscription, link, para, span,
@@ -1513,6 +1491,12 @@ Vary the font for a group of text.  Two choices:
  * "normal" - standard font.
  * "smallcaps" - font with the lower case characters replaced by smaller variants of the capital characters. 
 
+=== :wedge » true or false ===
+
+For: ''arc''.
+
+Indicates how arcs are to be filled.  If set to true, the arc is filled as a 'pie chart' style wedge.  The default setting of false fills the arc to the chord connecting the end points of the arc.
+
 === :weight » a string ===
 
 For: ''banner, caption, code, del, em, ins, inscription, link, para, span,
@@ -1631,8 +1615,8 @@ color used to paint inside the lines.
  Shoes.app do
    stroke red
    fill blue
-   oval :top => 10, :left => 10,
-     :radius => 100
+   oval top: 10, left: 10,
+     radius: 100
  end
 }}}
 
@@ -1747,6 +1731,10 @@ Draws a rectangle starting from coordinates (top, left) with dimensions of
 width x height.  Optionally, you may give the rectangle rounded corners with a
 fifth argument: the radius of the corners in pixels.
 
+Alternate Call:
+rect(top, left, sidelength): Will draw a square with sides having the given length
+
+
 As with all other shapes, the rectangle is drawn using the stroke and fill colors.
 
 {{{
@@ -1804,10 +1792,10 @@ and arcs and bends.
    fill red(0.2)
    shape do
      move_to(90, 55)
-     arc_to(50, 55, 50, 50, 0, PI/2)
-     arc_to(50, 55, 60, 60, PI/2, PI)
-     arc_to(50, 55, 70, 70, PI, TWO_PI-PI/2)
-     arc_to(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI)
+     arc_to(50, 55, 50, 50, 0, Shoes::PI/2)
+     arc_to(50, 55, 60, 60, Shoes::PI/2, Shoes::PI)
+     arc_to(50, 55, 70, 70, Shoes::PI, Shoes::TWO_PI-Shoes::PI/2)
+     arc_to(50, 55, 80, 80, Shoes::TWO_PI-Shoes::PI/2, Shoes::TWO_PI)
    end
  end
 }}}
@@ -1905,7 +1893,7 @@ Shoes layers background elements.
  #!ruby
  Shoes.app do
    background black
-   background white, :width => 50
+   background white, width: 50
  end
 }}}
 
@@ -1917,7 +1905,7 @@ along the left side.
 
 Creates a Banner text block.  Shoes automatically styles this text to 48 pixels high.
 
-=== border(text, :strokewidth => a number) » Shoes::Border ===
+=== border(text, strokewidth: a number) » Shoes::Border ===
 
 Draws a Border element using a specific color (or pattern.)  Patterns can be
 colors, gradients or images.  Colors and images will tile across the border.
@@ -1966,7 +1954,7 @@ attached here which is called any type the user changes the text in the box.
  Shoes.app do
    edit_box
    edit_box "HORRAY EDIT ME"
-   edit_box "small one", :width => 100, :height => 160
+   edit_box "small one", width: 100, height: 160
  end
 }}}
 
@@ -2026,14 +2014,14 @@ single underline.
 
 Creates an Inscription text block.  Shoes styles this text at 10 pixels high.
 
-=== link(text, :click => proc or string) » Shoes::Link ===
+=== link(text, click: proc or string) » Shoes::Link ===
 
 Creates a Link text block, which Shoes styles with a single underline and
 colors with a #06E (blue) colored stroke.
 
 The default LinkHover style is also single-underlined with a #039 (dark blue) stroke.
 
-=== list_box(:items => [strings, ...]) » Shoes::ListBox ===
+=== list_box(items: [strings, ...]) » Shoes::ListBox ===
 
 Adds a drop-down list box containing entries for everything in the `items`
 array.  An optional block may be attached, which is called if anything in the
@@ -2042,9 +2030,9 @@ box becomes selected by the user.
 {{{
  #!ruby
  Shoes.app do
-   stack :margin => 10 do
+   stack margin: 10 do
      para "Pick a card:"
-     list_box :items => ["Jack", "Ace", "Joker"]
+     list_box items: ["Jack", "Ace", "Joker"]
    end
  end
 }}}
@@ -2139,7 +2127,7 @@ window.  This way the child window can call the parent.
 
 {{{
  #!ruby
- Shoes.app :title => "The Owner" do
+ Shoes.app title: "The Owner" do
    button "Pop up?" do
      window do
        para "Okay, popped up from #{owner}"
@@ -2167,7 +2155,7 @@ away.
 {{{
  #!ruby
  Shoes.app do
-   s = stack :width => 200, :height => 200 do
+   s = stack width: 200, height: 200 do
      background red
      hover do
        s.clear { background blue }
@@ -2258,7 +2246,7 @@ The block is handed the cursor's `left` and `top` coordinates.
 
 {{{
  #!ruby
- Shoes.app :width => 200, :height => 200 do
+ Shoes.app width: 200, height: 200 do
    background black
    fill white
    @circ = oval 0, 0, 100, 100
@@ -2278,6 +2266,12 @@ was released.
 
 To catch the actual mouse click, use the [[Events.click]] event.
 
+=== resize { |self| ... } » self ===
+
+The resize block runs whenever the app is resized. Be careful with this one, since
+the block will be fired with every pixel of motion, even a simple resize may call
+the block dozens of times.
+
 === start { |self| ... } » self ===
 
 The first time the slot is drawn, the start event fires.  The block is handed
@@ -2366,7 +2360,7 @@ To set the width of a stack to 150 pixels:
 {{{
  #!ruby
  Shoes.app do
-   stack(:width => 150) { para "Now that's precision." }
+   stack(width: 150) { para "Now that's precision." }
  end
 }}}
 
@@ -2398,7 +2392,7 @@ This is commonly used to pad elements on the right, like so:
 {{{
  #!ruby
  Shoes.app do
-   stack :margin_right => 20 + gutter do
+   stack margin_right: 20 + gutter do
      para "Insert fat and ratified declaration of independence here..."
    end
  end
@@ -2474,7 +2468,7 @@ originally requested.
 {{{
  #!ruby
  Shoes.app do
-   @s = stack :width => "100%"
+   @s = stack width: "100%"
    para @s.style[:width]
  end
 }}}
@@ -2491,7 +2485,7 @@ example, there is a `width` method, thus there is also a `width` style.
  #!ruby
  Shoes.app do
    @s = stack { background green }
-   @s.style(:width => 400, :height => 200)
+   @s.style(width: 400, height: 200)
  end
 }}}
 
@@ -2530,7 +2524,7 @@ Gets the object for this element's container.
 
 Ah, here's the stuff of Shoes. An element can be as simple as an oval shape. Or
 as complex as a video stream. You've encountered all of these elements before
-in the Slots section of th manual.
+in the Slots section of the manual.
 
 Shoes has seven native controls: the Button, the EditLine, the EditBox, the
 ListBox, the Progress meter, the Check box and the Radio.  By "native"
@@ -2570,9 +2564,9 @@ covered as the [[Position.style]] method for slots.)
      @press = button "Stop your messin about!"
 
      # And so, both can be styled.
-     @text.style :size => 12, :stroke => red, :margin => 10
-     @press.style :width => 400
-     @back.style :height => 10
+     @text.style size: 12, stroke: red, margin: 10
+     @press.style width: 400
+     @back.style height: 10
    end
  end
 }}}
@@ -2596,7 +2590,7 @@ displace it 2 pixels left and 6 pixels on top, you end up with the coordinates
 {{{
  #!ruby
  Shoes.app do
-   flow :margin => 12 do
+   flow margin: 12 do
      # Set up three buttons
      button "One"
      @two = button "Two"
@@ -2650,7 +2644,7 @@ positioned instead.
 {{{
  #!ruby
  Shoes.app do
-   flow :margin => 12 do
+   flow margin: 12 do
      # Set up three buttons
      button "One"
      @two = button "Two"
@@ -2694,7 +2688,7 @@ original setting (things like "100%" for width or "10px" for top.)
  #!ruby
  Shoes.app do
    # A button which take up the whole page
-   @b = button "All of it", :width => 1.0, :height => 1.0
+   @b = button "All of it", width: 1.0, height: 1.0
 
    # When clicked, show the styles
    @b.click { alert(@b.style.inspect) }
@@ -2729,8 +2723,8 @@ a stack which is 120 pixels wide, you'll get back `120`.  However, if you call
 {{{
  #!ruby
  Shoes.app do
-   stack :width => 120 do
-     @b = button "Click me", :width => "100%" do
+   stack width: 120 do
+     @b = button "Click me", width: "100%" do
        alert "button.width = #{@b.width}\n" +
          "button.style[:width] = #{@b.style[:width]}"
      end
@@ -2739,17 +2733,16 @@ a stack which is 120 pixels wide, you'll get back `120`.  However, if you call
 }}}
 
 In order to set the width, you'll have to go through the [[Common.style]]
-method again.  So, to set the button to 150 pixels wide: `@b.style(:width =>
-150)`.
+method again.  So, to set the button to 150 pixels wide: `@b.style(width: 150)`.
 
-To let Shoes pick the element's width, go with `@b.style(:width => nil)` to
+To let Shoes pick the element's width, go with `@b.style(width: nil)` to
 empty out the setting.
 
 == Background ==
 
 A background is a color, a gradient or an image that is painted across an
 entire slot.  Both backgrounds and borders are a type of Shoes::Pattern.
-!{:margin_left => 100}man-ele-background.png!
+!{margin_left: 100}man-ele-background.png!
 
 Even though it's called a ''background'', you may still place this element in
 front of other elements.  If a background comes after something else painted on
@@ -2776,7 +2769,7 @@ To paint a black background across the top fifty pixels of the window:
 {{{
  #!ruby
  Shoes.app do
-   background black, :height => 50
+   background black, height: 50
  end
 }}}
 
@@ -2785,7 +2778,7 @@ Or, to paint a fifty pixel column on the right-side of the window:
 {{{
  #!ruby
  Shoes.app do
-   background black, :width => 50, :right => 50
+   background black, width: 50, right: 50
  end
 }}}
 
@@ -2802,7 +2795,7 @@ backgrounds and borders.  Reuse it as you like.
 
 A border is a color, gradient or image painted in a line around the edge of any
 slot.  Like the Background element in the last section, a Border is a kind of
-Shoes::Pattern. !{:margin_left => 100}man-ele-border.png!
+Shoes::Pattern. !{margin_left: 100}man-ele-border.png!
 
 The first, crucial thing to know about border is that all borders paint a line
 around the '''inside''' of a slot, not the outside.  So, if you have a slot
@@ -2818,9 +2811,9 @@ Here is just such a slot:
 {{{
  #!ruby
  Shoes.app do
-   stack :width => 50 do
-     border black, :strokewidth => 5
-     para "=^.^=", :stroke => green
+   stack width: 50 do
+     border black, strokewidth: 5
+     para "=^.^=", stroke: green
    end
  end
 }}}
@@ -2831,10 +2824,10 @@ that slot in another slot.  Then, place the border in the outside slot.
 {{{
  #!ruby
  Shoes.app do
-   stack :width => 60 do
-     border black, :strokewidth => 5
-     stack :width => 50 do
-       para "=^.^=", :stroke => green
+   stack width: 60 do
+     border black, strokewidth: 5
+     stack width: 50 do
+       para "=^.^=", stroke: green
      end
    end
  end
@@ -2857,7 +2850,7 @@ backgrounds.
 
 Buttons are, you know, push buttons.  You click them and they do something.
 Buttons are known to say "OK" or "Are you sure?"  And, then, if you're sure,
-you click the button. !{:margin_left => 100}man-ele-button.png!
+you click the button. !{margin_left: 100}man-ele-button.png!
 
 {{{
  #!ruby
@@ -2925,7 +2918,7 @@ hits Enter, the button will be clicked.
 
 Check boxes are clickable square boxes than can be either checked or unchecked.
 A single checkbox usually asks a "yes" or "no" question.  Sets of checkboxes
-are also seen in to-do lists. !{:margin_left => 100}man-ele-check.png!
+are also seen in to-do lists. !{margin_left: 100}man-ele-check.png!
 
 Here's a sample checklist.
 
@@ -2997,7 +2990,7 @@ Enter, the check will be toggled between its checked and unchecked states.
 
 Edit boxes are wide, rectangular boxes for entering text.  On the web, they
 call these textareas.  These are multi-line edit boxes for entering longer
-descriptions.  Essays, even! !{:margin_left => 100}man-ele-editbox.png!
+descriptions.  Essays, even! !{margin_left: 100}man-ele-editbox.png!
 
 Without any other styling, edit boxes are sized 200 pixels by 108 pixels.  You
 can also use `:width` and `:height` styles to set specific sizes.
@@ -3006,7 +2999,7 @@ can also use `:width` and `:height` styles to set specific sizes.
  #!ruby
  Shoes.app do
    edit_box
-   edit_box :width => 100, :height => 100
+   edit_box width: 100, height: 100
  end
 }}}
 
@@ -3054,7 +3047,7 @@ Fills the edit box with the characters of `a string`.
 
 Edit lines are a slender, little box for entering text. While the EditBox is
 multi-line, an edit line is just one. Line, that is. Horizontal, in fact.
-!{:margin_left => 100}man-ele-editline.png!
+!{margin_left: 100}man-ele-editline.png!
 
 The unstyled edit line is 200 pixels wide and 28 pixels wide. Roughly. The
 height may vary on some platforms.
@@ -3064,7 +3057,7 @@ height may vary on some platforms.
  Shoes.app do
    stack do
      edit_line
-     edit_line :width => 400
+     edit_line width: 400
    end
  end
 }}}
@@ -3102,7 +3095,7 @@ Fills the edit line with the characters of `a string`.
 
 An image is a picture in PNG, JPEG or GIF format. Shoes can resize images or
 flow them in with text. Images can be loaded from a file or directly off the
-web. !{:margin_left => 100}man-ele-image.png!
+web. !{margin_left: 100}man-ele-image.png!
 
 To create an image, use the `image` method in a slot:
 
@@ -3163,7 +3156,7 @@ Swaps the image with a different one, loaded from a file or URL.
 
 List boxes (also called "combo boxes" or "drop-down boxes" or "select boxes" in
 some places) are a list of options that drop down when you click on the box.
-!{:margin_left => 100}man-ele-listbox.png!
+!{margin_left: 100}man-ele-listbox.png!
 
 A list box gets its options from an array.  An array (a list) of strings,
 passed into the `:items` style.
@@ -3172,7 +3165,7 @@ passed into the `:items` style.
  #!ruby
  Shoes.app do
    para "Choose a fruit:"
-   list_box :items => ["Grapes", "Pears", "Apricots"]
+   list_box items: ["Grapes", "Pears", "Apricots"]
  end
 }}}
 
@@ -3183,8 +3176,8 @@ You can adjust this length using the `:width` style.
  #!ruby
  Shoes.app do
    para "Choose a fruit:"
-   list_box :items => ["Grapes", "Pears", "Apricots"],
-     :width => 120, :choose => "Apricots" do |list|
+   list_box items: ["Grapes", "Pears", "Apricots"],
+     width: 120, choose: "Apricots" do |list|
        @fruit.text = list.text
    end
 
@@ -3236,17 +3229,16 @@ now. If nothing is selected, `nil` will be the reply.
 
 Progress bars show you how far along you are in an activity. Usually, a
 progress bar represents a percentage (from 0% to 100%.) Shoes thinks of
-progress in terms of the decimal numbers 0.0 to 1.0. !{:margin_left =>
-100}man-ele-progress.png!
+progress in terms of the decimal numbers 0.0 to 1.0. !{margin_left: 100}man-ele-progress.png!
 
 A simple progress bar is 200 pixels wide, but you can use the `:width` style
 (as with all Shoes elements) to lengthen it.
 
 {{{
  Shoes.app do
-   stack :margin => 0.1 do
+   stack margin: 0.1 do
      title "Progress example"
-     @p = progress :width => 1.0
+     @p = progress width: 1.0
 
      animate do |i|
        @p.fraction = (i % 100) / 100.0
@@ -3270,8 +3262,7 @@ Sets the progress to a decimal number between 0.0 and 1.0.
 
 Radio buttons are a group of clickable circles. Click a circle and it'll be
 marked. Only one radio button can be marked at a time. (This is similar to the
-ListBox, where only one option can be selected at a time.) !{:margin_left =>
-100}man-ele-radio.png!
+ListBox, where only one option can be selected at a time.) !{margin_left: 100}man-ele-radio.png!
 
 So, how do you decide when to use radio buttons and when to use list boxes?
 Well, list boxes only show one highlighted item unless you click on the box and
@@ -3359,7 +3350,7 @@ Enter, the radio will be toggled between its marked and unmarked states.
 == Shape ==
 
 A shape is a path outline usually created by drawing methods like `oval` and
-`rect`. !{:margin_left => 100}man-ele-shape.png!
+`rect`. !{margin_left: 100}man-ele-shape.png!
 
 See the [[Common]] methods page.  Shapes respond to all of those methods.
 
@@ -3368,7 +3359,7 @@ See the [[Common]] methods page.  Shapes respond to all of those methods.
 The TextBlock object represents a group of text organized as a single element.
 A paragraph containing bolded text, for example. A caption containing links and
 bolded text. (So, a `caption` is a TextBlock type.  However, `link` and
-`strong` are TextClass types.) !{:margin_left => 100}man-ele-textblock.png!
+`strong` are TextClass types.) !{margin_left: 100}man-ele-textblock.png!
 
 All of the various types of TextBlock are found on the [[Element Element
 Creation]] page.
@@ -3435,7 +3426,7 @@ already running, it is stopped.
 Shoes supports embedding of QuickTime, Flash video (FLV), DivX, Xvid and
 various other popular video formats. This is all thanks to VideoLAN and ffmpeg,
 two sensational open source libraries. Use the `video` method on a slot to
-setup a Shoes::Video object. !{:margin_left => 100}man-ele-video.png!
+setup a Shoes::Video object. !{margin_left: 100}man-ele-video.png!
 
 In addition to video formats, some audio formats are also supported, such as
 MP3, WAV and Ogg Vorbis.
@@ -3528,4 +3519,4 @@ Hope this helps:
 
  * You can join [[http://librelist.com/browser/shoes/ Shoes ML]] and feel free ask your questions. 
  * [[http://github.com/shoes/shoes/ Official Current Source Code]] is on GitHub.
- * [[http://github.com/shoes/shoes/downloads Recent Builds]] for your platform.
+ * [[https://github.com/shoes/shoes/wiki Wiki]] for Shoes general info.