Skip to content

Commit 3d9b462

Browse files
ashbbashbb
committed
Backup README original file.
1 parent 8a9bdcc commit 3d9b462

File tree

1 file changed

+267
-0
lines changed

1 file changed

+267
-0
lines changed

‎README_orig.md‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
This is the copy of original web site written by **\_why**: http://shoooes.net/tutorial/
2+
3+
It's now gone. :(
4+
5+
![000.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/000.jpg)
6+
7+
THE TUTORIAL WALKTHROUGH
8+
========================
9+
10+
An introduction to SHOES. Code and graphical pairs.
11+
12+
Okay, so, a simple Shoes program.
13+
14+
![001.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/001.jpg)
15+
16+
(And again, or in case you've just arrived: Shoes is a graphics toolkit for writing colorful apps using the Ruby programming language ? which is built into Shoes.)
17+
18+
Shoes.app { button "Push me" }
19+
20+
You can just save the program in a file called little.rb and open it with Shoes.
21+
22+
The braces { and } are a kind of container. The button is "in" the app.
23+
24+
----------------------
25+
26+
![002.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/002.jpg)
27+
28+
We can place a few buttons in a stack.
29+
30+
Shoes.app {
31+
stack {
32+
button "A bed of clams"
33+
button "A coalition of cheetahs"
34+
button "A gulp of swallows"
35+
}
36+
}
37+
38+
Stacks are essential! The most important two elements in Shoes are *stacks and flows*.
39+
40+
----------------------
41+
42+
43+
![003.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/003.jpg)
44+
45+
Okay, let's give the stack a bit of a margin. Scoot it out from the edge.
46+
47+
Shoes.app {
48+
background white
49+
stack(:margin => 8) {
50+
button "A bed of clams"
51+
button "A coalition of cheetahs"
52+
button "A gulp of swallows"
53+
}
54+
}
55+
56+
Also painted the background white. Did you see that?
57+
58+
----------------------
59+
60+
![004.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/004.jpg)
61+
62+
Time for something new. Artwork. Drawing.
63+
64+
Shoes.app {
65+
oval :left => 10, :top => 10,
66+
:radius => 40
67+
}
68+
69+
The Shoes brush always starts out black.
70+
71+
Notice that while buttons just dropped into the window, we drew the circle at a specific place. At 10 pixels from the left edge of the window and 10 pixels below the top edge.
72+
73+
----------------------
74+
75+
![005.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/005.jpg)
76+
77+
Now, a rectangle and an arrow.
78+
79+
Shoes.app {
80+
fill red
81+
rect :left => 10, :top => 10,
82+
:width => 40
83+
arrow :left => 30, :top => 60,
84+
:width => 40
85+
}
86+
87+
88+
The fill is red on these shapes. And the stroke is black. (Because we didn't change it.) These two pens - stroke and fill - draw every shape.
89+
90+
----------------------
91+
92+
Of course, you can always design your app with images. Even images from the web!
93+
94+
Shoes.app {
95+
image "http://shoooes.net/images/nks-kidnap.png"
96+
}
97+
98+
![006.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/006.jpg)
99+
100+
Shoes even caches images in memory and on disk, like browsers do. Images are loaded in background threads as well, to prevent apps from slowing down.
101+
102+
----------------------
103+
104+
Now, a very important element: the para. As in: paragraph. Probably the third most important element (after stacks and flows.)
105+
106+
Shoes.app {
107+
para strong("Q."), " Are you beginning to grasp hold of Shoes?"
108+
}
109+
110+
![007.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/007.jpg)
111+
112+
----------------------
113+
114+
Beyond para, you've got title and subtitle, which are bigger fonts. You can add a bunch of font styles as well. Look for strong and em in this bit.
115+
116+
117+
Shoes.app {
118+
stack(:margin => 6) {
119+
title "A Question"
120+
para strong("Q."), " Are you beginning to grasp hold of Shoes?"
121+
para em(strong("A."), " Quit pestering me, I'm hacking here.")
122+
}
123+
}
124+
125+
![008.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/008.jpg)
126+
127+
----------------------
128+
129+
![009.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/009.jpg)
130+
131+
Keep track of stuff by naming them as variables.
132+
133+
Shoes.app {
134+
@push = button "Push me"
135+
@note = para "Nothing pushed so far"
136+
}
137+
138+
----------------------
139+
140+
![010.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/010.jpg)
141+
142+
You can then put the variables into action. When the button is clicked, the @node changes to the message shown in the picture.
143+
144+
Shoes.app {
145+
@push = button "Push me"
146+
@note = para "Nothing pushed so far"
147+
148+
@push.click {
149+
@note.replace "Aha! Click!"
150+
}
151+
}
152+
153+
----------------------
154+
155+
![011.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/011.jpg)
156+
157+
See if you can figure out this one. How does the gradient work? How are the letters styled?
158+
159+
Shoes.app do
160+
background "#F3F".."#F90"
161+
title "Shoooes", :top => 60,
162+
:align => "center",
163+
:font => "Trebuchet MS",
164+
:stroke => white
165+
end
166+
167+
In this example, I used do and end rather than the braces. Same meaning.
168+
169+
----------------------
170+
171+
![012.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/012.jpg)
172+
173+
Aha, here's a flow. It keeps the text box and the button side-by-side.
174+
175+
Shoes.app do
176+
background "#EFC"
177+
border "#BE8", :strokewidth => 6
178+
stack(:margin => 12) do
179+
para "Enter your name"
180+
flow do
181+
edit_line
182+
button "OK"
183+
end
184+
end
185+
end
186+
187+
----------------------
188+
189+
![013.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/013.jpg)
190+
191+
In this one, we make a five-point star. And it follows the mouse around as you move.
192+
193+
Shoes.app do
194+
@shape = star :points => 5
195+
motion do |left, top|
196+
@shape.move left, top
197+
end
198+
end
199+
200+
----------------------
201+
202+
On to a taste of animation. The Shoes icon moves randomly a bunch of times each second.
203+
204+
Shoes.app do
205+
@shoes = image "http://shoooes.net/shoes.png",
206+
:top => 100, :left => 100
207+
animate do |i|
208+
@shoes.top += (-20..20).rand
209+
@shoes.left += (-20..20).rand
210+
end
211+
end
212+
213+
214+
![014.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/014.jpg)
215+
216+
----------------------
217+
218+
![015.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/015.jpg)
219+
220+
Remember a few examples ago when we handled a button click? How about doing the same with a link?
221+
222+
Shoes.app {
223+
@poem = stack {
224+
para "
225+
My eyes have blinked again
226+
And I have just realized
227+
This upright world
228+
I have been in.
229+
230+
My eyelids wipe
231+
My eyes hundreds of times
232+
Reseting and renovating
233+
The scenery."
234+
}
235+
236+
para(link("Clear").
237+
click { @poem.clear })
238+
}
239+
240+
So, when the link gets clicked, the stack gets emptied. The poem will disappear.
241+
242+
----------------------
243+
244+
![016.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/016.jpg)
245+
246+
Okay, last one for now. Let's generate a hundred random circles. This example also uses the rgb method to make colors from red, green and blue fractions.
247+
248+
Shoes.app(:width => 300,
249+
:height => 400) {
250+
fill rgb(0, 0.6, 0.9, 0.1)
251+
stroke rgb(0, 0.6, 0.9)
252+
strokewidth 0.25
253+
100.times {
254+
oval :left => (-5..self.width).rand,
255+
:top => (-5..self.height).rand,
256+
:radius => (25..50).rand
257+
}
258+
}
259+
260+
Don't worry if you haven't picked up a whole lot reading through these. To get the hang of it, you'll need to alter these yourself. Try fiddling with the numbers and colors. Experiment, you know?
261+
262+
----------------------
263+
264+
![017.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/017.jpg)
265+
266+
Ready for more? See the [manuals](http://shoes.heroku.com/manual/Hello.html) page for a pair of longer instructions. Particularly the guide book [Nobody Knows Shoes](http://cloud.github.com/downloads/shoes/shoes/nks.pdf), which teaches the ten essential commands to get going with Shoes.
267+

0 commit comments

Comments
 (0)