REALbasic in Action
|Figure 1. New Project Screen: When you first launch REALbasic, it defaults to a new blank project.|
To demonstrate how REALbasic works, let's dig into a simple project that adds user text to a listbox. You can download a demo version of REALbasic
for your platform of choice and follow along. Because the REALbasic IDE is itself written in REALbasic, it is a good example of a cross-platform application using REALbasic.
Start REALbasic and it will default to a new blank project (see Figure 1). Along the top of the IDE is a toolbar with customizable controls for common tasks such as save, run, and build. In the same area, you can also create bookmarks for places in your code and search the code without having to go to another dialog. Just below the main toolbar is a tab control. By default, the only tab is the project tab, which contains a listing of all the objects in the project, a properties list, and another mini toolbar for creating new objects.
|Figure 2. Form Editor: Selecting a control from the list on the left and dragging it onto the window creates an instance of the control on the window.|
Double click on the Window1 object and REALbasic creates a new tab called Window1. This is the form editor, and on its left you'll see a list of all the controls you can drag onto a window (see Figure 2). A convenient popup menu above the controls list lets you see All, Native RB, Plugin-In, Project, and Favorite controls. On its right is a properties list.
Selecting a control from the list and dragging it onto the window creates an instance of the control on the window. For this project, drag an editfield, pushbutton, and listbox onto the window. Notice that the properties list changes as you drop each control onto the window.
Click on PushButton1 and change the caption property to "Add To List." Set the default property to true. The caption is a little big for the button so grab the handles on the button to make it wider. When you change the width by hand, you'll notice that the width property in the position section changes. You can also change the width in the properties list manually and it will change on the form editor.
|Figure 3. Using the Code Editor: The code editor offers multiple autocomplete items.|
So far you've only played with control properties; you haven't touched any code. Double click on Pushbutton1 and another tab populated with the code editor will appear. Along the left of the page is a list of controls and event handlers for the current object (Window1). All events available for each control are listed and most are self-explanatory. Because you double-clicked on Pushbutton1, the editor automatically selected the Action event. Most of the time, the editor will open to the event used most often with a particular control, which for PushButtons is Action (i.e., they are pushed).
Customizable buttons along the top of the code editor (see Figure 3) let you add new items such as menu handlers, methods, and properties, and perform tasks such as comment lines of code. Depending upon the object, you can add your own event definitions, structures, and enums.
Coding in "Autopilot"
For the Action event of Pushbutton1, you will add the text from EditField1 to Listbox1. For bigger projects, I recommend better naming conventions! When you start typing in the code editor, a grey ellipsis (...) appears after the text you've typed to indicate there are multiple items it can autocomplete. When the ellipsis appears, pressing tab will pop up a selectable list of all possible solutions. As you keep typing, the list narrows to fit what you type (see Figure 4).
|Figure 4. Autocomplete Heaven: REALbasic's autocomplete features make it easy to learn for novices and easy to use for professionals.|
Select Listbox1 and press period. The ellipsis appears; so press tab and a list of all available properties and methods will appear in a popup menu.
Another helpful feature is the autohelp, which appears at the bottom of the window. Autohelp shows the function call as well as the inputs and outputs of the function. Between autocomplete and autohelp you'll spend less time documenting and more time creating usable software.
|Figure 5. Debugging Code: REALbasic's debug application starts automatically after error-free code compiles.|
Back to Work
You'll use the following code in your Pushbutton1.Action event:
listbox1.AddRow = editfield1.text
This adds a row of text to the listbox equal to the text that's in the editfield. Now click on the Run button at the top of the window to start debugging your application. The compiler will give you an error list. Depending upon a preference setting, you can see multiple errors or just one.
|Figure 6. Testing Code: Adding special characters such as "!" test REALbasic's Unicode handling.|
In this case, you have only one error. Double-clicking on the error message takes you to the offending line of code. This error is a really simple one: AutoHelp at the bottom of the window tells you it's a method call. The code should be:
Change the code and click Run again. This time, it compiles cleanly and the debug application starts up (note the .debug in the application name). See Figure 5.
Type some text into the editfield and either press Enter/Return or click the Add to List button. You can get tricky and add special characters into the field to test REALbasic's Unicode handling (see Figure 6).