Shoe-Laces(I)
How to get a grip on Shoes
This is my how-to-do-it guide to shoes,a small gui app building toolkit by _why. I first came across it when i was working on rubylearning.org. There a japanease teacher told me about the toolkit. He wrote a paper on how to build a mp3 player in shoes. Well i decided to give it a try. I tried _why Nobody knows shoes but soon found out it was not my type. So soon after I started to give the in built mannual a try but yet again was dissapointed because it after all was still a mannual no tutorial for me. So I started reading the mannual and taking notes. I developed some programs to understand the concepts myself. But then as always i felt an urge to write what i didn't have when i started. A how-to-do-it tutorial. So here is my attempt. Do give feed back.
Lesson one:- What is shoes
Shoes ultimatly is a tool kit to make gui apps in ruby. The thing that makes it distinct from other tool kits is that it makes the code look more ruby and less anything else. The tool-kit is inspired from the web, but its not really a web developing language (though people have written articals on how to do it with merb). You can make just about GUI using sheos and ruby. The beauty of the code lies in the fact that on the first look it looks more like and mathematical algorithm. So you can gather how easy it is to write an application.
I presume you have a fair knowledge of ruby programming language. If not go read some books on it like one at techotopia or take an online course at www.rubylearning.org.
Also I assume that you have to ruby and shoes installed. If not please read the instrutions on there sites
I am writing this on a (Arch) linux machine so I will presume your on a console (either *nix or dos). I dont really know how things work on OS X coz i have never used it so i won't comment.
Lesson two:- Getting it started
As this is a how-to-do-it tutorial lets get started. First of all the basic. A shoes app is essentially a loop on the shoes class. Something like this
Shoes.app do
alert("Hello")
end
OR
Shoes.app {alert("Hello") }
(Dont worry about the alert funtion yet i will explain it to you latter). What you just saw is the worlds smallest GUI hello world program. Now to run it just save it,by a name say file1.rb, open a console and type:-
$shoes /path/to/file1.rb
and it will give you an nice alert box helloing you. Now what did we gather from this is that a Shoes app is essentially a loop.
Lesson 3:-Some basic functions
Now as we have learned how to make a skelaten shoes app and run it, lets make something useful (at least useful enough to brag about it to friends). Now we will make a new file basic.rb, and start a new loop with some styling.Styles in shoes are basic attributes of the app window(like its title breadth and width). So lets set these
Shoes.app(:title => "A basic shoes app",:width => 200, :height => 200) do
end
(I prefer the do end blocks over the {} because it looks too c++ish,you are free for your choice)
When you run it you will be supplied with a neat 200x200 box (well nothing very facinating about it for seasoned programmer but for beginners it feels like they have just hacked a supercomputer). Now in this part I will sho(e)w you how to make a very basic app with only few funtions background,rgb,ask_color, gradient,button & alert. Bacially here is the synopsis in my way (refer to the manual for the formal synopsises)
button(caption_here){ working_here}
alert(caption_here)
background
ask_color()
gradient(int,int)
location()
confirm()
(the names are self explainatory i think)
Also we will be using some inbuild constants.
Our basic app will use these functions to answer the most basic questions and change some colors around.
1 Shoes.app(:title => "Basics of shoes",:width => 500,:height => 500,:resizable => false) do
2 background rgb(0,100,0)
3
4 border("paresh",:strokewidth => 50)
5 button("Quit") do
6 if confirm("Do you wanna quit")
7 exit()
8 end
9 end
10 button("Change Backgound color") do
11 color = ask_color("Give the color")
12 background color
13 end
14 button("Make gradient") do
15 color1=ask_color("Enter color # 1")
16 color2=ask_color("Enter color # 2")
17 background gradient(color1,color2)
18 end
19 button("Where am I") do
20 alert(location())
21 end
22 button("What am I using") do
23 alert("You are using shoes-#{Shoes::RELEASE_NAME}-#{Shoes::RELEASE_ID} with the subversive number #{Shoes::REVISION}")
24 end
25 end
You can get the source code from here.
Ok lets start by putting up the carcass of shoes app
Shoes.app(:title => "Basics of shoes",:width => 500,:height => 500,:resizable => false) do
This starts a shoes app loop with some initializations. We have passed the basics here the height, width, title and making the resizing flase (this is my personal intrest to make resizing false).
Now lets start by setting up the background
background rgb(0,100,0)
Now this is two new functions.
First is "background" which will set the background color.
We are passing the color generated by rgb to it.
rgb is a funtion which accepts red blue green values and generates the color code for it.
Next we make our first button
button("Quit") do
if confirm("Do you wanna quit")
exit()
end
end
a button in shoes is also essentially a loop. We pass the caption to the button (which is displayed on the button). And then pass a loop which is executed whenever the button is pressed.
Now for the loop we have passed. confirm pops up a Cancel-Ok dialog box. It returns true if ok is pressed returns false if cancel is pressed. If Ok is pressed we have exit() which exits the shoes app.
Moving on
button("Change Backgound color") do
color = ask_color("Give the color")
background color
end
Now we made another button to change the background color. ask_color pops up a small color panel where you can chose your fav color the funtion returns the color code which we have caught in color (this is the best thing about ruby I dont have to determine of what type color is , it is done by the interpretor!!). Then we pass color to background function which sets the background.
Now to move on
button("Make gradient") do
color1=ask_color("Enter color # 1")
color2=ask_color("Enter color # 2")
background gradient(color1,color2)
end
Again a new button to make a gradient. gradient function excepts two colors and generates a nice gradient from it. We get those colors from the user by the ask_color function. A gradient is essentially a type of background that can be applied. So we pass it to background function. You see its nice to see a gradient as a background.
To the next
button("Where am I") do
alert(location())
end
alert() is a function which pops up a small applet on the screen with text written on it(which is passed to it). location() gives us the location of the current app in the file structure. Combining these two we have created a popup box which gives us the location of program (neat isn't it)
Now for the las but not the least some constants
button("What am I using") do
alert("You are using shoes-#{Shoes::RELEASE_NAME}-#{Shoes::RELEASE_ID} with the subversive number #{Shoes::REVISION}")
end
These are just some constats we have predefined by shoes
Shoes::RELEASE_NAME - gives the release name of the shoes you are working on.
Shoes::RELEASE_ID - gives the release id
Shoes::REVISION - its the subversive release number.
So kids thats about it (don't forget to put and 'end' to the shoes loop).
Well in this lesson i have tried to get us some basic knowledge of how to use shoes buttons and alerts. May be (if i get enough responce == 2 or more emails and 7 or more comments by diffrent people) next time I will tell more about making a nicer app (may be a calculator).
Do write comments. Don't be too harsh this is my first attempt at making a ruby (or for that matter of any kind) tutorial and i am nervous about my way of presenting it.
Posts
