Beginning REALbasic - From Novice To Professional (2006)

56	C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

Figure 2-17. Using the REALbasic Language Reference to learn about programming language keywords, as shown here on Mac OS X.

At the top of the Language Reference dialog, you can see Forward and Back buttons that let you navigate through the data you’ve viewed while using this dialog. The Home button returns back to the listing of categories you see when the Language Reference first opens. Just to the left of the Home button is the Location area. The Location area is used to locate information about a REALbasic object, such as a PushButton or EditField. As you start to type in the name of an object, REALbasic attempts to help you by anticipating the name of the object you are typing and displaying this text in light gray. To accept the REALbasic suggestion, press Tab. If REALbasic has more than one suggestion, it displays three gray dots. To view REALbasic’s suggestions, press Tab and a pop-up menu appears, enabling you to use your keyboard’s up and down arrows, and Enter or Return to select the appropriate choice.

To the right of the Location area is the Search area, which you can use to perform a keyword search on any term. In response, REALbasic displays a list of matching topics from which you can select, as Figure 2-18 shows.

C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T		57

Figure 2-18. Searching the REALbasic Language Reference for information on errors, as shown here on Mac OS X.

Building a Custom Web Browser

One of the goals of this book is to ensure that you get the opportunity to create a new application in every chapter. So, before wrapping up your work on this chapter, take a few minutes to develop your next REALbasic application.

To help streamline presentation, the demonstration of how to build this application is done entirely using REALbasic for Windows. As a result, some minor tweaking may be required to ensure it will run on Macintosh and Linux. Specifically, you may need to resize and adjust the location of controls a bit to make sure they display correctly on other versions of REALbasic.

58	C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

■Note This application uses REALbasic’s HTMLViewer control to create a custom web browser. This control is different than most other REALbasic controls in that it depends on other software being installed to work correctly. For the RB Book Browser application to run on Windows, Internet Explorer (IE) must be installed. To run the RB Book Browser application on Mac OS X, the Apple WebKit must be installed. Mac OS X’s default browser, Safari, also uses the Apple WebKit to run. To run on Linux OS, the Mozilla browser must be installed. While you can count on your Windows and Mac OS X users to have the required software already installed on their computers, you cannot count on all your Linux users having Mozilla installed. As you can see, crossplatform application development is a challenge.

The RBBookFinder Browser

The RBBookFinder Browser, shown in Figure 2-19, is a custom-designed web browser designed to assist the user in locating computer and Information Technology (IT) books on the Internet.

Figure 2-19. A look at the finished RBBookFinder browser application

As you learned in Chapter 1, you typically follow a distinct series of steps in the development of a new REALbasic application. These steps include developing the application’s interface, modifying window and control properties, adding program code, and application testing. You follow this same basic design process as you work your way through the creation of the RBBookFinder Browser.

■Note As you work your way through the development of the RBBookFinder browser application, focus on your interaction with the IDE and its various components. The development of the RBBookFinder Browser involves little program code and, for now, you should simply type in program statements as instructed.

C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

59

Designing the User Interface

The first step in creating the RBBookFinder browser application is to create its GUI. You begin this process by double-clicking on the Window1 item on the Project screen tab. This opens the Window Editor, which you will use to design your application’s GUI.

For starters, click the Window1 window and use the resizing handles to reposition and increase the window’s size until it takes up most of the space in the window area, as Figure 2-20 shows.

Figure 2-20. Increasing the size of a window in the IDE can make it easier to work with and modify.

Just to the left of the Window Editor is the Controls pane. To build the RBBookFinder browser application’s GUI, you need to drag-and-drop the appropriate controls on to Window1. Begin by dragging-and-dropping an instance of the HTMLViewer control on to Window1, and then resize it, so it takes most of the available window space, as seen in Figure 2-20. Note, by default, the name assigned to this control is HTMLViewer1. This control is used to display web pages. In the IDE, the HTMLViewer control does not look exactly like the display area for a

