| Home Programming Home |
Squares (1) |
Introduce Revolution: interface, tools, development.
Note: we use Revolution version 2.1 (but note that significant changes have been made to the user interface since this version!)
We will create a program than computes the square of a number that the user types in an input field. The most boring program in the world.
At startup Revolution looks like this (version 2.1):
The palette at the left is the tools palette.
I will highlight a tool with a slight blue tone like this:
 |
| The button tool highlighted. |
The tools palette has several sections:
 |
 |
 |
 |
 |
 |
| run-develop | buttons | fields | menus | graphics | media |
The top two tools decide whether you are
, the browse tool)or
, the selection tool).For now, you should have the selection tool selected. When it is selected it should be slightly darker (
) than the other tools.
The first thing to do when you write a new program is to "create a new mainstack". The word stack is a leftover from the days when Revolution was derived from Hypercard: Hypercard considered everything a "stack of cards", and you put your data and buttons on cards.
Revolution can have a program with multiple stacks in it, one of which must be the main one. Don't worry about these terms, just think of a mainstack as if it were a program.
You create a new main stack from the File menu:
That produces:
OK. That's your first object : the mainstack. It does not do anything and is not even saved anywhere.
What you need is the palette that lets you adjust the properties of an object. It is called the inspector, and you activate it from the Object menu:
and then this panel shows up:
It is the property inspector. With it you can set the many properties of an object.
The inspector has many modes which you can choose by clicking the pop-up menu:
First, let's give the program a name: let's call it Squares. Type that name into the name box:
Save your work: and save the program with the name Squares (you could choose a different name, but in this case that would be unwise). Find where the program was saved; it should be a file called Squares.rev.
We want to have one button and two fields: we will type a number into one of the fields, click the button and that will make the square of the number appear in the other field.
The button first: click the button tool in the tools palette once, then drag a rectangle in the program window:
Note that the button has 8 little red squares around its edges: one for each corner and one in the middle of each edge. These are called the resize handles. They may have a different colour in your version of Revolution. You can reshape the object by these handles, to move the corners or change the width or height.
The property inspector has now adapted itself to the fact that a button is selected:
We'll name the button "Compute" (type the name in the name field of the inspector and press enter) Make it a nice size and put it in the middle of the window.
Now we make the two fields. Select the field tool from the tools palette:
Drag a rectangle on the program window. Do this again to make the second field. You have to select the field tool once for each field you draw. (Note: this is no longer the case in Revolution version 2.7, but never mind, that's not very important here.)
Alternatively you can copy-paste the field, which will give you the second field on top of the first and you can then drag it to its position.
Click on the top field to activate it, then use the inspector to call it Number. Click on the bottom field and call it Square.
The fields Number and Square are containers: they can hold values.
There is a very nice tool called the Application Browser that you can call up from the tools menu: . It looks like this:
In the left pane you see the large objects: there is the mainstack itself, called Squares. Its icon looks like a miniature window. There is a small grey triangle to the left of it — you may have to open that by clicking on it. It will then show the card that is the only card in the mainstack (forget about what cards are for the time being). In this case the card is called card id 1002 but that's irrelevant at this stage.
If you click that card icon, you will then see all the buttons and fields in the pane on the right hand side: there is one button called Compute and two fields called Number and Square. You also see that the number of script lines for each object is 0.
And this is where we're now going to be hugely different from programming in BASIC: we will do object-oriented programming instead of procedural programming.
Save the work you have done.
