Hour 34


During this hour you will learn

Adding the Controls

This lesson works a lot on the sample application you began building in Hour 33. You'll learn how to create menus and select controls for the application. After you complete the application's design, you must begin creating the user interface as described here. In Visual Basic terms, that means that you must add controls to the form and let users test the running form's prototype to make sure that they're comfortable and that all the input data values are captured when needed.

After you design the user interface with the controls and the menus, you'll be ready to add code in Hour 35. Therefore, this lesson describes the middle cycle of a project's development. If you've followed the tutorial throughout the earlier lessons, this lesson will pose some new concepts related to menu and control placement. If you Fast-Tracked to this lesson, you'll quickly see how to create menus and place controls so that your application's blank form looks good.

The Scheduler's Menu

Menus provide the mechanism with which your users can select program operations by using the mouse or keyboard. Surprisingly, adding menus and hooking the code to menus is fairly simple and doesn't require in-depth study.

FAST TRACK
Turn to Hour 5, "Creating Menus for User Ease", to learn how to create and edit menus.

Many applications supply toolbars as well as a menu so that users can have push-button access to many common menu options. The VBScheduler program doesn't provide a toolbar because the program's nature simply doesn't require toolbars. You can learn all about adding toolbars in Hour 23, "Enhancing Your Program", to learn how to use Visual Basic's development environment to load and execute programs.

You use Visual Basic's Menu Editor to add a menu bar and its associated pull-down menu options to your application. The Menu Editor is part of Visual Basic's standard set of features. To add a menu, click the form and then click VB's Menu Editor toolbar button to display Figure 34.1's Menu Editor dialog box.

FIG. 34.1

You build menus with the Menu Editor.

The menu bar across the top of your application is the doorway into the application. To make your application easier to use, you should group the menu selections according to their tasks. More importantly, design your menus to mimic those found in popular Windows applications such as Microsoft Word. Of course, your application will require a different set of menu options than Word's, but your application will need a program-terminating menu option, so use the standard "File menu's Exit option" instead of something less common such as "Program menu's Quit option."

To add a menu, click the form that will receive the menu and then open the Menu Editor.

If you create MDI applications, child forms can display menus as well as the main form. Therefore, you must select the form for which you're adding a menu before opening the Menu Editor so that Visual Basic knows to which form you want to add the menu.

Each menu option requires both a Caption and a Name, just as other controls on the form require. The Caption is what users see when the application executes; the Name is how the rest of the application accesses and recognizes the menu options when users select an option.

VBScheduler's menu bar includes the following menus: File and Help. You can add the hot keys (such as Alt+F to open the File menu) from within the Menu Editor. File and Help menus appear in most other Windows applications. VBScheduler lists these options in the same order as other major Windows applications.

Refer to Figure 33.1 in the preceding hour's lesson to see VBScheduler's menu bar that you design in this lesson.

VBScheduler's File menu contains the Exit option with two other options. Unlike the other options, Exit is a simple option (no submenus open from Exit). Follow these steps to add the File menu and its pull-down Exit option:

  1. Type &File for the Caption.
  2. The ampersand (&) before a letter in any Caption indicates the hot key for that item. Therefore, this menu bar item appears as File on the final menu bar due to the ampersand.
  3. As you enter the Caption property, it appears in the lower half of the Menu Editor, which displays a running list of all the menu options as you add them.
  4. Type mnuFile for the Name of the first menu bar item.
  5. Don't worry about the remaining options on the Menu Editor. Most of the default values for the Menu Editor work well, and you won't change them frequently.
  6. To add the Exit option on the File menu, click the Next button so that the Menu Editor knows to open a new slot in the lower half of the Menu Editor, beneath File, for a new option.
  7. Before entering the Exit option's Caption and Name, click the Menu Editor's right-arrow button. The Menu editor indents the new menu option with ellipses. Type E&xit for the Caption and mnuFileExit for the Name. As Figure 34.2 shows, the Menu Editor indents the new option to show that indents beneath the File option and that Exit isn't the second item on the main menu bar.

FIG. 34.2

