Home
Programming Home

Squares (1)

 

(tutorialsnext page)

Goal

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.

Starting up

At startup Revolution looks like this (version 2.1):

startupscreen

The palette at the left is the tools palette.

I will highlight a tool with a slight blue tone like this: 

palette
The button tool highlighted.

The tools palette has several sections:

palette buttons palette palette palette palette
run-develop buttons fields menus graphics media

The top two tools decide whether you are

or

For now, you should have the selection tool selected.  When it is selected it should be slightly darker (selection tool) than the other tools.

Creating a New Program

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:  File—>New Mainstack

mainstack menu

That produces:

new mainstack

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:  Object—>Stack Inspector

stack inspector menu 

and then this panel shows up:

inspector panel

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:

Squares name

Save your work:  File—>Save as...  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.

Creating the objects

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.

The Application Browser

There is a very nice tool called the Application Browser  that you can call up from the tools menu:  Tools—>Application Browser.  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.

(tutorialsnext page)

Valid XHTML 1.0 StrictValid CSS

next planned revision: