Tutorial
From REAL Software Documentation
Real Studio Tutorial
Welcome to the Real Studio Tutorial!
This Tutorial is for people who are new to programming and new to Real Studio. It will give you an introduction to the Real Studio development environment for the Desktop, lead you through the development of a real application, and show you what kinds of other applications can be built with Real Studio.
The complementary Web Tutorial creates the same Real Studio application, but as a Web application. Real Studio now includes a parallel path that leads you through the development of an application that can be deployed on the Web. If you work through both, you will find that the underlying foundation and framework are shared, but the tools for developing a user interface are specialized for the Desktop and the Web.
The Desktop Edition develops cross-platform applications that can be compiled for Windows, Macintosh, and Linux; the Web Edition also creates cross-platform applications that can be served on the Web via a Web server running on any platform. Users of a Web application use the it via their browser of choice.
The Enterprise Edition of Real Studio includes both the Web and Desktop Editions. The Web Edition is also sold separately, without a license to build Desktop applications. If you do not have a license for either the Web or Desktop edition, you can build Demo applications of the edition for which you are not licensed. A Demo application cannot be saved and will run for only a few minutes.
The Tutorial assumes that you have already completed the Quickstart. It should take you about an hour to complete this tutorial.
Note: If you have experience with other versions of the BASIC language or other programming languages, you’ll want to check out the User’s Guide.
Presentation Conventions
The Tutorial uses screen snapshots taken from the Windows, Macintosh, and Linux versions of Real Studio. The interface design and feature set are identical on all platforms, so the differences between platforms are cosmetic and have to do with the differences between the Windows7/Vista Aero interface, the Mac OS X Leopard interface, and the Linux Ubuntu distribution.
Italic type is used to emphasize the first time a new term is used and to highlight important concepts. In addition, titles of books, such as Real Studio User’s Guide, are italicized.
When you are instructed to choose an item from one of Real Studio’s menus, you will see something like “choose File ↠ New Project”. This is equivalent to “choose New Project from the File menu.”
The items within the parentheses are keyboard shortcuts and consist of a sequence of keys that should be pressed in the order they are listed. On Windows and Linux, the Ctrl key is the modifier; on Macintosh, the ⌘ (Command) key is the modifier. For example, when you see the shortcut “Ctrl+O” or “⌘-O”, it means to hold down the Control key on a Windows or Linux computer and then press the “O” key or hold down the ⌘ key on Macintosh and the press the “O” key. You release the modifier key only after you press the shortcut key.
Something that you are supposed to type is quoted. Some steps ask you to enter lines of code into the Real Studio Code Editor. They appear in a shaded box:
When you enter code, please observe these guidelines:
- Type each printed line on a separate line in the Code Editor. Don’t try to fit two or more printed lines into the same line or split a long line into two or more lines.
- Don’t add extra spaces where no spaces are indicated in the printed code.
Whenever you run your application, Real Studio first checks your code for spelling and syntax errors. If this checking turns up an error, Real Studio will direct your attention to the line of code that is causing problems. Check the line against the printed line. The Tutorial includes troubleshooting sections that help you handle syntax errors.
Getting Started
You’ll build an application that manages URLs and email addresses. A URL (which stands for Uniform Resource Locator) is the address of a web page that you type into the Address area in your web browser. This application will launch your default web browser application and display the web page that you entered. This illustration shows a URL in an internet browser’s Address area:
If you enter an email address instead of a URL, the application will launch your email application, create a new blank email, and enter the address into the “To” box. This application shows how to enter an email address into a browser’s Address area.
When you are finished, the application will look as shown below. The labels on the right indicate the types of controls that were used in creating the application. The functions of the controls are described in plain type on the left.
You use the TextField to enter the URL or email address you want and then click the Connect button. To save it in the list, you click the Add button. To select a URL in the ListBox, highlight it in the list and then click Connect. If you don’t need the URL any more, highlight it in the list and then click the Delete button. The application uses three types Real Studio controls to do most of the work for you:
- A ListBox is the type of control that holds scrollable lists. It can hold both single and multiple-column lists and scroll horizontally and vertically.
- A TextField is the type of control that holds a single line of text.
- A PushButton is a standard pushbutton. It is most often used to initiate an action (as it is here).
Creating the Interface
If you have not already done so, double-click the Real Studio application icon. If the Welcome screen appears, close it to get to the Real Studio IDE.
If you have a version of Real Studio that supports both Desktop and Web applications, you first need to choose a Desktop application for this Tutorial.
The New Project dialog appears. In the New Project dialog select “Desktop” as the template and click Choose.The Tutorial uses a desktop project to help you become familiar with the environment.
The Real Studio integrated environment (shown below) starts a new project and opens the initial Window Layout Editor.
The IDE uses a tabbed interface to display multiple editors in the same window. Real Studio displays the Window Layout Editor as the top panel in the IDE. You switch among the editors by clicking on the Tabs bar. Notice that a second tab for the Project Editor is already open. We will get to the Project Editor later. Your first task is to build the interface with the Window Layout Editor.
The editor for Window1 is shown below.
The Window Layout Editor is divided into three panes. The pane on the right is the Properties pane and it shows the properties of the selected item in the Window Editing area. In the screenshot above, the window is selected, so the Properties pane shows the properties of the window.
The center pane is the Window Editing area. It is where you design the window. In the screenshot above, the window is blank because you haven’t added any interface items yet. It shows only a default document window.
The pane on the left is the list of controls that you can add to a window. Above the list is a pop-up menu that controls the types of controls the list displays. When set to “Built-in Controls” it shows the complete list of built-in Real Studio interface elements. It contains items for the ListBox, TextField, PushButton, and many more. You add a control to a window by dragging it from the list to a location in the window.
|
Your application’s interface is now complete!
It should look like this.
Before going any further, save the project.
- Choose File ↠ Save (Ctrl+S or ⌘-S) and name it “URL Manager.”
At this point, you can actually try it out. Of course it won’t do anything since we haven’t told any of the interface elements what to do.
- Just for fun, click the Run button in the Main Toolbar.
Real Studio builds the application and opens it in its own window.
The first version of the application should look like this:
In this state, the PushButtons work — that is, you can click them and they highlight — but they don’t do anything because we haven’t told the PushButtons what to do when they’re clicked. You can enter text into the TextField — but it doesn’t go anywhere because there are no instructions to process this text. And the ListBox is all set to display and scroll items but we don’t have any way to get text into the ListBox yet.
Notice that the application has File and Edit menus. On Windows and Linux, the File menu has one item, Exit, that quits the application and returns to the Real Studio IDE. On Mac OS X, the Quit menu item appears in the application’s menu instead of the File menu.
The Edit menu has the standard Undo, Cut, Copy, Paste, Delete, and SelectAll menu items. Initially these items are all disabled, but you can enable them by entering and selecting text in the TextField.
|
Giving Objects Meaningful Names and Labels
You’ve already noticed that all the PushButtons use the default label “Untitled.” They also have default names like PushButton1, PushButton2, etc. Before getting too far into the project, we should give the objects meaningful names and labels. You refer to the object’s names in your code and, of course, the labels are presented to the user. You should give each object that you refer to in your code a meaningful name at the start of the project.
|
Making the URL Manager Do Something
Now that the interface is designed and its appearance is touched up, it’s time to make the controls do their jobs. We’ll start with the Connect button. You specify the action that a button carries out by writing some code that becomes a part of the button.
|
Since the TextField is named “SelectedURL”, you might think that we could write:
but that won’t work because “SelectedURL” is the name of the object itself. It has lots of properties — like its position in the window, whether it takes several lines of text or just one, whether it can accept styled text, and so forth. If you use “ShowURL SelectedURL”, Real Studio would have no idea what you mean. Besides, the ShowURL command only accepts a text string, not a control. When you need to refer to one of an object’s properties, you write the name of the object, followed by a dot, followed by the name of the property. In other words, you use this syntax: objectname.propertyname. It’s sometimes called “dot” notation. In this case, the TextField is named “SelectedURL” and the TextField property that we want is its “Text” property. This means the following expression accesses the contents of the TextField:
That is, “SelectedURL” is the name of the object and '“Text” is the name of the object’s property that we need.
|
If the Application Doesn’t Run
If Real Studio was unable to launch the debugging application, it’s because it couldn’t recognize a term you entered into the Code Editor. For example, if you misspelled either “ShowURL” or “SelectedURL,” Real Studio stops and points out the term it doesn’t recognize. Instead of compiling and launching the application, it opens a new “Issues“ tab in the IDE. It has one line per issue. For example, the following shows a spelling error.
The misspelled term is highlighted. Double-click the line to go to the editor with the error. In this case, Real Studio displays the Code Editor for the ConnectURL
Action event, shown above. The line that contains the error has a bug icon to its left.
Since it can’t find an object called “SelectURL,” it can’t create the application for you. Real Studio knows it would never be able to figure out what to do when a user clicks the Connect button. Be sure you’ve renamed the controls as described and referred to their correct names in the Code Editor. You’ll also get this error if you wrote “ShowURL SelectedURL “ and left off the name of the property that contains the contents of the TextField.
Another possibility is that you used the correct name in the Code Editor but did not rename the TextField using the Properties pane as shown at the beginning of this section.
In that case, the statement in the Code Editor as shown above ought to work, but there is no object named “SelectedURL” in the application. If you get an error message, start by checking the highlighted term. Now, we’ll make the other controls do their jobs.
The Add Button
The Add button is supposed to take the text in the TextField and add it to the end of the list in the ListBox. That’s easy.
|
Note: A method is a command that performs an action. Technically, ShowURL is a “global method” because it isn’t attached to any particular object. It can be called by any object that can call a method. We just happen to be calling it from a PushButton. (We could, for example, design the application so that ShowURL is called when the user chooses a menu item instead of clicking a button.)
Just as objects can have properties (like their name, size, position, and label), they can also have their own methods. AddRow is also a method but it “belongs” only to ListBoxes. It has a specialized action that only makes sense when applied to lists in ListBoxes.
The Delete Button
The Delete button removes the selected item in the ListBox. It’s also pretty simple.
|
In this case, we are calling the built-in RemoveRow method of the ListBox control. Instead of text, it needs the number of the row (line) to delete. The ListIndex property contains that number, so we pass that number to the RemoveRow method.
Note: If you place the insertion point in the RemoveRow term, the Tips bar will say that RemoveRow requires that an integer be passed to it.
The ListBox
The ListBox itself has the job of copying the item the user selects into the TextField so the user can connect to that URL or email address. You can easily do this by writing an assignment statement that runs when the user highlights an item in the list.
|
The ListBox’s Text property contains the text of the highlighted item. The Text property of SelectedURL contains the text that’s currently displayed. This assignment statement copies this text into the Text property of the TextField. The Text property stores the text that is displayed in the TextField.
Testing the Application
That’s the basics of the application. Now it’s time to test out all these features. Before you run your project again, you can ask Real Studio to check the project for errors or ways to optimize your application. You use the Analyze Project command. Analyze Project uses Real Studio’s compiler to review all of your code and identify any coding errors. It also offers suggestions on how to improve your application.
|
The application looks the same as it did, but all the controls work! For example, enter “http://www.realsoftware.com” into the TextField and click the Add button. Add a few other URLs to the ListBox in this manner and then highlight one in the ListBox to move it to the TextField.
You can:
- Enter a URL into the TextField and connect to the site using your default web browser.
- Add the URL to the ListBox.
- Select any URL in the ListBox to copy it into the TextField.
- Delete the selected URL in the ListBox.
If you want to send an email, enter it in the following way: mailto: username@domain.com
Using Autocomplete
One way to avoid using incorrect terms is to take advantage of Real Studio’s “autocomplete” feature. As you type, Real Studio tries to guess what you are typing. If you type the first few characters of a Real Studio language object — either built-in or a variable, method, or property that you created — it shows its guess in light gray type. If the guess is correct, press the Tab key to complete the entry.
If there is more than one possibility, Real Studio displays a contextual menu when you press Tab. Here is an example:
The user has just typed “ListURL.L” and pressed the Tab key. Real Studio displays a contextual menu with all the possible terms that complete the expression. Use the Up and Down arrow keys to navigate through the list and then press the Enter key (Return on Macintosh) to select the highlighted term.
The small icons to the left of the term tell you what type of object it is. In this case, the checkmarks indicate that the items are boolean properties and the 1’s indicate that they are integer properties.
How can the Application be Improved?
Although all the controls do their jobs, they try to do their jobs when it is inappropriate to do so. For example:
- If the TextField is blank, clicking the Add button adds a blank row to the ListBox
- Clicking the Connect button tries to open a non-existent URL.
We should make it impossible for the buttons to be clicked unless the conditions are right or, at least, give the user some appropriate feedback.
If SelectedURL.Text <> "" then
ShowURL SelectedURL.Text Else MsgBox "Please enter a URL or email address." End if There is no space between the double quote marks in the first line or between the less than and greater than signs. This code first tests to see whether the contents of the TextField is blank. The “<>” symbol means “not equal to” and the two quotes with nothing in between specify blank text. This If statement tests whether the TextField is not empty. If the TextField has text in it, the ShowURL method is called normally. The Else statement handles the case when the TextField is empty. If the TextField is blank, we use the MsgBox command to display a message box with an informative message. |
Next, we want to prevent the user from using the Add and Connect buttons if there is nothing in the TextField.
|
ConnectURL.Enabled=True
ConnectURL.Default=True
AddURL.Enabled=True
Else
ConnectURL.Enabled=False
ConnectURL.Default=False
AddURL.Enabled=False
End if
One thing you notice about this code is that the first line uses the pronoun “Me ” instead of the name of the control. “Me” always refers to the control the code belongs to; since we are inside the TextField, SelectedURL, “Me ” refers to SelectedURL. In other words, this line is the same as if we wrote If SelectedURL.Text.
- Choose Project ↠ Analyze Project to see if you made any syntax errors.
Fix any errors and, when all is well, proceed to test the application. - Click the Run button in the Main Toolbar to test it out.
When you first open the application, you can test the alert messages that you’ve put in each PushButton. Then add a URL and see how the application behaves. - When you’re finished, quit out of the test application and return to the Real Studio IDE.
If the Application Doesn’t Run
This section introduces the If…Else…End if statement. The Code Editor automatically indents the code within an If statement to make it easy to check your code. Be sure that your code is indented as shown in the instructions. Be sure there is an “End If” statement for each “If” and you didn’t type “Endif” instead of “End if”. Capitalization doesn’t matter, but the space between “End” and “if” does. Also, check that each line that begins with an “If” statement ends with “then”. Also, you should not leave a blank space between the double quote marks or between the less than and greater than signs.
Building A Standalone Application
Now that you have a finished version of the application, you’re ready to create a standalone application. The standalone version of the application runs just like the application you’ve been testing, but it doesn’t require the Real Studio application itself. It can be double-clicked from the desktop, just like a commercial application.
The Professional version of Real Studio can create standalone applications for the Windows, Macintosh, and Linux platforms. The Personal version of Real Studio builds standalone applications only for the platform on which the Real Studio IDE is running. It also allows you to build demo versions for the platforms on which Real Studio is not running. A demo version is fully functional but quits automatically after five minutes.
Building Your Application
Building a stand-alone version of your project as an application couldn’t be easier than it is in Real Studio.
|
Customizing the Standalone Application
Before building a standalone application, you can set several options. For example, you can change the application’s name and build for other platforms.
You can choose the platforms on which you build your application in the Build Settings dialog box.
|
What’s Next
The Tutorial shows how easy it is to develop a simple application. But there is much more to Real Studio. As hinted in the Project Editor, Real Studio includes a Menu Editor and can support multiple windows of different types.
Real Studio now includes both Desktop and Web integrated development environments (IDE). This Tutorial introduced you to the Real Studio IDE with the focus on the Desktop Edition. It builds cross-platform Desktop applications.
The Web Tutorial builds the same application, but as a Web application. It can be served by a web server on any platform and users of the application interact with it over the internet via the web browser of their choice. If you want to check out the Web Edition, work through that tutorial as well.
Real Studio is a fully object-oriented development system. With it you can create classes (reusable objects) that encapsulate custom functionality. You can add them to the project so that they can be reused in many places in the project and save them to disk. In the User’s Guide, you will learn about the object-oriented development system in detail. The Language Reference is a comprehensive listing of all the programming elements in the Real Basic language.
Also, be sure to check out the example projects that ship with Real Studio and the Real Studio web site at http://www.realsoftware.com for other tutorials and how-to’s.