The indentation shows one submenu item.

  1. The second menu bar item, Help, must appear on the same level of indentation as File so that the Menu Editor knows to place Help on the menu bar. Therefore, click theNext button and then click the left-arrow button to remove the indentation.
  2. Type &Help for the Caption and mnuHelp for the menu's Name.
  3. Add the Contents option beneath the Help menu as a submenu item. Name the option mnuHelpContents.
  4. A separating bar separates menu items from one another. Separator bars let you group common menu items together. To add a separator bar, type - (a hyphen) for the item name beneath Help item and name the separator bar Sep1. (You'll never refer to this separator bar from the code; its name simply distinguishes it from other separator bars that can appear.)
  5. Add one more option beneath the separator bar with a Caption of &About... (notice the ellipsis) and a Name of mnuHelpAbout. You've now added the full Help menu shown in Figure 34.3.

FIG. 34.3

The Help menu is now complete.

The ellipsis after a menu item name indicates that a dialog box will appear when you select that item.

  1. The File menu is not yet complete. Add a separator bar above the Exit option and name the separator bar Sep2.
  2. The View By option will itself be a submenu. Therefore, click the right-arrow button again to add another layer of indentation to the menu options. Add these three options: Quarter Hr,Half Hour, and Hour with the names mnuFileViewQuarter, mnuFileViewHalfHr, and mnuFileViewHour. You've just created the cascading menu effect shown in Figure 34.4.

FIG. 34.4

A cascading menu appears.

  1. The first cascading menu item, Quarter Hr, has itsChecked option set in the Menu Editor. The Checked option puts the check mark you see next to the menu item. The application's code will display the check mark on a different menu item if users want to see half-hour or hourly increments in the appointment pages. The code you add in the next lesson will update the check mark when needed.
  2. 11. Add the Contacts menu bar item (with the Name mnuFileContacts) to the File menu. Add three items under the Contacts menu: Add,Edit, and Delete with the names mnuFileContactsAdd, mnuFileContactsEdit, and mnuFileContactsDelete.
  3. 12. Close the Menu Editor and try the form's menu from the development environment. As shown in Figure 34.5, you can view the menu items by clicking the Form window's menu bar.

FIG. 34.5

Try your menu to see how it looks.

Your application is ready for the controls. The next part of this lesson adds the controls to the form and describes some of the nuances involved with control placement.

Adding Controls

Controls let users interact with the application and are vital to a successful application. As Hour 33 explained, the controls' proper placement and consistency will make your application look professional. You don't want to clutter a form with too many controls, yet you want your form to be functional.

FAST TRACK
See Hour 3, "Adding Controls to a Program", for information on how to add controls to a form.

VBScheduler's form is about as full as it can be, yet the form doesn't appear to be cluttered. That's because of the nature of this particular application. The appointments list remains clean because only one line shows for each appointment, except when you select or add an appointment to the list.

Control Placement: At Design or Runtime?


Until now, every lesson in this tutorial has placed the controls at design time where they will eventually appear at runtime. In other words, the design-time look of the form matched the runtime look in most cases. The VBScheduler application shows you a different way to place controls.

VBScheduler doesn't hold all its controls on the form in their proper location at design time. As Figure 34.6 shows, the controls look very cluttered when you look at them in the Form window. (You'll be adding these controls to match this figure shortly.) The controls don't have appropriate Caption and Text properties set and look very little like the runtime application's controls.

The final runtime application, however, doesn't display these controls in such a cluttered fashion. The running application is far more organized, even though a higher number of controls appear on the form at runtime. VBScheduler sets most of its control properties at runtime as well. Therefore, rather than locate the form, select a control, and find the property you want to change, if you need to change a property later, you only need to locate the code location that sets the property.

VBScheduler's designer wanted to show you a different way to place controls. One of the first tasks the code does, when end users run the application, is to move the controls to their proper runtime location. You may wonder why the runtime code performs the same task you could do at design time. By locating the controls at runtime, your application can more easily adapt to form changes. If you add or modify a control later, you only need to change the code that deals with that control's placement. If you can create a good form with proper control placement at design time, by all means do so. VBScheduler is showing you, however, another way to accomplish control placement.

FIG. 34.6

The design time form has controls placed everywhere.

The following sections will review VBScheduler's controls; the final section will describe each control and its properties in a table so that you can add the controls yourself.

The Frames

