Beginning REALbasic - From Novice To Professional (2006)

C H A P T E R 3

■ ■ ■

Creating an Application’s

User Interface

In Chapter 2, you learned the basics of working with REALbasic’s IDE. This information helps prepare you to create and work with new REALbasic projects. The first step in creating a new REALbasic application is usually interface design. In this chapter, you receive a thorough introduction to user interface development, including a look at every type of window and control supported by REALbasic. In addition, you develop another REALbasic application, the REALbasic Clock. By the time you complete this chapter, you will have learned

•How to decide which of REALbasic’s 11 windows to use when creating your application’s windows

•How to add, configure, and align REALbasic controls

•How to use the functionality provided by each of REALbasic’s built-in controls

•How to extend REALbasic functionality by adding plug-ins and ActiveX controls to your applications

Building Application Windows

A good user interface is critical to any application. If users do not find your application’s user interface intuitive and easy to learn, they may give up and move on to another application without ever giving your application a fair chance. Therefore, it is important that your application’s user interface be visually appealing, well-organized, and easy to work with. In most cases, your desktop application’s user interface is created using one or more windows. A large application may consist of dozens of custom windows, whereas a small application may consist of a single window.

By default, REALbasic creates a new blank window, named Window1, as part of each new desktop application. If necessary, you can add as many additional windows as you need. REALbasic supports 11 different types of windows, each of which is designed to fulfill a slightly different purpose.

67

68	C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

■Tip REALbasic provides you with all the building blocks you need to create graphical user interfaces (GUIs) that comply with design standards for Macintosh, Windows, and Linux applications. If you are interested in learning about design standards for the Macintosh, you can do so by reading “Introduction to Apple Human Interface Guidelines” at http://developer.apple.com/documentation/UserExperience/Conceptual/ OSXHIGuidelines. And, you can learn about Windows GUI development standards by reading “Microsoft’s Official Guidelines for User Interface Developers and Designers” at http://msdn.microsoft.com/ library/default.asp?url=/library/en-us/dnwue/html/welcome.asp. You can also learn about Linux development standards by reading “KDE User Interface Guidelines” at http://developer.kde.org/ documentation/standards/kde/style/basics.

You can add a new window to your application by clicking the Add Window button found on the Project Editor’s toolbar or by clicking Project Add Windows. REALbasic responds by adding a new Document window to your project. To specify a different type of window, you change the window’s Frame property to one of the following values:

•Document

•Movable

•Modal

•Floating

•Plain Box

•Shadowed Box

•Rounded

•Global Floating

•Sheet

•Metal

•Drawer

■Tip You can also add a new window to your application within the Project Editor by right-clicking (controlclicking on Macintosh), selecting Add (from the contextual menu that appears), and then selecting window.

C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

69

Each of these different types of windows is examined in the following sections. Except where noted, the functionality provided by each type of window is cross-platform.

Document

The Document Window, shown in Figure 3-1, is the default window that REALbasic automatically adds to every new REALbasic desktop application The Document Window is typically used in situations where you want a window to remain open until the user closes it. With the Document Window, the user can click other windows, pushing the Document Window to the background.

Figure 3-1. The Document Window, as shown on Windows

A Document Window can have a close box, as well as minimize and maximize buttons. On Windows and Linux, a Document Window has a menu bar by default. However, you have the option of removing the menu bar or substituting a different one. On Mac OS X, the Document Window has the standard set of red, yellow, and green (close, minimize, and maximize) buttons in its title bar.

Movable Modal

The Movable Modal Window, which Figure 3-2 shows, is used in situations where you want the window to remain in front of all the other windows in your application until the user closes it. Because this window is moveable, the user can reposition it, if necessary, to see information displayed in windows underneath it.

On Windows and Linux, a Movable Modal Window can have minimize, maximize, and close buttons. On Max OS X, the Movable Modal Window does not have a close box, leaving it up to you to provide a button (or other means) for closing the window.

70	C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

Figure 3-2. The Movable Modal Window, as shown on Linux

Modal Window

The Modal Window, shown in Figure 3-3, is similar to the Movable Modal Window, except the user cannot move it. This type of window is used to force the user to respond to it before getting access to the rest of the application. Except when opened on Linux, the Modal Window does not have a title bar. On Linux, the Modal Window has minimize and close buttons.

