Guide Contents |
A First program
Here we show how to create a primitive application with just one line of code.
The program converts a number of inches (entered in a text field) into cm (displayed on a label).
There are approximately 2.54 cm in an inch.
A button initiates the calculation.
The point of this example is to introduce you to the code that foxGUIb creates, and ways adding your code to it. Please
note that it is not a 'good' program, mainly because we are not using layout techniques properly.
Those come in the second example.
As this is a first program, the steps are described in detail - but it takes longer to read
through the steps than to actually carry them out.
Here we go:
Create a directory for the program before running foxGUIb. (e.g Inches)
In foxGUIb, select Main -> Change Working Directory... , and browse to Inches.
Select Main -> New MainWindow. A small design window opens, where your
widgets will be placed. This is an exact representation of your eventual
program, so (when you become more experienced), you will be able to experiment with
widgets and layouts.
Click the Button icon in the central widget selector area. A button appears on MainWindow.
Its name can be changed at the top of the properties area. Rename it to convertButton.
Its properties can be changed. Check the text= item to unlock it, and enter Convert to cm. Note that
it appears on the actual button.
Now add a text field, and rename it to inchesField
Add a label, rename it to cmLabel, and clear the text property. (The names are your choice - follow
whatever naming convention you wish.) The design window looks like:
The gui is now complete. We now need to add code to do the calculation when the button is clicked. This
can be done outside of foxGUIb (by e.g. extending the class), or conveniently (for a small app)
inside foxGUIb. We will do the latter. The extending approach is described later.
In the widget tree at the left, select convertButton, than select View -> Event editor.
Uncheck the Show All Events checkbox to see relevent button events, and select the SEL_COMMAND option.
The program is complete. Now it can be saved.
In fact, there are two items to save: the description of the GUI, and the code you will run. The description
(referred to as the 'layout')is needed so you can revisit the design and modify it.
You can now exit from foxGUIb if you wish.
Save the design via Main -> Save Layout As... . You should be in the Inches directory.
Modify the suggested filename to e.g Inches.rbin
Save the code: choose Code Generator -> Ruby Generator
Select Top-most Widget, and Ruby Class. Choose a class name - e.g. Inches, and click Browse. In your
chosen directory, choose a filename of e.g Inches.rb. Click OK to save the code.
Here is a listing of the generated code. It is around 50 lines long, but
we only wrote one of them.
Run the file Inches.rb to see your program in action. It looks like:
You will need to enlarge its window to
see all the widgets. We look at sizing and layouts later.
You may have noticed...
You can select widgets either in the tree, or by clicking them on the design window.
In either case, they are highlighted in blue.
The widget tree allows you to delete a widget via right-click. Alternatively, you can right-click on
most widgets in the design window to get similar facilities. The other possibilities are explored
Selecting a widget in the design window allows direct modification of some
of its properties. For example, you can type text into a text field, or set the state of a radio button. Of course, the properties can also be modified via foxGUIb as well. Explore!
Extension - a better approach
In the above example, the event code - which did the work - was mixed in with code
which sets up the GUI. You may want to separate these activities. In Ruby, you can
add code to an existing class by means of a separate file. This is termed 'extension'.
Here is how we can use extension.
Work through the above example, but do not insert any event-handling code. To allow us to differentiate the code
in this tutorial, save it as InchesX.rb.
Now, with your favourite Ruby editor (or any editor, in fact), create a file named
(e.g) ExtendInches.rb, which contains:
cmLabel.text=(inchesField.text.to_f * 2.54 ).to_s
end # of events
Run the above file. Done!
The 'unit test' code can be copied from InchesX.rb (which is identical to Inches.rb, but with no event-handling)
Note the event code. Any number of events can be handled in the init method.
Instead of extending, we might choose to inherit. The @topwin variable holds the topmost parent.
Every widget is accessible as an instance variable.