web browser. Once completed, however, the control’s appearance changes and displays as you would expect.

60	C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

■Note An HTMLViewer control is a control that functions as the display area in a web browser.

Add three PushButtons controls to Window1, placing them side by side, just above the upper left-hand corner of the HTMLViewer1 control. Note, by default, the names REALbasic assigned to each of these controls are PushButton1, PushButton2, and PushButton3. These three buttons are used to load the URLs of specific online book retailers.

Now, add an EditField control just to the right of the PushButton3 control. Note that REALbasic assigns it a default name of EditField1. This control is used to provide users with the capability to specify any URL they want to visit. Then, add another PushButton control to the right of the EditField, which REALbasic automatically names PushButton4. This control is used to initiate the loading of a URL that is manually entered into the EditField1 control by the user.

Finally, to help make the application a little more user-friendly, add two StaticText controls, placing the first one over the set of three PushButton controls and the second one over the EditField1 control. In the next section, you will add descriptive text into these controls to provide the user with instructions on how to work with the RBBookFinder browser application.

At this point, the basic design of the user interface for the RBBookFinder browser application is complete and should look something like the example in Figure 2-21.

Figure 2-21. Finishing the development of the RBBookFinder browser application’s GUI

C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

61

Go ahead and give the application a test run by clicking the Run icon located on REALbasic’s Main toolbar. As you can see, the application doesn’t do anything yet. You can fix that a little later by adding a little program code to the window and various controls. Also note, the application’s window is too small to effectively display the content presented at most websites and it currently lacks the capability to provide the user with the capability to increase its size.

Changing Windows and Control Properties

The next step in creating the RBBookFinder browser application is to modify properties associated with Window1 and the controls you placed on it. As you learned when you created the Hello World! application in Chapter 1, you modify the properties belonging to any window or control by selecting it, and then entering a new property value into the appropriate property field in the Properties pane. Table 2-2 provides a list of property changes that need to be made to Window1 and controls that make up the RBBookFinder browser.

Table 2-2. Property Modification for the RBBookFinder Browser Application

Object	Property	Value
Window1	Title	RBBookFinder
	Resizable	Enabled
	MaximizeButton	Enabled
HTMLViewer	LockLeft	Enabled
	LockTop	Enabled
	LockRight	Enabled
	LockBottom	Enabled
PushButton1	Caption	Amazon.com
PushButton2	Caption	BN.com
PushButton3	Caption	Bamm.com
EditField1	LockLeft	Enabled
	LockRight	Enabled
PushButton4	Caption	Load
	LockRight	Enabled
StaticText1	Text	Find Your Book At One Of These Stores:
StaticText2	Text	Enter URL:

By setting, or enabling, the Resizable property for Window1, you give the user the capability to resize the RBBookFinder browser application to any size they want. By selecting the MaximizeButton, you tell REALbasic to add a corresponding maximize control to your application.

62	C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

By default, the HTMLViewer1 control retains its size when the user resizes the RBBookFinder browser application. In other words, while the application’s user interface may get larger or smaller, the size of the HTMLViewer1 control does not change. This is not what you want. Instead, what should happen is this: the size of the HTMLViewer1 control should increase or decrease as the user resizes the application. Setting the LockLeft, LockTop, LockRight, and LockBottom properties of the HTMLViewer1 control accomplishes this by telling REALbasic to lock the four corners of the HTMLViewer1 control in relation to their current location to each side of the window that contains them. So, if Window1 is resized, the HTMLViewer1 control is proportionally resized as well. Similarly, you also need to set the LockLeft and LockRight properties for the EditField1 control, and the LockRight property of PushButton4.

Changing the Caption property for each of the application’s PushButton controls labels each control, so the user will know what they represent. In the case of the RBBookFinder browser application, they are links to various online bookstores. Note, you need to resize the PushButton controls and the StaticText controls as you modify them to ensure everything fits together and the controls do not overlap one another. Once you finish modifying property settings and making any adjustments to the size of controls, the end result should be that your application’s user interface looks like the example you saw in Figure 2-19.