Figure 3-3. The Modal Window, as shown on Mac OS X

Floating Window

The Floating Window, as Figure 3-4 shows, floats on top of other windows and can be moved like Movable Modal Windows. However, Floating Windows do not prevent users from being able to access and work with other parts of the application. Floating Windows can even float on top of Modal and Movable Modal Windows.

C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

71

Figure 3-4. The Floating Window, as shown in Linux

Floating Windows can display a Close button. In addition, on Linux, a Floating Window can also have minimize and maximize buttons.

Plain Box Window

The Plain Box Window works just like a Modal Window. As Figure 3-5 shows, Plain Box Windows do not have title bars, not even on Linux. The Plain Box Window is sometimes used to hide the desktop (when it is maximized) or to create About dialogs found on Help menus.

Figure 3-5. The Plain Box Window, as shown on Mac OS X

72	C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

Shadowed Box Window

The Shadowed Box Window, shown in Figure 3-6, operates exactly like a Modal Window. Like the Plain Box Window, the Shadowed Box Window is often used to create About windows. Unlike Shadowed Box Windows on Windows and Linux, which do not have title bars, the Mac OS X Shadowed Box Window has a title bar and includes a minimize button.

Figure 3-6. The Shadowed Box Window, as shown on Windows

Rounded Window

The Rounded Window looks like the Document Window, as you see in Figure 3-7. One small difference is, on Mac OS X, the Rounded Window cannot be resized. The Rounded Window is considered obsolete and is seldom used because all its functionality is duplicated in the Document Window.

Figure 3-7. The Rounded Window, as shown on Mac OS X

C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

73

Global Floating Window

A Global Floating Window, shown in Figure 3-8, looks like Floating Window. The only difference is in addition to being able to float in front of windows belonging to its own applications, a Global Floating Window can also float in front of other applications’ windows.

Figure 3-8. The Global Floating Window, as shown on Linux

Sheet Window

The Sheet Window, which acts like a Modal Window, is a drop-down dialog you can add to a parent window. Sheet Windows are only supported on Mac OS X. Figure 3-9 shows a Document Window to which a Sheet Window had been associated. As you can see in Figure 3-10, the Sheet Window is designed to appear as if it drops down from the top portion of its parent window.

Figure 3-9. A window to which a Sheet Window has been added, as shown on Mac OS X

74	C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

Figure 3-10. Once exposed, a Sheet Window provides the capability to significantly enhance its parent window, as shown on Mac OS X.

Once displayed, the Sheet Window is modal and cannot be moved. The user must respond to it to gain access to the rest of the application.

■Note If you use the Sheet Window on Windows or Linux, REALbasic displays it as a regular Modal Window.

Metal Window

The Metal Window, which Figure 3-11 shows, is available only on Mac OS X 10.2 or above. It displays a window with a metallic-like background. Other than its metallic appearance, the Metal Window works like a Document Window. It includes a title bar with maximize, minimize, and close buttons.

Figure 3-11. The Metal Window, as shown on Mac OS X

C H A P T E R 3 ■ C R E A T I N G A N A P P L I C A T I O N ’ S U S E R I N T E R F A C E

75

■Note If you use the Metal Window on Windows or Linux, REALbasic displays it as a regular Document Window. The Metal Window is not supported on Mac Classic either and, instead, looks and operates like a Document Window.

Drawer Window

The Drawer Window, as Figure 3-12 shows, is only supported on Mac OS X 10.2 or above. A Drawer Window appears as a hidden window that slides out from underneath another window, much like a drawer slides out of a dresser. The Drawer Window is useful for displaying optional functionality in a manner that is intuitively friendly by allowing it to be tucked away and pulled out only when needed.

Figure 3-12. The Drawer Window, as shown on Mac OS X

You can specify whether the Drawer Window slides out of the top, bottom, or either side of the parent window. Optionally, you can let REALbasic determine, on its own, the best side on which to display the Drawer Window.

■Note If you use the Drawer Window on Windows or Linux, REALbasic displays it as a separate floating window.

Changing the Default Window

As you add additional windows to your application, you may decide to make a different window the application’s default opening window. You specify an application’s opening window by selecting the App item in the Project Editor, and then picking one of the windows you added to your application from the DefaultWindow property’s drop-down list.