First REALbasic
Volume Number: 15
Issue Number: 11
Column Tag: Getting Started
by Erick J. Tejkowski
Develop powerful Macintosh and Windows
applications in minutes
After spending hours upon hours trying to perfect that "Hello, World!" code you
tediously typed into your favorite C++ compiler, you discover that a semicolon was
out of place. There must be a better way, you think. There is a better way and it goes
by the name of REALbasic.
REALbasic is a full-fledged visual development environment for 68k and PPC
Macintosh computers. With it you can construct sophisticated user interfaces, enter
some code, and compile Macintosh and Windows applications in a matter of minutes.
REALbasic is truly a revolutionary development product. In fact, REALbasic was named
the Apple Design Awards Product-of-the-Year for 1999. This article will give a brief
overview of REALbasic, the IDE, and show you how to write your first application in
only minutes.
Features
REALbasic is an Integrated Development Environment (IDE), which is just a fancy way
to say that it has all of the necessary components to build standalone executable
applications. Within REALbasic, you can build the interface for your application, enter
the necessary code, test and debug the code, and finally build the application. Although
this sounds a lot like other popular development environments, and in some ways it is,
REALbasic takes your development to new heights. The beauty and elegance of
REALbasic stems from the fact that it is a visual environment. What this means to the
beginner programmer is that you will already feel very familiar with REALbasic the
first time you use it. It behaves just like many other Mac programs you have used
before. More importantly, you construct much of your application by visually building
it within REALbasic. Remember the first time you gasped in awe at the amazing ease
and speed you altered your favorite applications with ResEdit? REALbasic continues in
this tradition. In the "old days" programmers had to build applications using only code.
Resources helped alleviate some of this tedium by using a graphical interface in which
to construct parts of an application, but code was still required to make use of the
resources, or for that matter to even make the resources appear on the screen.
REALbasic removes much of the need to code the interface of your application. Instead,
an application is built with drag-and-drop ease.
The first version of REALbasic included support for standard interface elements,
QuickTime playback, TCP sockets, Serial controls, and a plugin architecture. The
second and current version improves on each of these areas as well as adds an
exhaustive list of new features. To begin, REALbasic 2 adds eight new
Appearance-savvy controls, new QuickTime functions, including compression and
effects, improved Internet support, and expanded Apple Event support.
Perhaps the most clever of the new features is control binding, which allows you to
bind two controls together. This affords you immediate functionality without writing a
single line of code! For example, an EditField and a ListBox can be bound together,
resulting in the EditField automatically displaying the data from the selected row in
the ListBox.
International users of REALbasic will be pleased to know that REALbasic now supports
double-byte characters and complete localization features, which allow you to build
applications in a variety of languages with the click of a mouse.
The Professional version of REALbasic also includes a single-user relational database
engine and database connectivity to 4D Server, Oracle, Microsoft SQL Server,
OpenBase, dtf, PostgreSQL and any ODBC-compatible database engines. If all of this
weren't enough, you also get a Windows 95/98/NT compiler. Compile Windows
applications right on your Mac desktop without writing any additional code. Wow!
The IDE
The heart of the REALbasic IDE is the Project Window. The Project Window is a place
to organize the various parts of an application. These parts might include windows, a
menu, picture files, or any number of other items, which will be discussed shortly.
Figure 1 shows a Project Window with default items. This is what opens when you
first start REALbasic.
Figure 1.The Project Window.
REALbasic begins with a Menu and a Window in a project, which might be considered
the bare minimum for a Macintosh application. Adding items to a project can be
accomplished in different ways. First, use the FILE menu to add Windows, Modules,
Classes, Pictures, Sounds, Resources, and Databases to your project. Some menus
create new items in your project, while other items are added by importing them into
REALbasic. REALbasic also fully supports drag and drop. To add a picture file to your
project, for instance, you can drag a picture file directly from the Finder into the
REALbasic project.
Many of the items in your project can be created and edited directly within the
REALbasic IDE. Since REALbasic gives you a window by default, you need not add one to
start. Simply double click Window1 in the project window. A window will open on your
desktop. This is called the Window Editor. You can now add controls to your window.
Controls are found in the Tool Window. Simply drag a control from the Tool Window to
Window1. Go ahead and try it. Drag a PushButton from the toolbar to the open window.
You will notice that the PushButton appears highlighted upon addition to the window.
This means that the control is selected and its properties are currently being displayed
in the Properties Window. The properties window displays the various attributes of a
particular control. To alter the text on the PushButton, select it and change the Caption
property in the Properties Window.
Now, add a StaticText control. The control appears as a large capital letter "A" on the
toolbar. This control is a simple text control that does one thing (drumroll...) it
displays text. By default, the text property is "Label:". Select the StaticText control
you have added to the window and change the "Text" property to read "Hello, World!".
The IDE also has a Colors Window. This is a small palette to store frequently used
colors. Figure 2 demonstrates the Window Editor, Property Window, Colors Window,
and Project Window.
Figure 2.Some of the the various Editors in REALbasic.
Now that a control has been added to the window and the properties of that PushButton
edited, it is time to add code. Either double-click the PushButton or select the
PushButton and hit the "Return" key. A window called the Code Editor opens displaying
events on the left side of the window and code on the right. Since the PushButton was
selected, you are instantly transported to the Action event of PushButton1. The code
that appears within the Action event of the PushButton will be executed during
runtime when a user clicks the PushButton. For now, just enter the following code:
if staticText1.text="Hello, World!" then
statictext1.text="My dog has fleas.
else
staticText1.text="Hello, World!
end if
Figure 3 shows the Code Editor with code in the "Action" event of PushButton1.
Figure 3.The Code Editor.
Believe it or not, you have just completed your first application. To test your work,
select the Debug:Run menu. You will see your application. Click the button and watch
the text change. If your application doesn't work the first time, be calm. REALbasic
should show you where the error is. Recheck your code for typos and try to run it
again. When you are finished testing the application, select the File:Quit menu.
Having designed, coded, and tested the application; the final step is to compile it into a
standalone application. Select File:Build Application. The Build Application window
appears. Final settings for the application are made here. Select Macintosh format,
include 68K code, and enter a name for your application. For example, enter "My First
RB Application". Click "OK" and REALbasic builds a final application.
Now that you have learned the basics of putting together a simple application, let's
move on to something a bit more complex, but ultimately more useful. Learning to
program is a lot more fun if your program actually does something. Keeping this in
mind, I chose some code from Geoff Perlman at REAL software. The example we will
build is a movie editor of sorts. The finished application will allow you to import a
QuickTime movie, designate different scenes in the movie, and finally reorder the
scenes to view them in a different order. Geoff informs me that a method similar to
this is used by George Lucas himself when editing films.
Creating the Interface
Before starting this project be sure to download the latest version of REALbasic.
Version 2.1a19 was used to build this project.
The Movie Editor project makes use of three different windows. A movie editor
window, a clip editing window, and of course an About Box. Start the REALbasic
application. You will be presented with a new project that contains a window called
"Window1" by default. Select this window and adjust the properties to match Figure 4,
including the name that should now be "MovieEditor".
Figure 4.The MovieEditor window properties.
Now that the MovieEditor window has been made, it is time to add controls. Drag a
ListBox control from the toolbar onto the MovieEditor window and change the name of
the ListBox to "ClipList" and the remaining properties to match Figure 5. The
"ClipList" will display each of the clips you will make. This is also where you will be
able to rearrange the order in which the clips play.
Figure 5.ClipList Properties.
For the next step, add four buttons to the MovieEditor window. Enter the names
"RecordButton", "PlayButton", "UpButton", "DownButton" for each of the buttons.
Then, change the remaining properties of each button to reflect the settings shown in
Figure 6. Be sure to change the Caption property of each button to "Record", "Play",
"Up", and "Down" respectively. In addition, disable all of the buttons with the
exception of the "Record" button by turning off the Enabled property.
Figure 6.The MovieEditor PushButton settings.
Next, drag a MoviePlayer control onto the MovieEditor window and set the Top
property to 201 and the Left property to 13. Select the Controller setting for the
Controller property in the Behavior portion of the MoviePlayer properties. Lastly,
drag a Timer control onto the MovieEditor window. Set the Mode to 0 (zero) and the
Period to 5. Timer controls can be located in any position on the window, because they
are invisible controls. Two more controls have also been included in the sample
application. These two controls are GroupBox1 and GroupBox2. In this example, they
are strictly for improving the look and layout of the MovieEditor window. In some
cases, however, they are very important; for example, when used with RadioButtons.
Figure 7 shows what the finished layout should look like. This concludes the layout for
the MovieEditor window, so go ahead and close it now.
Figure 7.The completed MovieEditor window.
The second window involved in the Movie Editor application is the EditClip window.
This window, when finished, will allow a user to edit the individual settings of a
particular clip from the MovieEditor window. Drag three EditField controls to the
EditClip window and name them "ClipName", "ClipStart", and "ClipEnd". Add two
LittleArrows controls to the window, positioning one next to the ClipStart EditField and
the other aside the ClipEnd EditField. For now, leave them with the default names of
"LittleArrows1" and "LittleArrows2".
Next, drag two buttons to the EditClip window and name them "SaveButton" and
"CancelButton". Also, be sure to check the Caption properties of the buttons to reflect
the correct function of the button. Finally, add a Checkbox control entitled
"PreviewCheckbox" and a StaticText control named "TotalTime". To finish off the
appearance of the window, label each of the control using StaticText controls. Figure 8
displays the completed EditClip window.
Figure 8.The completed EditClip window.
The final window added to the project is called "About". It will contain a display picture
about the MovieEditor application. To add this graphic to your project, simply drag it
into the project window from the Finder, or add it using the appropriate menu from
the File menu. Once it has been added to the project, you can make it display in the
background of your About window by changing the Backdrop property of the About
window.
In addition to the windows that appear in your application, you will need menus. After
all, what's a Macintosh program without menus? To add menus to your program, open
the Menu Editor from the Project window. Select the File menu item in the Menu
Editor. The menu will expand and you will be able to add a menuitem at the bottom of
the list. Change the properties of the MenuItem in the Property Window just as you
have for all other properties. For this application, add an "Open" MenuItem. Set the
CommandKey property to a capital letter "O". This adds the Cmd-O keyboard shortcut
found in most Macintosh programs. To move the "Open" menu item to the top of the File
menu simply drag it into place. To finish the menus for this project add an "About
Movie Editor..." menu under the Apple Menu.
This concludes the interface-building phase of the MovieEditor project. Feel free to
experiment with the layout of your interface. This will give you a chance to see how
things work in REALbasic.
The Source Code
The next step in constructing the application is to add source code. Before you start
typing, though, it is a good idea to add necessary properties to each window. These
user-defined variables are within the scope of the parent window. All parts of the
window can access the properties directly. To add a new property, select Edit:New
Property. The properties for the MovieEditor window appear in Figure 9.
Figure 9.The MovieEditor properties.
The EditClip window also requires two properties. Add them by first opening the Code