Adding a Little REALbasic Code

Now that you have designed the GUI for the RBBookFinder browser application, it is time to add the programming logic to make it do something, specifically to make it work like a web browser.

The first thing the RBBookFinder browser application should do is display a default website when it starts up. For this application, the default website is www.apress.com. To accomplish this action, you need to set up a code statement that will execute when the application initially opens. This is done by double-clicking Window1. In response, REALbasic opens the Code Editor. As you can see, REALbasic automatically expands the tree shown in the browser pane to show the Open event for the window. Any code associated with the Open event executes the moment the application opens. Now, enter the following code statement:

HTMLViewer1 LoadURL "http://www.apress.com"

This statement tells REALbasic to execute the LoadURL method belonging to the HTMLViewer class. In short, this statement loads the specified URL into the HTMLViewer1 control.

C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

63

Next, you need to add program statements for each PushButton control. Begin by drilling down in the tree shown in the browser pane by expanding the Controls branch, followed by the PushButton1 control. Locate the Action event, and then enter the following code statement:

HTMLViewer1.LoadURL "http://www.amazon.com"

This statement tells REALbasic to load the URL specified in the HTMLViewer1 control. Next, locate the Action event for PushButton2 and enter the following code statement:

HTMLViewer1.LoadURL "http://www.bn.com"

Locate the Action event for PushButton2 and enter the following code statement:

HTMLViewer1.LoadURL "http://www.bamm.com"

Next, you need to add a programming statement that executes when the user clicks the PushButton with the Load caption. To do this, locate the Action event for PushButton4 and enter the following code statement:

If Instr(EditField1.Text, "http://") = 0 Then

HTMLViewer1.LoadURL "http://" + EditField1.Text

Else

HTMLViewer1.LoadURL EditField1.Text

End If

These statements tell REALbasic to load the URL entered into the EditField1 control (for example, the control’s Text). If the user does not begin the URL with http://, these statements automatically add it to the beginning of the URL string.

Testing Your Application

If you have not done so, go ahead and save your application by clicking the File menu and selecting Save. Type RBBookFinder as the name of your application, specify the location where you want to save it, and then click OK.

The application is now ready to run. Click the green Run icon located in REALbasic’s main toolbar. REALbasic compiles a development version of your application, and then runs your application. Figure 2-22 shows how your applications should look after you start it. You can load any of the three predefined online bookstore websites by clicking the appropriate PushButton. Or, you can enter any other URL you want by typing its address into the EditField control and clicking the PushButton with the Load caption.

64	C H A P T E R 2 ■ N A V I G A T I N G T H E R E A L B A S I C I N T E G R A T E D D E V E L O P M E N T E N V I R O N M E N T

Figure 2-22. A look at the RBBookFinder browser application in action

If an error occurs when REALbasic attempts to compile your application, the odds are you made a typo when keying in the application’s code statements. If this is the case, go back and review each of the programming statements you added and fix any typos you find.

When you finish, click the Project tab to display the Project Editor. Next, click the App item and assign a value of “RBBookFinder” to the WindowsAppName property. You are now ready to compile a stand-alone version of the RBBookFinder browser application.

Summary

Having a solid understanding of how to work with IDE is a requirement for developing REALbasic applications. In this chapter, you learned the basic steps involved in working with the REALbasic IDE. This included learning how to interact with the Project, Windows, and Code Editors. It also included a review of the Controls and Properties panes. You learned how to access and use REALbasic’s integrated Help system. In addition to all this, you learned how to work with and configure REALbasic menus and toolbars, including the Bookmarks bar, Tabs bar, and Editor toolbar. This chapter also provided you with various tips for working more efficiently within the REALbasic IDE, such as using Folder items to improve the organization of project items.

P A R T 2

■ ■ ■

Learning How to Program with REALbasic