static/manual-en.txt in green_shoes-0.189.0 vs static/manual-en.txt in green_shoes-0.198.0
- old
+ new
@@ -7,11 +7,11 @@
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.
@@ -352,11 +352,11 @@
On 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}"
end
end
@@ -486,11 +486,12 @@
So, a good Japanese font on OS X is '''AppleGothic''' and on Windows is '''MS
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"
end
end
@@ -804,11 +805,12 @@
the same as `green..red` for example. Also possible to use different kind of args
like this: `gradient(green, '#FA3')`
{{{
Shoes.app do
- oval 100, 100, 100, fill: gradient(green, '#FA3'), angle: 45
+ oval 100, 100, 100,
+ fill: gradient(green, '#FA3'), angle: 45
end
}}}
=== gray(the numbers: darkness, alpha) » a RGB array ===
@@ -835,21 +837,23 @@
{{{
Shoes.app do
blueviolet = rgb(138, 43, 226, 0.5)
darkgreen = rgb(0, 100, 0, 0.5)
- oval 100, 100, 100, fill: [blueviolet, darkgreen].sample(1)
+ oval 100, 100, 100,
+ fill: [blueviolet, darkgreen].sample(1)
end
}}}
Or, use a decimal number from 0.0 to 1.0.
{{{
Shoes.app do
blueviolet = rgb(0.54, 0.17, 0.89)
darkgreen = rgb(0, 0.4, 0)
- oval 100, 100, 100, fill: [blueviolet, darkgreen].sample(1)
+ oval 100, 100, 100,
+ fill: [blueviolet, darkgreen].sample(1)
end
}}}
== The App Object ==
@@ -871,14 +875,15 @@
elements (buttons, artwork, etc.) and, outside the block, you use the `styles` to
describe how big the window is. Perhaps also the name of the app.
{{{
#!ruby
- Shoes.app title: "White Circle", width: 200, height: 200 do
- background black
- fill white
- oval top: 20, left: 20, radius: 160
+ Shoes.app title: "White Circle",
+ width: 200, height: 200 do
+ background black
+ fill white
+ oval top: 20, left: 20, radius: 160
end
}}}
In the case above, a small window is built. 200 pixels by 200 pixels.
And, inside the window, two elements: a black background and a
@@ -916,20 +921,20 @@
Closes the app window. If multiple windows are open and you want to close the
entire application, use the built-in method `exit`.
{{{
Shoes.app do
- para 'hello'
- button 'spawn' do
- Shoes.app do
- para 'hello'
- button('close: close this window only'){close}
- button('exit: quit Green Shoes'){exit}
- end
+ para 'hello'
+ button 'spawn' do
+ Shoes.app do
+ para 'hello'
+ button('close: close this window only'){close}
+ button('exit: quit Green Shoes'){exit}
end
- button('close: close this window only'){close}
- button('exit: quit Green Shoes'){exit}
+ end
+ button('close: close this window only'){close}
+ button('exit: quit Green Shoes'){exit}
end
}}}
=== download(url: a string, styles) ===
@@ -945,12 +950,11 @@
Shoes.app do
stack do
title "Searching Google", size: 16
@status = para "One moment..."
- # Search Google for 'shoes' and print the HTTP headers
- download "http://www.google.com/search?q=shoes" do |goog|
+ download "http://is.gd/bXTVY7" do |goog|
@status.text = "Headers: #{goog.meta}"
end
end
end
}}}
@@ -965,11 +969,11 @@
Shoes.app do
stack do
title "Downloading Google image", size: 16
@status = para "One moment..."
- download "http://www.google.com/logos/nasa50th.gif",
+ download "http://is.gd/GVAGF7",
:save => "nasa50th.gif" do
@status.text = "Okay, is downloaded."
image "nasa50th.gif", top: 100
end
end
@@ -987,11 +991,11 @@
Shoes.app do
stack do
title "GET Google", size: 16
@status = para "One moment..."
- download "http://www.google.com/search?q=shoes",
+ download "http://is.gd/bXTVY7",
:method => "GET" do |dump|
@status.text = dump.response.body
end
end
end
@@ -1000,10 +1004,30 @@
As you can see from the above example, Shoes makes use of the "GET" method to
query google's search engine.
'''Note:''' Green Shoes doesn't support the `:method`, `:headers` and `:body` styles.
+{{{
+ include Hpricot
+ Shoes.app do
+ status = para "One moment..."
+ download 'http://is.gd/BatiRt' do |dl|
+ samples = []
+ Hpricot(dl).inner_text.each_line do |line|
+ samples.push($1) if line =~ /(sample.*\.rb)/
+ end
+ status.text = samples.join(', ')
+ flush
+ end
+ end
+}}}
+
+As you can see from the above example, Green Shoes includes the Hpricot
+library for parsing HTML.
+
+'''Note''': Windows platform only so far.
+
=== location() » a string ===
Gets a string containing the URL of the current app.
'''Note:''' Green Shoes doesn't support location method so far.
@@ -1070,13 +1094,16 @@
'''Note:''' Green Shoes can change style hash on Shape element only so far.
{{{
Shoes.app title: "A Styling Sample" do
- choose = lambda{[red, blue, green, yellow].sample}
+ choose =
+ lambda{[red, blue, green, yellow].sample}
s = star 100, 50, 30, 200, 180, strokewidth: 5
- button('change colors'){s.style stroke: choose.call, fill: choose.call}
+ button 'change colors' do
+ s.style stroke: choose.call, fill: choose.call
+ end
end
}}}
Most styles can also be set by calling them as methods. (I'd use the manual
search to find the method.)
@@ -1084,13 +1111,16 @@
'''Note:''' Green Shoes doesn't support them as methods.
{{{
# Not yet available
Shoes.app title: "A Styling Sample" do
- choose = lambda{[red, blue, green, yellow].sample}
+ choose =
+ lambda{[red, blue, green, yellow].sample}
s = star 100, 50, 30, 200, 180, strokewidth: 5
- button('change colors'){s.stroke = choose.call; s.fill = choose.call}
+ button 'change colors' do
+ s.stroke = choose.call; s.fill = choose.call
+ end
end
}}}
Rather than making you plow through the whole manual to figure out what styles
go where, this helpful page speeds through every style in Green Shoes and suggests
@@ -1759,21 +1789,26 @@
cap :curve
a = animate 12 do |i|
@e.remove if @e
r = i * (Math::PI * 0.01)
- @e = arc 100, 50, 180, 360, 0, i * (Math::PI * 0.01)
+ @e = arc 100, 50, 180, 360, 0, r
a.stop if r >= 2*Math::PI
end
end
}}}
=== arrow(left, top, width) » Shoes::Shape ===
Draws an arrow at coordinates (left, top) with a pixel `width`.
-'''Note:''' Green Shoes doesn't support `arrow` method.
+{{{
+ Shoes.app do
+ para 'An arrow shape:', left: 20, top: 10
+ arrow 30, 40, 70
+ end
+}}}
=== cap(:curve or :rect or :project) » self ===
Sets the line cap, which is the shape at the end of every line you draw. If
set to `:curve`, the end is rounded. The default is `:rect`, a line which ends
@@ -2101,11 +2136,12 @@
{{{
#!ruby
Shoes.app do
edit_box
edit_box text: "HORRAY EDIT ME"
- edit_box text: "small one", width: 100, height: 160
+ edit_box text: "small one",
+ width: 100, height: 160
end
}}}
=== edit_line(text) » Shoes::EditLine ===
@@ -2179,17 +2215,17 @@
box becomes selected by the user.
{{{
#!ruby
Shoes.app do
- stack margin: 10 do
- para "Pick a card:"
- list_box items: ["Jack", "Ace", "Joker"] do |item|
- @p.text = "#{item} was picked!"
- end
- @p = para
+ stack margin: 10 do
+ para "Pick a card:"
+ list_box items: ["Jac", "Ace", "Jok"] do |item|
+ @p.text = "#{item} was picked!"
end
+ @p = para
+ end
end
}}}
Call `ListBox#text` to get the selected string. See the `ListBox` section
under `Native` controls for more help.
@@ -2315,11 +2351,11 @@
Shoes.app do
s = stack width: 200, height: 200 do
background red
end
s.hover do
- s.clear { background blue }
+ s.clear { background blue }
end
s.leave do
s.clear { background red }
end
end
@@ -2433,11 +2469,12 @@
Shoes.app do
@slot = stack { para 'Good Morning' }
timer 3 do
@slot.append do
title "Breaking News"
- tagline "Astronauts arrested for space shuttle DUI."
+ tagline "Astronauts ",
+ "arrested for space shuttle DUI."
end
end
end
}}}
@@ -2539,11 +2576,12 @@
{{{
#!ruby
# Not yet available
Shoes.app do
stack :margin_right => 20 + gutter do
- para "Insert fat and ratified declaration of independence here..."
+ para "Insert fat and ratified ",
+ "declaration of independence here..."
end
end
}}}
'''Note:''' Green Shoes doesn't support `gutter` method.
@@ -2738,17 +2776,19 @@
{{{
#!ruby
Shoes.app do
stack do
- # Background, text and a button: both are elements!
+ # Background, text and a button:
+ # both are elements!
@back = background green
@text = banner "A Message for You, Rudy"
@press = button "Stop your messin about!"
# And so, both can be styled.
- @text.style size: 12, markup: fg(@text.text, red), margin: 10
+ @text.style size: 12,
+ markup: fg(@text.text, red), margin: 10
@press.style width: 400
@back.style height: 10
end
end
}}}
@@ -2871,11 +2911,12 @@
{{{
#!ruby
Shoes.app do
# A button which take up the whole page
- @b = button "All of it", width: width, height: height
+ @b = button "All of it",
+ width: width, height: height
# When clicked, show the styles
@b.click { alert(@b.style.inspect) }
end
}}}
@@ -2909,11 +2950,12 @@
#!ruby
Shoes.app do
stack width: 120 do
@b = button "Click me", width: 1.0 do
alert "button.width = #{@b.width}\n" +
- "button.style[:width] = #{@b.style[:width]}"
+ "button.style[:width] = " +
+ "#{@b.style[:width]}"
end
end
end
}}}
@@ -3070,13 +3112,13 @@
{{{
#!ruby
Shoes.app do
@b1 = button "OK!"
- @b1.click { para "Well okay then." }
+ @b1.click{para "Well okay then."}
@b2 = button "Are you sure?"
- @b2.click { para "Your confidence is inspiring." }
+ @b2.click{para "Your confidence is inspiring."}
end
}}}
This looks dramatically different, but it does the same thing. The first
difference: rather than attaching the block directly to the button, the block
@@ -3112,13 +3154,20 @@
{{{
#!ruby
Shoes.app do
stack do
- flow { check; para "Frances Johnson", width: 200 }
- flow { check; para "Ignatius J. Reilly", width: 200 }
- flow { check; para "Winston Niles Rumfoord", width: 200 }
+ flow do
+ check; para "Frances Johnson", width: 200
+ end
+ flow do
+ check; para "Ignatius J. Reilly", width: 200
+ end
+ flow do
+ check
+ para "Winston Niles Rumfoord", width: 200
+ end
end
end
}}}
You basically have two ways to use a check. You can attach a block to the
@@ -3138,11 +3187,12 @@
flow { @c = check; para name, width: 200 }
[@c, name]
end
button "What's been checked?" do
- selected = @list.map { |c, name| name if c.checked? }.compact
+ selected =
+ @list.map{|c, n| n if c.checked?}.compact
alert("You selected: " + selected.join(', '))
end
end
end
}}}
@@ -3199,11 +3249,12 @@
{{{
#!ruby
Shoes.app do
edit_box do |e|
- @counter.text = strong("#{e.text.size}") + " characters"
+ @counter.text =
+ strong("#{e.text.size}") + " characters"
end
@counter = para strong("0"), " characters"
end
}}}
@@ -3307,11 +3358,11 @@
You can use web URLs directly as well.
{{{
#!ruby
Shoes.app do
- image "http://hacketyhack.heroku.com/images/logo.png"
+ image "http://is.gd/c0mBtb"
end
}}}
When an image is loaded from the web, it's cached on the hard drive as well as
in memory. This prevents a repeat download unless the image has changed. (In
@@ -3439,11 +3490,11 @@
'''Note:''' The minimum size is 150 pixels wide in Green Shoes.
{{{
Shoes.app do
title "Progress example"
- @p = progress left: 10, top: 100, width: width - 20
+ @p = progress left: 10, top: 100, width: width-20
animate do |i|
@p.fraction = (i % 100) / 100.0
end
end
@@ -3474,13 +3525,19 @@
{{{
#!ruby
Shoes.app do
para "Among these films, which do you prefer?\n"
- radio; para strong("The Taste of Tea"), " by Katsuhito Ishii\n", width: 570
- radio; para strong("Kin-Dza-Dza"), " by Georgi Danelia\n", width: 570
- radio; para strong("Children of Heaven"), " by Majid Majidi\n", width: 570
+ radio
+ para strong("The Taste of Tea"),
+ " by Katsuhito Ishii\n", width: 570
+ radio
+ para strong("Kin-Dza-Dza"),
+ " by Georgi Danelia\n", width: 570
+ radio
+ para strong("Children of Heaven"),
+ " by Majid Majidi\n", width: 570
end
}}}
Only one of these three radios can be checked at a time, since they are grouped
together in the same slot (along with a bunch of `para`.)
@@ -3490,13 +3547,25 @@
{{{
#!ruby
Shoes.app do
stack do
para "Among these films, which do you prefer?"
- flow { radio; para "The Taste of Tea by Katsuhito Ishii", width: 300 }
- flow { radio; para "Kin-Dza-Dza by Georgi Danelia", width: 300 }
- flow { radio; para "Children of Heaven by Majid Majidi", width: 300 }
+ flow do
+ radio
+ para "The Taste of Tea by Katsuhito Ishii",
+ width: 300
+ end
+ flow do
+ radio
+ para "Kin-Dza-Dza by Georgi Danelia",
+ width: 300
+ end
+ flow do
+ radio
+ para "Children of Heaven by Majid Majidi",
+ width: 300
+ end
end
end
}}}
This can be fixed, though. You can group together radios from different slots,
@@ -3509,18 +3578,21 @@
Shoes.app do
stack do
para "Among these films, which do you prefer?"
flow do
radio :films
- para "The Taste of Tea by Katsuhito Ishii", width: 300
+ para "The Taste of Tea by Katsuhito Ishii",
+ width: 300
end
flow do
radio :films
- para "Kin-Dza-Dza by Georgi Danelia", width: 300
+ para "Kin-Dza-Dza by Georgi Danelia",
+ width: 300
end
flow do
radio :films
- para "Children of Heaven by Majid Majidi", width: 300
+ para "Children of Heaven by Majid Majidi",
+ width: 300
end
end
end
}}}