During this hour you will learn
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.
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.
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:
The indentation shows one submenu item.
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.
![]()
A cascading menu appears.
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.
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.
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.
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.
![]()
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. |
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 toUndo 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.![]()
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.
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.
A text box pops up to let users enter a new appointment in the list box.
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.
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.
![]()
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.
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.
![]()
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.
You've now placed the controls and are ready for the coding stage.
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.
![]()