green_shoes 0.164.0 → 0.171.0
Sign up to get free protection for your applications and to get access to all the features.
- data/VERSION +1 -1
- data/lib/green_shoes.rb +1 -0
- data/lib/shoes/app.rb +22 -19
- data/lib/shoes/basic.rb +3 -39
- data/lib/shoes/helper_methods.rb +34 -7
- data/lib/shoes/slot.rb +25 -2
- data/lib/shoes/style.rb +56 -0
- data/samples/sample12.rb +1 -1
- data/samples/sample49.rb +33 -0
- data/snapshots/sample49.png +0 -0
- data/static/manual-en.txt +166 -122
- metadata +6 -3
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.171.0
|
data/lib/green_shoes.rb
CHANGED
@@ -37,6 +37,7 @@ require_relative 'shoes/text'
|
|
37
37
|
require_relative 'shoes/mask'
|
38
38
|
require_relative 'shoes/widget'
|
39
39
|
require_relative 'shoes/url'
|
40
|
+
require_relative 'shoes/style'
|
40
41
|
require_relative 'shoes/projector'
|
41
42
|
require_relative 'shoes/download'
|
42
43
|
require_relative 'shoes/manual'
|
data/lib/shoes/app.rb
CHANGED
@@ -7,7 +7,15 @@ class Shoes
|
|
7
7
|
args.each do |k, v|
|
8
8
|
instance_variable_set "@#{k}", v
|
9
9
|
end
|
10
|
-
|
10
|
+
|
11
|
+
win_title = @owner.instance_variable_get('@title')
|
12
|
+
class << @owner; self end.
|
13
|
+
class_eval do
|
14
|
+
define_method :to_s do
|
15
|
+
win_title or 'green shoes'
|
16
|
+
end
|
17
|
+
end if @owner
|
18
|
+
|
11
19
|
App.class_eval do
|
12
20
|
attr_accessor *(args.keys - [:width, :height, :title])
|
13
21
|
end
|
@@ -24,7 +32,7 @@ class Shoes
|
|
24
32
|
attr_accessor :cslot, :cmask, :top_slot, :contents, :canvas, :app, :mccs, :mrcs, :mmcs,
|
25
33
|
:mhcs, :mlcs, :shcs, :mcs, :win, :swin, :width_pre, :height_pre, :order, :dics
|
26
34
|
attr_writer :mouse_button, :mouse_pos
|
27
|
-
attr_reader :link_style, :linkhover_style, :animates
|
35
|
+
attr_reader :link_style, :linkhover_style, :animates, :owner
|
28
36
|
|
29
37
|
def visit url
|
30
38
|
if url =~ /^(http|https):\/\//
|
@@ -62,22 +70,6 @@ class Shoes
|
|
62
70
|
@top_slot.clear &blk
|
63
71
|
end
|
64
72
|
|
65
|
-
def style klass, args={}
|
66
|
-
if klass == Shoes::Link
|
67
|
-
@link_style = LINK_DEFAULT
|
68
|
-
@link_style.sub!('single', 'none') if args[:underline] == false
|
69
|
-
@link_style.sub!("foreground='#06E'", "foreground='#{args[:stroke]}'") if args[:stroke]
|
70
|
-
@link_style.sub!('>', " background='#{args[:fill]}'>") if args[:fill]
|
71
|
-
@link_style.sub!('normal', "#{args[:weight]}") if args[:weight]
|
72
|
-
elsif klass == Shoes::LinkHover
|
73
|
-
@linkhover_style = LINKHOVER_DEFAULT
|
74
|
-
@linkhover_style.sub!('single', 'none') if args[:underline] == false
|
75
|
-
@linkhover_style.sub!("foreground='#039'", "foreground='#{args[:stroke]}'") if args[:stroke]
|
76
|
-
@linkhover_style.sub!('>', " background='#{args[:fill]}'>") if args[:fill]
|
77
|
-
@linkhover_style.sub!('normal', "#{args[:weight]}") if args[:weight]
|
78
|
-
end
|
79
|
-
end
|
80
|
-
|
81
73
|
def textblock klass, font_size, *msg
|
82
74
|
args = msg.last.class == Hash ? msg.pop : {}
|
83
75
|
args = basic_attributes args
|
@@ -477,7 +469,9 @@ class Shoes
|
|
477
469
|
klass.new args
|
478
470
|
end
|
479
471
|
|
480
|
-
def shape args, &blk
|
472
|
+
def shape args={}, &blk
|
473
|
+
args[:left] ||= 0
|
474
|
+
args[:top] ||= 0
|
481
475
|
args[:block] = blk
|
482
476
|
shapebase Shape, args
|
483
477
|
end
|
@@ -647,5 +641,14 @@ class Shoes
|
|
647
641
|
Shoes.APPS.delete app
|
648
642
|
exit if Shoes.APPS.empty?
|
649
643
|
end
|
644
|
+
|
645
|
+
def window args={}, &blk
|
646
|
+
args.merge! owner: self
|
647
|
+
Shoes.app args, &blk
|
648
|
+
end
|
649
|
+
|
650
|
+
def flush
|
651
|
+
Shoes.call_back_procs self
|
652
|
+
end
|
650
653
|
end
|
651
654
|
end
|
data/lib/shoes/basic.rb
CHANGED
@@ -28,8 +28,8 @@ class Shoes
|
|
28
28
|
@hided, @shows, @hovered = false, true, false
|
29
29
|
end
|
30
30
|
|
31
|
-
attr_reader :parent,
|
32
|
-
attr_accessor :hided
|
31
|
+
attr_reader :parent, :args, :shows, :initials
|
32
|
+
attr_accessor :hided
|
33
33
|
|
34
34
|
def move x, y
|
35
35
|
@app.cslot.contents -= [self]
|
@@ -122,35 +122,6 @@ class Shoes
|
|
122
122
|
move @left, @top
|
123
123
|
end
|
124
124
|
end
|
125
|
-
|
126
|
-
def click &blk
|
127
|
-
@click_proc = blk
|
128
|
-
@app.mccs << self
|
129
|
-
end
|
130
|
-
|
131
|
-
def release &blk
|
132
|
-
@release_proc = blk
|
133
|
-
@app.mrcs << self
|
134
|
-
end
|
135
|
-
|
136
|
-
def hover &blk
|
137
|
-
@hover_proc = blk
|
138
|
-
(@app.mhcs << self) unless @app.mhcs.include? self
|
139
|
-
end
|
140
|
-
|
141
|
-
def leave &blk
|
142
|
-
@leave_proc = blk
|
143
|
-
(@app.mhcs << self) unless @app.mhcs.include? self
|
144
|
-
end
|
145
|
-
|
146
|
-
def style args
|
147
|
-
clear
|
148
|
-
@args[:nocontrol] = @args[:noorder] = true
|
149
|
-
m = self.class.to_s.downcase[7..-1]
|
150
|
-
args = @args.merge args
|
151
|
-
blk = args[:block]
|
152
|
-
@real = @app.send(m, args, &blk).real
|
153
|
-
end
|
154
125
|
end
|
155
126
|
|
156
127
|
class Image < Basic; end
|
@@ -207,14 +178,7 @@ class Shoes
|
|
207
178
|
end
|
208
179
|
|
209
180
|
def text= s
|
210
|
-
|
211
|
-
@width = (@left + parent.width <= @app.width) ? parent.width : @app.width - @left
|
212
|
-
@width = initials[:width] unless initials[:width].zero?
|
213
|
-
@height = 20 if @height.zero?
|
214
|
-
m = self.class.to_s.downcase[7..-1]
|
215
|
-
args = [s, @args.merge({left: @left, top: @top, width: @width, height: @height, create_real: true, nocontrol: true})]
|
216
|
-
tb = @app.send(m, *args)
|
217
|
-
@real, @height, @args[:markup] = tb.real, tb.height, tb.markup
|
181
|
+
style markup: s
|
218
182
|
end
|
219
183
|
|
220
184
|
alias :replace :text=
|
data/lib/shoes/helper_methods.rb
CHANGED
@@ -10,7 +10,28 @@ class Shoes
|
|
10
10
|
@margin_bottom ||= margin_bottom
|
11
11
|
end
|
12
12
|
|
13
|
-
|
13
|
+
def click &blk
|
14
|
+
@click_proc = blk
|
15
|
+
@app.mccs << self
|
16
|
+
end
|
17
|
+
|
18
|
+
def release &blk
|
19
|
+
@release_proc = blk
|
20
|
+
@app.mrcs << self
|
21
|
+
end
|
22
|
+
|
23
|
+
def hover &blk
|
24
|
+
@hover_proc = blk
|
25
|
+
(@app.mhcs << self) unless @app.mhcs.include? self
|
26
|
+
end
|
27
|
+
|
28
|
+
def leave &blk
|
29
|
+
@leave_proc = blk
|
30
|
+
(@app.mhcs << self) unless @app.mhcs.include? self
|
31
|
+
end
|
32
|
+
|
33
|
+
attr_reader :margin_left, :margin_top, :margin_right, :margin_bottom, :click_proc, :release_proc, :hover_proc, :leave_proc
|
34
|
+
attr_accessor :hovered
|
14
35
|
end
|
15
36
|
|
16
37
|
module Mod2
|
@@ -137,13 +158,13 @@ class Shoes
|
|
137
158
|
|
138
159
|
def self.mouse_click_control app
|
139
160
|
app.mccs.each do |e|
|
140
|
-
e.click_proc.
|
161
|
+
e.click_proc[*app.mouse] if mouse_on? e
|
141
162
|
end
|
142
163
|
end
|
143
164
|
|
144
165
|
def self.mouse_release_control app
|
145
166
|
app.mrcs.each do |e|
|
146
|
-
e.release_proc.
|
167
|
+
e.release_proc[*app.mouse] if mouse_on? e
|
147
168
|
end
|
148
169
|
end
|
149
170
|
|
@@ -157,7 +178,7 @@ class Shoes
|
|
157
178
|
app.mhcs.each do |e|
|
158
179
|
if mouse_on?(e) and !e.hovered
|
159
180
|
e.hovered = true
|
160
|
-
e.hover_proc
|
181
|
+
e.hover_proc[e] if e.hover_proc
|
161
182
|
end
|
162
183
|
end
|
163
184
|
end
|
@@ -166,7 +187,7 @@ class Shoes
|
|
166
187
|
app.mhcs.each do |e|
|
167
188
|
if !mouse_on?(e) and e.hovered
|
168
189
|
e.hovered = false
|
169
|
-
e.leave_proc
|
190
|
+
e.leave_proc[e] if e.leave_proc
|
170
191
|
end
|
171
192
|
end
|
172
193
|
end
|
@@ -180,6 +201,7 @@ class Shoes
|
|
180
201
|
|
181
202
|
def self.set_cursor_type app
|
182
203
|
app.mccs.each do |e|
|
204
|
+
next if e.is_a? Slot
|
183
205
|
e.real.window.cursor = ARROW if e.real.window
|
184
206
|
(e.real.window.cursor = HAND; return) if mouse_on? e
|
185
207
|
end
|
@@ -207,8 +229,13 @@ class Shoes
|
|
207
229
|
end
|
208
230
|
|
209
231
|
def self.mouse_on? e
|
210
|
-
|
211
|
-
|
232
|
+
if e.is_a? Slot
|
233
|
+
mouse_x, mouse_y = e.app.win.pointer
|
234
|
+
(e.left..e.left+e.width).include?(mouse_x) and (e.top..e.top+e.height).include?(mouse_y)
|
235
|
+
else
|
236
|
+
mouse_x, mouse_y = e.real.pointer
|
237
|
+
(0..e.width).include?(mouse_x) and (0..e.height).include?(mouse_y)
|
238
|
+
end
|
212
239
|
end
|
213
240
|
|
214
241
|
def self.mouse_on_link tb, app
|
data/lib/shoes/slot.rb
CHANGED
@@ -14,7 +14,7 @@ class Shoes
|
|
14
14
|
set_margin
|
15
15
|
|
16
16
|
@radio_group = Gtk::RadioButton.new
|
17
|
-
@masked = false
|
17
|
+
@masked = @hovered = false
|
18
18
|
@parent = @app.cslot
|
19
19
|
@app.cslot = self
|
20
20
|
@contents = []
|
@@ -70,13 +70,36 @@ class Shoes
|
|
70
70
|
if blk
|
71
71
|
args = {}
|
72
72
|
initials.keys.each{|k| args[k] = instance_variable_get "@#{k}"}
|
73
|
-
|
73
|
+
args[:nocontrol] = true
|
74
74
|
tmp = self.is_a?(Stack) ? Stack.new(@app.slot_attributes(args), &blk) : Flow.new(@app.slot_attributes(args), &blk)
|
75
75
|
self.contents = tmp.contents
|
76
76
|
Shoes.call_back_procs @app
|
77
77
|
Shoes.set_cursor_type @app
|
78
78
|
end
|
79
79
|
end
|
80
|
+
|
81
|
+
def append &blk
|
82
|
+
prepend contents.length, &blk
|
83
|
+
end
|
84
|
+
|
85
|
+
def prepend n = 0
|
86
|
+
self.contents, tmp = contents[0...n], contents[n..-1]
|
87
|
+
cslot, @app.cslot = @app.cslot, self
|
88
|
+
yield
|
89
|
+
self.contents += tmp
|
90
|
+
@app.cslot = cslot
|
91
|
+
Shoes.call_back_procs @app
|
92
|
+
end
|
93
|
+
|
94
|
+
def before e, &blk
|
95
|
+
prepend contents.index(e).to_i, &blk
|
96
|
+
end
|
97
|
+
|
98
|
+
def after e, &blk
|
99
|
+
n = contents.index e
|
100
|
+
n = n ? n+1 : contents.length
|
101
|
+
prepend n, &blk
|
102
|
+
end
|
80
103
|
end
|
81
104
|
|
82
105
|
class Stack < Slot; end
|
data/lib/shoes/style.rb
ADDED
@@ -0,0 +1,56 @@
|
|
1
|
+
class Shoes
|
2
|
+
class App
|
3
|
+
def style klass, args={}
|
4
|
+
if klass == Shoes::Link
|
5
|
+
@link_style = LINK_DEFAULT
|
6
|
+
@link_style.sub!('single', 'none') if args[:underline] == false
|
7
|
+
@link_style.sub!("foreground='#06E'", "foreground='#{args[:stroke]}'") if args[:stroke]
|
8
|
+
@link_style.sub!('>', " background='#{args[:fill]}'>") if args[:fill]
|
9
|
+
@link_style.sub!('normal', "#{args[:weight]}") if args[:weight]
|
10
|
+
elsif klass == Shoes::LinkHover
|
11
|
+
@linkhover_style = LINKHOVER_DEFAULT
|
12
|
+
@linkhover_style.sub!('single', 'none') if args[:underline] == false
|
13
|
+
@linkhover_style.sub!("foreground='#039'", "foreground='#{args[:stroke]}'") if args[:stroke]
|
14
|
+
@linkhover_style.sub!('>', " background='#{args[:fill]}'>") if args[:fill]
|
15
|
+
@linkhover_style.sub!('normal', "#{args[:weight]}") if args[:weight]
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
|
20
|
+
class ShapeBase
|
21
|
+
def style args
|
22
|
+
real.clear
|
23
|
+
m = self.class.to_s.downcase[7..-1]
|
24
|
+
args = @args.merge args
|
25
|
+
obj = @app.send m, args, &args[:block]
|
26
|
+
obj.instance_variables.each{|iv| eval "#{iv} = obj.instance_variable_get('#{iv}')"}
|
27
|
+
end
|
28
|
+
end
|
29
|
+
|
30
|
+
class TextBlock
|
31
|
+
def style args
|
32
|
+
args[:markup] ||= @args[:markup]
|
33
|
+
args[:size] ||= @args[:size]
|
34
|
+
args[:font] ||= @args[:font]
|
35
|
+
args[:align] ||= @args[:align]
|
36
|
+
|
37
|
+
clear if @real
|
38
|
+
@width = (@left + parent.width <= @app.width) ? parent.width : @app.width - @left
|
39
|
+
@width = initials[:width] unless initials[:width].zero?
|
40
|
+
@height = 20 if @height.zero?
|
41
|
+
m = self.class.to_s.downcase[7..-1]
|
42
|
+
args = [args[:markup], @args.merge({left: @left, top: @top, width: @width, height: @height,
|
43
|
+
create_real: true, nocontrol: true, size: args[:size], font: args[:font], align: args[:align]})]
|
44
|
+
tb = @app.send(m, *args)
|
45
|
+
@real, @height = tb.real, tb.height
|
46
|
+
@args[:markup], @args[:size], @args[:font], @args[:align] = tb.markup, tb.size, tb.font, tb.align
|
47
|
+
end
|
48
|
+
end
|
49
|
+
|
50
|
+
class Slot
|
51
|
+
def style args = nil
|
52
|
+
args ? [:width, :height].each{|s| @initials[s] = args[s] if args[s]} :
|
53
|
+
{width: @width, height: @height}
|
54
|
+
end
|
55
|
+
end
|
56
|
+
end
|
data/samples/sample12.rb
CHANGED
@@ -11,7 +11,7 @@ Shoes.app width: 300, height: 300 do
|
|
11
11
|
j = 0
|
12
12
|
a = animate 1 do |i|
|
13
13
|
unless j == i
|
14
|
-
r.style fill: send(COLORS.keys[rand size]), stroke: send(COLORS.keys[rand size])
|
14
|
+
r.style fill: send(COLORS.keys[rand size]), stroke: send(COLORS.keys[rand size]), noorder: true
|
15
15
|
o.style fill: send(COLORS.keys[rand size]), stroke: send(COLORS.keys[rand size])
|
16
16
|
j = i
|
17
17
|
end
|
data/samples/sample49.rb
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
require '../lib/green_shoes'
|
2
|
+
|
3
|
+
Shoes.app do
|
4
|
+
popup = proc{alert 'Testing style method...'}
|
5
|
+
|
6
|
+
s1 = stack width: 0.5, height: 1.0 do
|
7
|
+
background cornflowerblue
|
8
|
+
@star = star 20, 20, 10, 100, 50
|
9
|
+
@star.click &popup
|
10
|
+
@msg = para fg('Wait 5 seconds...', yellow), left: 10, top: 450
|
11
|
+
end
|
12
|
+
|
13
|
+
s2 = stack width: 0.5, height: 1.0 do
|
14
|
+
background coral
|
15
|
+
para 'Green Shoes is one of colorful Shoes. It is written in pure Ruby with Ruby/GTK2.'
|
16
|
+
@para = para 'Testing, ', link('test', &popup), ', test. ',
|
17
|
+
strong('Breadsticks. '),
|
18
|
+
em('Breadsticks. '),
|
19
|
+
code('Breadsticks. '),
|
20
|
+
bg(fg(strong(ins('EVEN BETTER.')), white), rgb(255, 0, 192)),
|
21
|
+
sub('fine!')
|
22
|
+
para 'Yah! Yah! Yah!'
|
23
|
+
end
|
24
|
+
|
25
|
+
timer 5 do
|
26
|
+
@star.style width: 30, fill: gold..deeppink, outer: 70, inner: 50
|
27
|
+
@para.style align: 'center', size: 24, markup: fg(em(@para.markup), green)
|
28
|
+
s1.style width: 0.3
|
29
|
+
s2.style width: 0.7
|
30
|
+
@msg.text = fg('Looks good to me!', yellow)
|
31
|
+
flush
|
32
|
+
end
|
33
|
+
end
|
Binary file
|
data/static/manual-en.txt
CHANGED
@@ -1168,8 +1168,6 @@ For: ''check, radio''.
|
|
1168
1168
|
Is this checkbox or radio button checked? If set to `true`, the box is
|
1169
1169
|
checked. Also see the [[Check.checked=]] method.
|
1170
1170
|
|
1171
|
-
'''Note:''' Green Shoes doesn't support ''check'' and ''radio''.
|
1172
|
-
|
1173
1171
|
=== :choose » a string ===
|
1174
1172
|
|
1175
1173
|
For: ''list_box''.
|
@@ -1629,15 +1627,13 @@ How should the text wrap when it fills its width? Possible options are:
|
|
1629
1627
|
|
1630
1628
|
== Classes List ==
|
1631
1629
|
|
1632
|
-
|
1633
|
-
laid out according to how classes inherits from each other. Subclasses are
|
1634
|
-
indented one level to the right, beneath their parent class.
|
1630
|
+
There is a complete list of all the classes introduced by Green Shoes.
|
1635
1631
|
|
1636
|
-
|
1632
|
+
Look at [[http://rdoc.info/github/ashbb/green_shoes/master/frames/file/README.md Green Shoes RDoc]].
|
1637
1633
|
|
1638
1634
|
== Colors List ==
|
1639
1635
|
|
1640
|
-
The following list of colors can be used throughout Shoes. As background
|
1636
|
+
The following list of colors can be used throughout Green Shoes. As background
|
1641
1637
|
colors or border colors. As stroke and fill colors. Most of these colors come
|
1642
1638
|
from the X11 and HTML palettes.
|
1643
1639
|
|
@@ -1651,11 +1647,11 @@ find the exact numbers which can be used with the [[Built-in.rgb]] method.
|
|
1651
1647
|
|
1652
1648
|
Slots are boxes used to lay out images, text and so on. The two most common
|
1653
1649
|
slots are `stacks` and `flows`. Slots can also be referred to as "boxes" or
|
1654
|
-
"canvases" in Shoes terminology.
|
1650
|
+
"canvases" in Green Shoes terminology.
|
1655
1651
|
|
1656
1652
|
Since the mouse wheel and PageUp and PageDown are so pervasive on every
|
1657
1653
|
platform, vertical scrolling has really become the only overflow that matters.
|
1658
|
-
So, in Shoes, just as on the web, width is generally fixed. While height goes
|
1654
|
+
So, in Green Shoes, just as on the web, width is generally fixed. While height goes
|
1659
1655
|
on and on.
|
1660
1656
|
|
1661
1657
|
Now, you can also just use specific widths and heights for everything, if you
|
@@ -1690,7 +1686,7 @@ contents differently.
|
|
1690
1686
|
Making a flow means calling the [[Element.flow]] method. Flows may contain
|
1691
1687
|
other flows and stacks.
|
1692
1688
|
|
1693
|
-
Last thing: The Shoes window itself is a flow.
|
1689
|
+
Last thing: The Green Shoes window itself is a flow.
|
1694
1690
|
|
1695
1691
|
== Art for Slots ==
|
1696
1692
|
|
@@ -1708,15 +1704,14 @@ color used to paint inside the lines.
|
|
1708
1704
|
Shoes.app do
|
1709
1705
|
stroke red
|
1710
1706
|
fill blue
|
1711
|
-
oval :
|
1712
|
-
:radius => 100
|
1707
|
+
oval top: 10, left: 10, radius: 100
|
1713
1708
|
end
|
1714
1709
|
}}}
|
1715
1710
|
|
1716
1711
|
That code gives you a blue pie with a red line around it. One-hundred pixels
|
1717
1712
|
wide, placed just a few pixels southeast of the window's upper left corner.
|
1718
1713
|
|
1719
|
-
The `blue` and `red` methods above are
|
1714
|
+
The `blue` and `red` methods above are RGB array. See the section on
|
1720
1715
|
Colors for more on how to mix colors.
|
1721
1716
|
|
1722
1717
|
==== Inspiration from Processing and NodeBox ====
|
@@ -1726,9 +1721,9 @@ Python. In turn, NodeBox gets much of its ideas from Processing, a Java-like
|
|
1726
1721
|
language for graphics and animation. I owe a great debt to the creators of
|
1727
1722
|
these wonderful programs!
|
1728
1723
|
|
1729
|
-
Shoes does a few things differently from NodeBox and Processing. For example,
|
1730
|
-
Shoes has different color methods, including having its own
|
1731
|
-
though these are very similar to Processing's color methods. And Shoes also
|
1724
|
+
Green Shoes does a few things differently from NodeBox and Processing. For example,
|
1725
|
+
Green Shoes has different color methods, including having its own RGB array,
|
1726
|
+
though these are very similar to Processing's color methods. And Green Shoes also
|
1732
1727
|
allows images and gradients to be used for drawing lines and filling in shapes.
|
1733
1728
|
|
1734
1729
|
Shoes also borrows some animation ideas from Processing and will continue to
|
@@ -1741,16 +1736,22 @@ method just give you a bit more control than [[oval]], by offering the
|
|
1741
1736
|
`:angle1` and `:angle2` styles. (In fact, you can mimick the `oval` method by
|
1742
1737
|
setting `:angle1` to 0 and `:angle2` to `Shoes::TWO_PI`.)
|
1743
1738
|
|
1739
|
+
'''Note:''' Green Shoes doesn't support `arc` method.
|
1740
|
+
|
1744
1741
|
=== arrow(left, top, width) » Shoes::Shape ===
|
1745
1742
|
|
1746
1743
|
Draws an arrow at coordinates (left, top) with a pixel `width`.
|
1747
1744
|
|
1745
|
+
'''Note:''' Green Shoes doesn't support `arrow` method.
|
1746
|
+
|
1748
1747
|
=== cap(:curve or :rect or :project) » self ===
|
1749
1748
|
|
1750
1749
|
Sets the line cap, which is the shape at the end of every line you draw. If
|
1751
1750
|
set to `:curve`, the end is rounded. The default is `:rect`, a line which ends
|
1752
1751
|
abruptly flat. The `:project` cap is also fat, but sticks out a bit longer.
|
1753
1752
|
|
1753
|
+
'''Note:''' Green Shoes doesn't support `cap` method.
|
1754
|
+
|
1754
1755
|
=== fill(pattern) » pattern ===
|
1755
1756
|
|
1756
1757
|
Sets the fill bucket to a specific color (or pattern.) Patterns can be colors,
|
@@ -1762,7 +1763,7 @@ To draw a star with an image pattern:
|
|
1762
1763
|
{{{
|
1763
1764
|
#!ruby
|
1764
1765
|
Shoes.app do
|
1765
|
-
fill "../static/gshoes-icon.png"
|
1766
|
+
fill File.join(DIR, "../static/gshoes-icon.png")
|
1766
1767
|
star 200, 200, 5, 100, 50
|
1767
1768
|
end
|
1768
1769
|
}}}
|
@@ -1780,12 +1781,12 @@ Instead, shapes will have only a lining, leaving the middle transparent.
|
|
1780
1781
|
Empties the line color. Shapes drawn will have no outer line. If `nofill` is
|
1781
1782
|
also set, shapes drawn will not be visible.
|
1782
1783
|
|
1783
|
-
=== line(left, top, x2, y2) » Shoes::
|
1784
|
+
=== line(left, top, x2, y2) » Shoes::Line ===
|
1784
1785
|
|
1785
1786
|
Draws a line using the current line color (aka "stroke") starting at
|
1786
1787
|
coordinates (left, top) and ending at coordinates (x2, y2).
|
1787
1788
|
|
1788
|
-
=== oval(left, top, radius) » Shoes::
|
1789
|
+
=== oval(left, top, radius) » Shoes::Oval ===
|
1789
1790
|
|
1790
1791
|
Draws a circular form at pixel coordinates (left, top) with a width and height
|
1791
1792
|
of `radius` pixels. The line and fill colors are used to draw the shape. By
|
@@ -1805,7 +1806,7 @@ style on the next method below.
|
|
1805
1806
|
|
1806
1807
|
To draw an oval of varied proportions, you may also use the syntax: `oval(left, top, width, height)`.
|
1807
1808
|
|
1808
|
-
=== oval(styles) » Shoes::
|
1809
|
+
=== oval(styles) » Shoes::Oval ===
|
1809
1810
|
|
1810
1811
|
Draw circular form using a style hash. The following styles are supported:
|
1811
1812
|
|
@@ -1818,11 +1819,12 @@ Draw circular form using a style hash. The following styles are supported:
|
|
1818
1819
|
|
1819
1820
|
These styles may also be altered using the `style` method on the Shape object.
|
1820
1821
|
|
1821
|
-
|
1822
|
+
'''Note:''' Green Shoes doesn't support `center` style.
|
1823
|
+
|
1824
|
+
=== rect(top, left, width, height) » Shoes::Rect ===
|
1822
1825
|
|
1823
1826
|
Draws a rectangle starting from coordinates (top, left) with dimensions of
|
1824
|
-
width x height.
|
1825
|
-
fifth argument: the radius of the corners in pixels.
|
1827
|
+
width x height.
|
1826
1828
|
|
1827
1829
|
As with all other shapes, the rectangle is drawn using the stroke and fill colors.
|
1828
1830
|
|
@@ -1839,7 +1841,7 @@ The above sample draws a rectangle which fills the area of its parent box,
|
|
1839
1841
|
leaving a margin of 10 pixels around the edge. Also see the `background`
|
1840
1842
|
method for a rectangle which defaults to filling its parent box.
|
1841
1843
|
|
1842
|
-
=== rect(styles) » Shoes::
|
1844
|
+
=== rect(styles) » Shoes::Rect ===
|
1843
1845
|
|
1844
1846
|
Draw a rectangle using a style hash. The following styles are supported:
|
1845
1847
|
|
@@ -1852,6 +1854,8 @@ Draw a rectangle using a style hash. The following styles are supported:
|
|
1852
1854
|
|
1853
1855
|
These styles may also be altered using the `style` method on the Shape object.
|
1854
1856
|
|
1857
|
+
'''Note:''' Green Shoes doesn't support `center` style.
|
1858
|
+
|
1855
1859
|
=== rotate(degrees: a number) » self ===
|
1856
1860
|
|
1857
1861
|
Rotates the pen used for drawing by a certain number of `degrees`, so that any
|
@@ -1876,16 +1880,13 @@ block. You can look at it as sketching a shape with a long line that curves
|
|
1876
1880
|
and arcs and bends.
|
1877
1881
|
|
1878
1882
|
{{{
|
1879
|
-
#!ruby
|
1880
|
-
# Not yet available
|
1881
1883
|
Shoes.app do
|
1882
|
-
fill
|
1884
|
+
fill yellow
|
1883
1885
|
shape do
|
1884
|
-
move_to
|
1885
|
-
|
1886
|
-
|
1887
|
-
|
1888
|
-
arc_to(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI)
|
1886
|
+
move_to 50, 30
|
1887
|
+
curve_to 100, 100, 10, 20, 100, 50
|
1888
|
+
line_to 20, 100
|
1889
|
+
line_to 30, 30
|
1889
1890
|
end
|
1890
1891
|
end
|
1891
1892
|
}}}
|
@@ -1896,7 +1897,11 @@ the other methods in this [[Art]] section) inside a shape, but they will not be
|
|
1896
1897
|
part of the line. They will be more like a group of shapes are all drawn as
|
1897
1898
|
one.
|
1898
1899
|
|
1899
|
-
|
1900
|
+
'''Note:''' The above `line_to`, `move_to` and `curve_to` are Cairo::Context methods.
|
1901
|
+
Green Shoes uses them directly inside the block. So, Green Shoes doesn't support `arc_to`.
|
1902
|
+
Also Green Shoes shape can not contain other shapes.
|
1903
|
+
|
1904
|
+
=== star(left, top, points = 10, outer = 100.0, inner = 50.0) » Shoes::Star ===
|
1900
1905
|
|
1901
1906
|
Draws a star using the stroke and fill colors. The star is positioned with its
|
1902
1907
|
center point at coordinates (left, top) with a certain number of `points`. The
|
@@ -1909,14 +1914,14 @@ Set the active line color for this slot. The `pattern` may be a color, a
|
|
1909
1914
|
gradient or an image, all of which are categorized as "patterns." The line
|
1910
1915
|
color is then used to draw the borders of any subsequent shape.
|
1911
1916
|
|
1912
|
-
So, to draw
|
1917
|
+
So, to draw a star with a red line around it:
|
1913
1918
|
|
1914
1919
|
{{{
|
1915
1920
|
#!ruby
|
1916
|
-
# Not yet available
|
1917
1921
|
Shoes.app do
|
1918
1922
|
stroke red
|
1919
|
-
|
1923
|
+
nofill
|
1924
|
+
star 100, 100
|
1920
1925
|
end
|
1921
1926
|
}}}
|
1922
1927
|
|
@@ -1933,6 +1938,8 @@ pixels. Calling `strokewidth(4)` will cause lines to be drawn 4 pixels wide.
|
|
1933
1938
|
Should transformations (such as `skew` and `rotate`) be performed around the
|
1934
1939
|
center of the shape? Or the corner of the shape? Shoes defaults to `:corner`.
|
1935
1940
|
|
1941
|
+
'''Note:''' Green Shoes doesn't support `transform` method.
|
1942
|
+
|
1936
1943
|
=== translate(left, top) » self ===
|
1937
1944
|
|
1938
1945
|
Moves the starting point of the drawing pen for this slot. Normally, the pen
|
@@ -1941,14 +1948,16 @@ point. With `translate`, if the starting point is moved to (10, 20) and a
|
|
1941
1948
|
shape is drawn at (50, 60), then the shape is actually drawn at (60, 80) on the
|
1942
1949
|
slot.
|
1943
1950
|
|
1951
|
+
'''Note:''' Green Shoes doesn't support `translate` method.
|
1952
|
+
|
1944
1953
|
== Element Creation ==
|
1945
1954
|
|
1946
|
-
Shoes has a wide variety of elements, many cherry-picked from HTML. This page
|
1955
|
+
Green Shoes has a wide variety of elements, many cherry-picked from HTML. This page
|
1947
1956
|
describes how to create these elements in a slot. See the Elements section of
|
1948
1957
|
the manual for more on how to modify and use these elements after they have
|
1949
1958
|
been placed.
|
1950
1959
|
|
1951
|
-
=== animate(fps) { |frame| ... } » Shoes::
|
1960
|
+
=== animate(fps) { |frame| ... } » Shoes::Anim ===
|
1952
1961
|
|
1953
1962
|
Starts an animation timer, which runs parallel to the rest of the app. The
|
1954
1963
|
`fps` is a number, the frames per seconds. This number dictates how many times
|
@@ -1960,9 +1969,9 @@ tells the block how many frames of the animation have been shown.
|
|
1960
1969
|
{{{
|
1961
1970
|
#!ruby
|
1962
1971
|
Shoes.app do
|
1963
|
-
|
1964
|
-
animate
|
1965
|
-
|
1972
|
+
counter = para "STARTING"
|
1973
|
+
animate 24 do |frame|
|
1974
|
+
counter.replace "FRAME #{frame}"
|
1966
1975
|
end
|
1967
1976
|
end
|
1968
1977
|
}}}
|
@@ -1978,13 +1987,13 @@ background. Gradients stretch to fill the background.
|
|
1978
1987
|
|
1979
1988
|
'''PLEASE NOTE:''' Backgrounds are actual elements, not styles. HTML treats
|
1980
1989
|
backgrounds like styles. Which means every box can only have one background.
|
1981
|
-
Shoes layers background elements.
|
1990
|
+
Green Shoes layers background elements.
|
1982
1991
|
|
1983
1992
|
{{{
|
1984
1993
|
#!ruby
|
1985
1994
|
Shoes.app do
|
1986
1995
|
background black
|
1987
|
-
background white, :
|
1996
|
+
background white, width: 50
|
1988
1997
|
end
|
1989
1998
|
}}}
|
1990
1999
|
|
@@ -1994,7 +2003,7 @@ along the left side.
|
|
1994
2003
|
|
1995
2004
|
=== banner(text) » Shoes::Banner ===
|
1996
2005
|
|
1997
|
-
Creates a Banner text block. Shoes automatically styles this text to 48 pixels high.
|
2006
|
+
Creates a Banner text block. Green Shoes automatically styles this text to 48 pixels high.
|
1998
2007
|
|
1999
2008
|
=== border(text, :strokewidth => a number) » Shoes::Border ===
|
2000
2009
|
|
@@ -2004,7 +2013,7 @@ Gradients stretch to fill the border.
|
|
2004
2013
|
|
2005
2014
|
'''PLEASE NOTE:''' Like Backgrounds, Borders are actual elements, not styles.
|
2006
2015
|
HTML treats backgrounds and borders like styles. Which means every box can
|
2007
|
-
only have one borders. Shoes layers border and background elements, along with
|
2016
|
+
only have one borders. Green Shoes layers border and background elements, along with
|
2008
2017
|
text blocks, images, and everything else.
|
2009
2018
|
|
2010
2019
|
=== button(text) { ... } » Shoes::Button ===
|
@@ -2014,17 +2023,17 @@ optional block can be attached, which is called if the button is pressed.
|
|
2014
2023
|
|
2015
2024
|
=== caption(text) » Shoes::Caption ===
|
2016
2025
|
|
2017
|
-
Creates a Caption text block. Shoes styles this text to 14 pixels high.
|
2026
|
+
Creates a Caption text block. Green Shoes styles this text to 14 pixels high.
|
2018
2027
|
|
2019
2028
|
=== check() » Shoes::Check ===
|
2020
2029
|
|
2021
2030
|
Adds a check box.
|
2022
2031
|
|
2023
|
-
=== code(text) »
|
2032
|
+
=== code(text) » String ===
|
2024
2033
|
|
2025
2034
|
Create a Code text fragment. This text defaults to a monospaced font.
|
2026
2035
|
|
2027
|
-
=== del(text) »
|
2036
|
+
=== del(text) » String ===
|
2028
2037
|
|
2029
2038
|
Creates a Del text fragment (short for "deleted") which defaults to text with a
|
2030
2039
|
single strikethrough in its middle.
|
@@ -2034,6 +2043,8 @@ single strikethrough in its middle.
|
|
2034
2043
|
Opens a new app window (just like the [[Element.window]] method does,) but the
|
2035
2044
|
window is given a dialog box look.
|
2036
2045
|
|
2046
|
+
'''Note:''' Green Shoes doesn't support `dialog` method.
|
2047
|
+
|
2037
2048
|
=== edit_box(text) » Shoes::EditBox ===
|
2038
2049
|
|
2039
2050
|
Adds a large, multi-line textarea to this slot. The `text` is optional and
|
@@ -2045,7 +2056,7 @@ attached here which is called any type the user changes the text in the box.
|
|
2045
2056
|
Shoes.app do
|
2046
2057
|
edit_box
|
2047
2058
|
edit_box text: "HORRAY EDIT ME"
|
2048
|
-
edit_box text: "small one", :
|
2059
|
+
edit_box text: "small one", width: 100, height: 160
|
2049
2060
|
end
|
2050
2061
|
}}}
|
2051
2062
|
|
@@ -2055,21 +2066,21 @@ Adds a single-line text box to this slot. The `text` is optional and should be
|
|
2055
2066
|
a string that will start out the box. An optional block can be attached here
|
2056
2067
|
which is called any type the user changes the text in the box.
|
2057
2068
|
|
2058
|
-
=== em(text) »
|
2069
|
+
=== em(text) » String ===
|
2059
2070
|
|
2060
2071
|
Creates an Em text fragment (short for "emphasized") which, by default, is
|
2061
2072
|
styled with italics.
|
2062
2073
|
|
2063
|
-
=== every(seconds) { |count| ... } » Shoes::
|
2074
|
+
=== every(seconds) { |count| ... } » Shoes::Anim ===
|
2064
2075
|
|
2065
|
-
A timer similar to the `
|
2076
|
+
A timer similar to the `animate` method, but much slower. This timer fires a
|
2066
2077
|
given number of seconds, running the block attached. So, for example, if you
|
2067
2078
|
need to check a web site every five minutes, you'd call `every(300)` with a
|
2068
2079
|
block containing the code to actually ping the web site.
|
2069
2080
|
|
2070
2081
|
=== flow(styles) { ... } » Shoes::Flow ===
|
2071
2082
|
|
2072
|
-
A flow is an invisible box (or "slot") in which you place Shoes elements. Both
|
2083
|
+
A flow is an invisible box (or "slot") in which you place Green Shoes elements. Both
|
2073
2084
|
flows and stacks are explained in great detail on the main [[Slots]] page.
|
2074
2085
|
|
2075
2086
|
Flows organize elements horizontally. Where one would use a [[Element.stack]]
|
@@ -2088,6 +2099,8 @@ personal Shoes directory. Remote images are loaded in the background; as with
|
|
2088
2099
|
browsers, the images will not appear right away, but will be shown when they
|
2089
2100
|
are loaded.
|
2090
2101
|
|
2102
|
+
'''Note:''' Green Shoes doesn't support the above personal Shoes directory.
|
2103
|
+
|
2091
2104
|
=== imagesize(path) » [width, height] ===
|
2092
2105
|
|
2093
2106
|
Quickly grab the width and height of an image. The image won't be loaded into
|
@@ -2096,18 +2109,18 @@ the cache or displayed.
|
|
2096
2109
|
URGENT NOTE: This method cannot be used with remote images (loaded from HTTP,
|
2097
2110
|
rather than the hard drive.)
|
2098
2111
|
|
2099
|
-
=== ins(text) »
|
2112
|
+
=== ins(text) » String ===
|
2100
2113
|
|
2101
|
-
Creates an Ins text fragment (short for "inserted") which Shoes styles with a
|
2114
|
+
Creates an Ins text fragment (short for "inserted") which Green Shoes styles with a
|
2102
2115
|
single underline.
|
2103
2116
|
|
2104
2117
|
=== inscription(text) » Shoes::Inscription ===
|
2105
2118
|
|
2106
|
-
Creates an Inscription text block. Shoes styles this text at 10 pixels high.
|
2119
|
+
Creates an Inscription text block. Green Shoes styles this text at 10 pixels high.
|
2107
2120
|
|
2108
2121
|
=== link(text, :click => proc or string) » Shoes::Link ===
|
2109
2122
|
|
2110
|
-
Creates a Link text block, which Shoes styles with a single underline and
|
2123
|
+
Creates a Link text block, which Green Shoes styles with a single underline and
|
2111
2124
|
colors with a #06E (blue) colored stroke.
|
2112
2125
|
|
2113
2126
|
The default LinkHover style is also single-underlined with a #039 (dark blue) stroke.
|
@@ -2121,9 +2134,12 @@ box becomes selected by the user.
|
|
2121
2134
|
{{{
|
2122
2135
|
#!ruby
|
2123
2136
|
Shoes.app do
|
2124
|
-
stack
|
2137
|
+
stack margin: 10 do
|
2125
2138
|
para "Pick a card:"
|
2126
|
-
list_box :
|
2139
|
+
list_box items: ["Jack", "Ace", "Joker"] do |item|
|
2140
|
+
@p.text = "#{item} was picked!"
|
2141
|
+
end
|
2142
|
+
@p = para
|
2127
2143
|
end
|
2128
2144
|
end
|
2129
2145
|
}}}
|
@@ -2137,7 +2153,7 @@ Adds a progress bar.
|
|
2137
2153
|
|
2138
2154
|
=== para(text) » Shoes::Para ===
|
2139
2155
|
|
2140
|
-
Create a Para text block (short for "paragraph") which Shoes styles at 12
|
2156
|
+
Create a Para text block (short for "paragraph") which Green Shoes styles at 12
|
2141
2157
|
pixels high.
|
2142
2158
|
|
2143
2159
|
=== radio(group name: a string or symbol) » Shoes::Radio ===
|
@@ -2151,6 +2167,8 @@ any other radio buttons in the same slot.)
|
|
2151
2167
|
|
2152
2168
|
Creates a Span text fragment, unstyled by default.
|
2153
2169
|
|
2170
|
+
'''Note:''' Green Shoes doesn't support `span` method.
|
2171
|
+
|
2154
2172
|
=== stack(styles) { ... } » Shoes::Stack ===
|
2155
2173
|
|
2156
2174
|
Creates a new stack. A stack is a type of slot. (See the main [[Slots]] page
|
@@ -2160,29 +2178,29 @@ In short, stacks are an invisible box (a "slot") for placing stuff. As you add
|
|
2160
2178
|
things to the stack, such as buttons or images, those things pile up
|
2161
2179
|
vertically. Yes, they stack up!
|
2162
2180
|
|
2163
|
-
=== strong(text) »
|
2181
|
+
=== strong(text) » String ===
|
2164
2182
|
|
2165
2183
|
Creates a Strong text fragment, styled in bold by default.
|
2166
2184
|
|
2167
|
-
=== sub(text) »
|
2185
|
+
=== sub(text) » String ===
|
2168
2186
|
|
2169
2187
|
Creates a Sub text fragment (short for "subscript") which defaults to lowering
|
2170
2188
|
the text by 10 pixels and styling it in an x-small font.
|
2171
2189
|
|
2172
|
-
=== subtitle(text) »
|
2190
|
+
=== subtitle(text) » String ===
|
2173
2191
|
|
2174
|
-
Creates a Subtitle text block. Shoes styles this text to 26 pixels high.
|
2192
|
+
Creates a Subtitle text block. Green Shoes styles this text to 26 pixels high.
|
2175
2193
|
|
2176
|
-
=== sup(text) »
|
2194
|
+
=== sup(text) » String ===
|
2177
2195
|
|
2178
2196
|
Creates a Sup text fragment (short for "superscript") which defaults to raising
|
2179
2197
|
the text by 10 pixels and styling it in an x-small font.
|
2180
2198
|
|
2181
2199
|
=== tagline(text) » Shoes::Tagline ===
|
2182
2200
|
|
2183
|
-
Creates a Tagline text block. Shoes styles this text to 18 pixels high.
|
2201
|
+
Creates a Tagline text block. Green Shoes styles this text to 18 pixels high.
|
2184
2202
|
|
2185
|
-
=== timer(seconds) { ... } »
|
2203
|
+
=== timer(seconds) { ... } » Fixnum ===
|
2186
2204
|
|
2187
2205
|
A one-shot timer. If you want to schedule to run some code in a few seconds
|
2188
2206
|
(or minutes, hours) you can attach the code as a block here.
|
@@ -2192,20 +2210,22 @@ To display an alert box five seconds from now:
|
|
2192
2210
|
{{{
|
2193
2211
|
#!ruby
|
2194
2212
|
Shoes.app do
|
2195
|
-
timer
|
2196
|
-
alert
|
2213
|
+
timer 5 do
|
2214
|
+
alert "Your five seconds are up."
|
2197
2215
|
end
|
2198
2216
|
end
|
2199
2217
|
}}}
|
2200
2218
|
|
2201
2219
|
=== title(text) » Shoes::Title ===
|
2202
2220
|
|
2203
|
-
Creates a Title text block. Shoes styles these elements to 34 pixels high.
|
2221
|
+
Creates a Title text block. Green Shoes styles these elements to 34 pixels high.
|
2204
2222
|
|
2205
2223
|
=== video(path or url) » Shoes::Video ===
|
2206
2224
|
|
2207
2225
|
Embeds a movie in this slot.
|
2208
2226
|
|
2227
|
+
'''Note:''' Green Shoes doesn't support `video` method.
|
2228
|
+
|
2209
2229
|
=== window(styles) { ... } » Shoes::App ===
|
2210
2230
|
|
2211
2231
|
Opens a new app window. This method is almost identical to the
|
@@ -2218,11 +2238,10 @@ window. This way the child window can call the parent.
|
|
2218
2238
|
|
2219
2239
|
{{{
|
2220
2240
|
#!ruby
|
2221
|
-
|
2222
|
-
Shoes.app :title => "The Owner" do
|
2241
|
+
Shoes.app title: "The Owner" do
|
2223
2242
|
button "Pop up?" do
|
2224
2243
|
window do
|
2225
|
-
para "Okay, popped up from #{owner}"
|
2244
|
+
para "Okay, popped up from [#{owner}]."
|
2226
2245
|
end
|
2227
2246
|
end
|
2228
2247
|
end
|
@@ -2235,7 +2254,7 @@ to a slot whenever a mouse moves inside the slot. Or whenever a key is
|
|
2235
2254
|
pressed. Even when the slot is created or destroyed. You can attach a block
|
2236
2255
|
to each of these events.
|
2237
2256
|
|
2238
|
-
Mouse events include `motion`, `click`, `hover` and `leave`. Keyboard typing
|
2257
|
+
Mouse events include `motion`, `click`, `release`, `hover` and `leave`. Keyboard typing
|
2239
2258
|
is represented by the `keypress` event. And the `start` and `finish` events
|
2240
2259
|
indicate when a canvas comes into play or is discarded.
|
2241
2260
|
|
@@ -2246,16 +2265,15 @@ away.
|
|
2246
2265
|
|
2247
2266
|
{{{
|
2248
2267
|
#!ruby
|
2249
|
-
# Not yet available
|
2250
2268
|
Shoes.app do
|
2251
|
-
s = stack :
|
2269
|
+
s = stack width: 200, height: 200 do
|
2252
2270
|
background red
|
2253
|
-
|
2271
|
+
end
|
2272
|
+
s.hover do
|
2254
2273
|
s.clear { background blue }
|
2255
|
-
|
2256
|
-
|
2257
|
-
|
2258
|
-
end
|
2274
|
+
end
|
2275
|
+
s.leave do
|
2276
|
+
s.clear { background red }
|
2259
2277
|
end
|
2260
2278
|
end
|
2261
2279
|
}}}
|
@@ -2273,6 +2291,8 @@ To catch the moment when the mouse is unclicked, see the [[Events.release]] even
|
|
2273
2291
|
When a slot is removed, it's finish event occurs. The finish block is
|
2274
2292
|
immediately handed `self`, the slot object which has been removed.
|
2275
2293
|
|
2294
|
+
'''Note:''' Green Shoes doesn't support `finish` method.
|
2295
|
+
|
2276
2296
|
=== hover { |self| ... } » self ===
|
2277
2297
|
|
2278
2298
|
The hover event happens when the mouse enters the slot. The block gets `self`,
|
@@ -2284,45 +2304,31 @@ To catch the mouse exiting the slot, check out the [[Events.leave]] event.
|
|
2284
2304
|
|
2285
2305
|
Whenever a key (or combination of keys) is pressed, the block gets called. The
|
2286
2306
|
block is sent a `key` which is a string representing the character (such as the
|
2287
|
-
letter or number) on the key.
|
2288
|
-
is sent, rather than a string.
|
2307
|
+
letter or number) on the key.
|
2289
2308
|
|
2290
|
-
So, for example, if `Shift-a` is pressed, the block will get the string `"A"`.
|
2309
|
+
So, for example, if `Shift-a` is pressed, the block will get the string `"Shift_L"` and `"A"`.
|
2291
2310
|
|
2292
|
-
|
2293
|
-
`Shift-F1`, the symbol would be `:shift_f1`.
|
2311
|
+
And if the `F1` key is pressed, the `"F1"` string is received.
|
2294
2312
|
|
2295
|
-
The modifier keys are `
|
2296
|
-
If `Shift-Control-Alt-PgUp` is pressed, the
|
2297
|
-
|
2313
|
+
The left side modifier keys are `"Control_L"`, `"Shift_L"` and `"Alt_L"`. They appear in that order.
|
2314
|
+
If `Shift-Control-Alt-PgUp` is pressed, the strings will be
|
2315
|
+
`"Shift_L"`, `"Control_L"`, `"Alt_L"` and `"Page_Up"`.
|
2298
2316
|
|
2299
|
-
One thing about the shift key.
|
2300
|
-
US keyboards, `Shift-7` is an ampersand. So you'll get the string `"
|
2301
|
-
than
|
2302
|
-
get the
|
2303
|
-
keys listed a few paragraphs down.
|
2317
|
+
One thing about the shift key. On
|
2318
|
+
US keyboards, `Shift-7` is an ampersand. So you'll get the string `"Shift_L"` and `"ampersand"` rather
|
2319
|
+
than `"Shift_L"` and `"7"`. And, if you press `Shift-Alt-7` on such a keyboard, you'll
|
2320
|
+
get the strings: `"Shift_L"`, `"Alt_L"` and `"ampersand"`.
|
2304
2321
|
|
2305
2322
|
{{{
|
2306
2323
|
#!ruby
|
2307
2324
|
Shoes.app do
|
2308
|
-
|
2325
|
+
info = para "NO KEY is PRESSED."
|
2309
2326
|
keypress do |k|
|
2310
|
-
|
2327
|
+
info.replace "#{k.inspect} was PRESSED."
|
2311
2328
|
end
|
2312
2329
|
end
|
2313
2330
|
}}}
|
2314
2331
|
|
2315
|
-
Keep in mind that Shoes itself uses a few hotkeys. Alt-Period (`:alt_.`),
|
2316
|
-
Alt-Question (`:alt_?`) and Alt-Slash (`:alt_/`) are reserved for Shoes.
|
2317
|
-
|
2318
|
-
The list of special keys is as follows: `:escape`, `:delete`, `:backspace`,
|
2319
|
-
`:tab`, `:page_up`, `:page_down`, `:home`, `:end`, `:left`, `:up`, `:right`,
|
2320
|
-
`:down`, `:f1`, `:f2`, `:f3`, `:f4`, `:f5`, `:f6`, `:f7`, `:f8`, `:f9`, `:f10`,
|
2321
|
-
`:f11` and `:f12`.
|
2322
|
-
|
2323
|
-
One caveat to all of those rules: normally the Return key gives you a string
|
2324
|
-
`"\n"`. When pressed with modifier keys, however, you end up with
|
2325
|
-
`:control_enter`, `:control_alt_enter`, `:shift_alt_enter` and the like.
|
2326
2332
|
|
2327
2333
|
=== leave { |self| ... } » self ===
|
2328
2334
|
|
@@ -2339,13 +2345,13 @@ The block is handed the cursor's `left` and `top` coordinates.
|
|
2339
2345
|
|
2340
2346
|
{{{
|
2341
2347
|
#!ruby
|
2342
|
-
Shoes.app :
|
2348
|
+
Shoes.app width: 200, height: 200 do
|
2343
2349
|
background black
|
2344
2350
|
fill white
|
2345
|
-
|
2351
|
+
circ = oval 0, 0, 100, 100
|
2346
2352
|
|
2347
2353
|
motion do |top, left|
|
2348
|
-
|
2354
|
+
circ.move top - 50, left - 50
|
2349
2355
|
end
|
2350
2356
|
end
|
2351
2357
|
}}}
|
@@ -2364,6 +2370,8 @@ To catch the actual mouse click, use the [[Events.click]] event.
|
|
2364
2370
|
The first time the slot is drawn, the start event fires. The block is handed
|
2365
2371
|
`self`, the slot object which has just been drawn.
|
2366
2372
|
|
2373
|
+
'''Note:''' Green Shoes doesn't support `start` method.
|
2374
|
+
|
2367
2375
|
== Manipulation Blocks ==
|
2368
2376
|
|
2369
2377
|
The manipulation methods below make quick work of shifting around slots and
|
@@ -2375,7 +2383,6 @@ Adds elements to the end of a slot.
|
|
2375
2383
|
|
2376
2384
|
{{{
|
2377
2385
|
#!ruby
|
2378
|
-
# Not yet available
|
2379
2386
|
Shoes.app do
|
2380
2387
|
@slot = stack { para 'Good Morning' }
|
2381
2388
|
timer 3 do
|
@@ -2429,7 +2436,6 @@ Adds elements to the beginning of a slot.
|
|
2429
2436
|
|
2430
2437
|
{{{
|
2431
2438
|
#!ruby
|
2432
|
-
# Not yet available
|
2433
2439
|
Shoes.app do
|
2434
2440
|
@slot = stack { para 'Good Morning' }
|
2435
2441
|
timer 3 do
|
@@ -2449,7 +2455,10 @@ To set the width of a stack to 150 pixels:
|
|
2449
2455
|
{{{
|
2450
2456
|
#!ruby
|
2451
2457
|
Shoes.app do
|
2452
|
-
stack
|
2458
|
+
stack width: 150 do
|
2459
|
+
background yellow
|
2460
|
+
para "Now that's precision."
|
2461
|
+
end
|
2453
2462
|
end
|
2454
2463
|
}}}
|
2455
2464
|
|
@@ -2469,6 +2478,8 @@ The `left` and `top` numbers sent to `displace` are added to the slot's own
|
|
2469
2478
|
top-left coordinates. To subtract from the top-left coordinate, use negative
|
2470
2479
|
numbers.
|
2471
2480
|
|
2481
|
+
'''Note:''' Green Shoes doesn't support `displace` method.
|
2482
|
+
|
2472
2483
|
=== gutter() » a number ===
|
2473
2484
|
|
2474
2485
|
The size of the scrollbar area. When Shoes needs to show a scrollbar, the
|
@@ -2488,6 +2499,8 @@ This is commonly used to pad elements on the right, like so:
|
|
2488
2499
|
end
|
2489
2500
|
}}}
|
2490
2501
|
|
2502
|
+
'''Note:''' Green Shoes doesn't support `gutter` method.
|
2503
|
+
|
2491
2504
|
=== height() » a number ===
|
2492
2505
|
|
2493
2506
|
The vertical size of the viewable slot in pixels. So, if this is a scrolling
|
@@ -2497,6 +2510,8 @@ slot, you'll need to use `scroll_height()` to get the full size of the slot.
|
|
2497
2510
|
|
2498
2511
|
Hides the slot, so that it can't be seen. See also [[Position.show]] and [[Position.toggle]].
|
2499
2512
|
|
2513
|
+
'''Note:''' Green Shoes doesn't support `hide` method.
|
2514
|
+
|
2500
2515
|
=== left() » a number ===
|
2501
2516
|
|
2502
2517
|
The left pixel location of the slot. Also known as the x-axis coordinate.
|
@@ -2506,20 +2521,28 @@ The left pixel location of the slot. Also known as the x-axis coordinate.
|
|
2506
2521
|
Moves the slot to specific coordinates, the (left, top) being the upper left
|
2507
2522
|
hand corner of the slot.
|
2508
2523
|
|
2524
|
+
'''Note:''' Green Shoes doesn't support `gutter` method.
|
2525
|
+
|
2509
2526
|
=== remove() » self ===
|
2510
2527
|
|
2511
2528
|
Removes the slot. It will no longer be displayed and will not be listed in its
|
2512
2529
|
parent's contents. It's gone.
|
2513
2530
|
|
2531
|
+
'''Note:''' Green Shoes doesn't support `remove` method. Use `clear` method.
|
2532
|
+
|
2514
2533
|
=== scroll() » true or false ===
|
2515
2534
|
|
2516
2535
|
Is this slot allowed to show a scrollbar? True or false. The scrollbar will
|
2517
2536
|
only appear if the height of the slot is also fixed.
|
2518
2537
|
|
2538
|
+
'''Note:''' Green Shoes doesn't support `scroll` method.
|
2539
|
+
|
2519
2540
|
=== scroll_height() » a number ===
|
2520
2541
|
|
2521
2542
|
The vertical size of the full slot, including any of it which is hidden by scrolling.
|
2522
2543
|
|
2544
|
+
'''Note:''' Green Shoes doesn't support `scroll_height` method.
|
2545
|
+
|
2523
2546
|
=== scroll_max() » a number ===
|
2524
2547
|
|
2525
2548
|
The top coordinate which this slot can be scrolled down to. The top coordinate
|
@@ -2531,21 +2554,29 @@ This is basically a shortcut for writing `slot.scroll_height - slot.height`.
|
|
2531
2554
|
|
2532
2555
|
To scroll to the bottom of a slot, use `slot.scroll_top = slot.scroll_max`.
|
2533
2556
|
|
2557
|
+
'''Note:''' Green Shoes doesn't support `scroll_max` method.
|
2558
|
+
|
2534
2559
|
=== scroll_top() » a number ===
|
2535
2560
|
|
2536
2561
|
The top coordinate which this slot is scrolled down to. So, if the slot is
|
2537
2562
|
scrolled down twenty pixels, this method will return `20`.
|
2538
2563
|
|
2564
|
+
'''Note:''' Green Shoes doesn't support `scroll_top` method.
|
2565
|
+
|
2539
2566
|
=== scroll_top = a number ===
|
2540
2567
|
|
2541
2568
|
Scrolls the slot to a certain coordinate. This must be between zero and
|
2542
2569
|
`scroll_max`.
|
2543
2570
|
|
2571
|
+
'''Note:''' Green Shoes doesn't support `scroll_top=` method.
|
2572
|
+
|
2544
2573
|
=== show() » self ===
|
2545
2574
|
|
2546
2575
|
Reveals the slot, if it is hidden. See also [[Position.hide]] and
|
2547
2576
|
[[Position.toggle]].
|
2548
2577
|
|
2578
|
+
'''Note:''' Green Shoes doesn't support `show` method.
|
2579
|
+
|
2549
2580
|
=== style() » styles ===
|
2550
2581
|
|
2551
2582
|
Calling the `style` method with no arguments returns a hash of the styles
|
@@ -2557,14 +2588,15 @@ originally requested.
|
|
2557
2588
|
|
2558
2589
|
{{{
|
2559
2590
|
#!ruby
|
2560
|
-
# Not yet available
|
2561
2591
|
Shoes.app do
|
2562
|
-
|
2563
|
-
para
|
2592
|
+
s = stack width: 1.0
|
2593
|
+
para s.style[:width]
|
2594
|
+
button('Then..'){s.append{para s.style[:width]}}
|
2564
2595
|
end
|
2565
2596
|
}}}
|
2566
2597
|
|
2567
|
-
In this example, the paragraph under the stack will display
|
2598
|
+
In this example, the paragraph under the stack will display "1.0".
|
2599
|
+
After click the button, will show you "600" pixels.
|
2568
2600
|
|
2569
2601
|
=== style(styles) » styles ===
|
2570
2602
|
|
@@ -2574,10 +2606,9 @@ example, there is a `width` method, thus there is also a `width` style.
|
|
2574
2606
|
|
2575
2607
|
{{{
|
2576
2608
|
#!ruby
|
2577
|
-
# Not yet available
|
2578
2609
|
Shoes.app do
|
2579
|
-
|
2580
|
-
|
2610
|
+
s = stack { background green }
|
2611
|
+
s.style width: 400, height: 200
|
2581
2612
|
end
|
2582
2613
|
}}}
|
2583
2614
|
|
@@ -2585,6 +2616,8 @@ example, there is a `width` method, thus there is also a `width` style.
|
|
2585
2616
|
|
2586
2617
|
Hides the slot, if it is shown. Or shows the slot, if it is hidden.
|
2587
2618
|
|
2619
|
+
'''Note:''' Green Shoes doesn't support `toggle` method.
|
2620
|
+
|
2588
2621
|
=== top() » a number ===
|
2589
2622
|
|
2590
2623
|
The top pixel location of the slot. Also known as the y-axis coordinate.
|
@@ -2601,8 +2634,7 @@ element.
|
|
2601
2634
|
|
2602
2635
|
On any element, you may call the `parent` method to get the slot directly above
|
2603
2636
|
it. And on slots, you can call the `contents` method to get all of the
|
2604
|
-
children. (Some elements, such as
|
2605
|
-
for getting their children.)
|
2637
|
+
children. (Some elements, such as shapes, are not included in any slots.)
|
2606
2638
|
|
2607
2639
|
=== contents() » an array of elements ===
|
2608
2640
|
|
@@ -2612,6 +2644,18 @@ Lists all elements in a slot.
|
|
2612
2644
|
|
2613
2645
|
Gets the object for this element's container.
|
2614
2646
|
|
2647
|
+
{{{
|
2648
|
+
Shoes.app do
|
2649
|
+
s = stack do
|
2650
|
+
para 'Green'
|
2651
|
+
@p = para 'Shoes'
|
2652
|
+
end
|
2653
|
+
para s
|
2654
|
+
para s.contents
|
2655
|
+
para @p.parent
|
2656
|
+
end
|
2657
|
+
}}}
|
2658
|
+
|
2615
2659
|
= Elements =
|
2616
2660
|
|
2617
2661
|
Ah, here's the stuff of Shoes. An element can be as simple as an oval shape. Or
|
metadata
CHANGED
@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
|
|
4
4
|
prerelease: false
|
5
5
|
segments:
|
6
6
|
- 0
|
7
|
-
-
|
7
|
+
- 171
|
8
8
|
- 0
|
9
|
-
version: 0.
|
9
|
+
version: 0.171.0
|
10
10
|
platform: ruby
|
11
11
|
authors:
|
12
12
|
- ashbb
|
@@ -14,7 +14,7 @@ autorequire:
|
|
14
14
|
bindir: bin
|
15
15
|
cert_chain: []
|
16
16
|
|
17
|
-
date: 2011-02-
|
17
|
+
date: 2011-02-26 00:00:00 +09:00
|
18
18
|
default_executable:
|
19
19
|
dependencies:
|
20
20
|
- !ruby/object:Gem::Dependency
|
@@ -67,6 +67,7 @@ files:
|
|
67
67
|
- lib/shoes/projector.rb
|
68
68
|
- lib/shoes/ruby.rb
|
69
69
|
- lib/shoes/slot.rb
|
70
|
+
- lib/shoes/style.rb
|
70
71
|
- lib/shoes/text.rb
|
71
72
|
- lib/shoes/url.rb
|
72
73
|
- lib/shoes/widget.rb
|
@@ -178,6 +179,7 @@ files:
|
|
178
179
|
- samples/sample46.rb
|
179
180
|
- samples/sample47.rb
|
180
181
|
- samples/sample48.rb
|
182
|
+
- samples/sample49.rb
|
181
183
|
- samples/sample5.rb
|
182
184
|
- samples/sample6.rb
|
183
185
|
- samples/sample7.rb
|
@@ -233,6 +235,7 @@ files:
|
|
233
235
|
- snapshots/sample46.png
|
234
236
|
- snapshots/sample47.png
|
235
237
|
- snapshots/sample48.png
|
238
|
+
- snapshots/sample49.png
|
236
239
|
- snapshots/sample5.png
|
237
240
|
- snapshots/sample6.png
|
238
241
|
- snapshots/sample7.png
|