Visual Basic Scheduler contains these three frames: a date frame that holds the date and time information, the appointment frame that holds the appointments listed by quarter hour, half hour, or hour (according to the user's menu selection), and the contacts frame that holds the contact information. The frame is a boxed outline around the controls. To place a frame, you double-click the Frame control or click and drag the Frame control onto the form.

The frame lets you move all controls that appear in the frame at one time instead of individually. To add a control to an existing frame, place and size the control onto the frame when you first place the control on the form. If you add a control elsewhere and then drag the control to the form, the control isn't part of the frame and won't move with the frame or be considered part of the framed set of controls.

Only one option button can be True at any one time on a form. However, if you place several groups of option buttons on frames, each frame's group of option buttons can have one True property setting.

The Labels

A label displays text on a form. VBScheduler contains the following labels: the current time label, the date label, a field label control array that holds the captions for the contact information (such as Address and State), and two contact name labels that describe the contact's first and last names.

FAST TRACK
A control array is a set of multiple controls that are the same type and have the same name. The application distinguishes between the controls in the control array with an index value. See Hour 12, "Handling Large Amounts of Information with Arrays", for information on how to create and use arrays.

The Command Buttons

Command buttons let your application's users select options and trigger events by clicking a button. VBScheduler contains these five command buttons that control the display of the contact information: previous contact, add new contact, edit contact information, delete a contact, or next contact.

As you work with VBScheduler, the command buttons' Caption properties change to reflect the current state of the application. Therefore, when you click the Edit command button to change a contact's address, the button's Caption changes to Undo Edit so that you can cancel the editing changes if you need to. The code changes the Caption at runtime depending on what users do.

The Data Control

VBScheduler includes one Data control that accesses the contact and appointment database tables. The Data control lets users click the data-bound command buttons to see the database data. If users then edit one of the database records or add a new record, the data control and its corresponding data-bound text boxes change to reflect the update.

VBScheduler uses some SQL commands to select and update the database beneath the application.

The List Box

VBScheduler includes a single drop-down list box that contains a list of all the quarterly, half-hourly, or hourly appointments. The list box doesn't actually look and act like the list boxes you've seen due to the unique way the application initializes the list with the appointment blocks.

One way users will enter an appointment is to click one of the list box's entries. The code displays a text box over the list box with command buttons, as shown in Figure 34.7. When users close the text box, the code updates that item in the list and restores the list box back to its usual compact state.

FIG. 34.7

A text box pops up to let users enter a new appointment in the list box.

The Combo Boxes

VBScheduler includes four combo box controls. A combo box acts like a list box that remains closed until users are ready to select from the combo box's list of items. (Other kinds of combo boxes exist and let users enter new information in the list rather than allow only the selection of list items.) The first three combo boxes let users select the appointment's day, month, and year. The fourth combo box offers a drop-down list of contact names and phone numbers from which users can choose. Therefore, the application lets users search for a contact by choosing Search from the Edit menu or locate the contact by selecting from the drop-down combo box.

The Timer Control

VBScheduler includes one Timer control. The control doesn't appear on the final runtime form, but works in the background to trigger events for a time interval you set. The application uses the Timer control to display the current time of day. The control's Interval property is set to 500, so the time is updated every half second.

FAST TRACK
Turn to Hour 23, "Enhancing Your Program", to learn how to use the Timer control.

Due to timing problems that can sometimes arise, the half-second interval provides more timing accuracy than a full second interval could. If you used a full-second interval, the clock could be off as much as a full second. Generally, this lack of precision isn't extremely critical in these kinds of applications.

Text Box Controls

VBScheduler contains numerous text boxes that hold specific contact information in a control array, as well as the special pop-up text box that appears when you open a new appointment that the preceding section described. Special first- and last-name text boxes appear when you add a new contact. Notice how Figure 34.8 varies from the regular contacts form when users click the Add command button. Normally the first and last names appear together when viewing the contacts but, when users add a new contact, the separate first and last name text boxes help them separate the two fields.

FIG. 34.8

First- and last-name text boxes appear only when users enter a new contact.

One of the neatest features of VBScheduler is that you can drag a contact name to an open appointment text box so you don't have to type the contact's name and phone number. After you drag the contact name to an open appointment, you can click a plus or minus command button to add to or reduce the ending appointment time.

When you view the Properties window, you'll see all the Menu Editor items and menu bar options you added at the beginning of this lesson. Normally, you won't need to access these controls from the Properties window because the Menu Editor works so well for menu creation.

Placing the Controls

Now that you've seen the control overview, you can place the controls on the form. As stated earlier this hour, the code will position and size most of the controls, so you don't have to worry so much about exact placement when you put the controls on the form. Use Table 34.1 to place the controls on the form and set the properties described in the table. If a property isn't described in the table, you can be assured that the code will set that property if the property needs to be changed from its default state.

The control name's prefix indicates the kind of control.

Table 34.1 Controls Required by the VB Scheduler Application

Control

Properties

Combo Box

Name: cboDate; Height: 315, Left: 420; Style: 2 - Dropdown List; Top: 240; Width: 1095 (on frDate)

Combo Box

Name: cboMonth; Height: 315, Left: 1560; Style: 2 - Dropdown List; Top: 180; Width: 1215 (on frDate)

Combo Box

Name: cboName; Height: 315, Left: 240; Style: 0 - DropdownCombo; Top: 480; Width: 3135 (on frContact)

Combo Box

Name: cboYear; Height: 315, Left: 0; Style: 2 - Dropdown List; Top: 0; Width: 1215 (on frDate)

Command Button

Name: cmdAdd; Caption: &Add; Height: 375; Left: 600; Top: 4800; Width: 900 (on frContact)

Command Button

Name: cmdApptDelete; Caption: De&lete; Height: 315; Left: 1140; Top: 420; Width: 795 (on frEnterAppt)

Command Button

Name: cmdCancel; Caption: &Cancel; Height: 315; Left: 120; Top: 540; Width: 795 (on frEnterAppt)

Command Button

Name: cmdDelete; Caption: &Delete; Height: 375; Left: 2400; Top: 4800; Width: 900 (on frContact)

Command Button

Name: cmdEdit; Caption: &Edit; Height: 375; Left: 1500; Top: 4800; Width: 900 (on frContact)

Command Button

Name: cmdMinus; Caption: -; Height: 210; Left: 1080; Top: 600; Width: 255 (on frEnterAppt)

Command Button

Name: cmdNext; Caption: >&>; Height: 375; Left: 3300; Top: 4800; Width: 435 (on frContact)

Command Button

Name: cmdOK; Caption: E&nter, Height: 315; Left: 2040; Top: 300 Width: 795 (on frEnterAppt)

Command Button

Name: cmdPlus; Caption: +; Height: 210; Left: 1080; Top: 360; Width: 255 (on frEnterAppt)

Command Button

Name: cmdPrevious; Caption: &<<; Height: 375; Left: 120; Top: 4800; Width: 435 (on frContact)

Data

Name: DataMain; RecordSource: tblContacts
Frame

Name: frAppointments; BorderStyle: 1 - Fixed Single; Caption: Appointments; Height: 4095; Left: 180; Top: 300; Width: 3495

Frame

Name: frContact; BorderStyle: 1 - Fixed Single; Caption: Contacts; Height: 5355; Left: 3780; Top: 120; Width: 3915

Frame

Name: frDate; BorderStyle: 1 - Fixed Single; Caption: Date; Height: 675; Left: 180; Top: 60; Width: 3315

Label

Name: lblCurrentTime; Caption: Current Time:; Height: 135; Left: 2940; Top: 180; Width: 255

Label

Name: lblDay; Caption: Date; Height: 495; Left: 0; Top: 0; Width: 1215

Label

Name: lblField(0); Height: 255; Index: 0, Left: 240; Top: 1080; Width: 1755 (on frContact)

Label

Name: lblEndTime(0); Height: 315; Index: 0, Left: 1980; Top: 300; Width: 675 (on frEnterAppt)

Label

Name: lblName(0); Caption: Name:; Height: 225; Index: 0, Left: 240; Top: 240; Width: 1215 (on frContact)

Label

Name: lblName(1); Caption: First Name:; Height: 225; Index: 1, Left: 2280; Top: 1080; Width: 1215 (on frContact)

Label

Name: lblStartTime; Height: 315; Left: 180; Top: 240; Width: 675 (on frEnterAppt)

Label

Name: lblTime; Caption: 12:00 AM; Height: 315; Left: 2880; Top: 300; Width: 375 (on frDate)

List Box

Name: lstSchedule; Height: 4710; Left: 1140; Style: 0 - Standard; Top: -540; Width: 3015 (on frAppointments)

Timer

Name: Timer1; Interval: 500; Left: 2460; Top: 5400

Text Box

Name: txtApptEntry; BorderStyle: 1 - Fixed Single; Height: 495; Left: 0; Top: 1440; Width: 3495 (on frAppointments)

Text Box

Name: txtField(0); BorderStyle: 1 - Fixed Single; Height: 285; Left: 240; Top: 1320; Width: 2115 (on frContact)

Text Box

Name: txtFirstName; BorderStyle: 1 - Fixed Single; Height: 315; Index: 0, Left: 300; Top: 1680; Width: 2115 (on frContact)

Text Box

Name: txtLastName; BorderStyle: 1 - Fixed Single; Height: 315; Left: 300; Top: 2040; Width: 2115 (on frContact)

Be sure to create control arrays for the following controls: lblField and lblName.

After you place all the controls, your screen should look something like Figure 34.9. You've now generated most of the user interface. The code you add to the project in Hour 35 ties everything together and turns this user interface into a working application.

FIG. 34.9

You've now placed the controls and are ready for the coding stage.

Summary

This hour's lesson added the menu and controls to the VBScheduler application. Although you use the Menu Editor to create and manage the menu items, you'll see the items reside in the Properties window as well because the menu bar and its components are nothing more than controls. Therefore, you can change the menu properties either from the Menu Editor or from within the Properties window.

After you add the controls, you can add the code. This lesson explained that VBScheduler's programmer prefers to adjust final control properties at runtime, even though you can adjust many of the properties at design time. Therefore, your Form window might now look like a busy mess. By studying the sample code that comes with next hour's lesson, you'll see how the code ties in and manages the form properly.

No questions or exercises exist for this lesson due to the general nature of the material.


© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon and Schuster Company.