Designing the application’s user interface consists of drawing the elements on the Form. In our first application, the user can select one of the three major credit cards (the form of payment) and one or more of the three items listed on the right half of the Form shown.
To design the Form shown , follow these steps:
1. In the Project Explorer, double-click the name.of the Form to ,open it in . design mode, and in the Properties window, find the Caption property. This h, the value that appears in the Form’s caption bar, and its default value is Forml.
2. Change’it to Example1. The new ~e appears on the Form’s caption bar even as you type its value in the Properties window.
3. Place a Label control near the top left corner of the Form.
4. With the Label control selected, switch to the Properties window, and set the
5. Label control’s Caption property to Form of Payment. Notice that. the Label control doesn’t have’a border by default .
6. Locate the Font property in the Properties window, and click the button . with the ellipsis next to the current font to open the Font dialog box.
7. Select an easy-to-read font. The example in Figure 1.10 usesIfl-point MS Sans Serif.
8. Place another Label control next to the first one, and set its Caption property to Select Optional Items. .
9. Switch back to the Properties window, and set the Font property of the new Label control to the same setting as the first one.
10. Now you can place the Option button controls on the Form. Select the Option button icon in the Toolbox, and draw a control on the Form. Make it large enough to hold the American Express caption. While the first Option button is still selected on the Form, move.to the Properties window, and set its Caption property to American Express. Don’t bother aligning the control or setting its Font or other properties yet. Repeat steps 8 and 9 for the other two Option buttons. Their’captions should be Mastercard and VISA.
11. Now add three CheckBox controls, and set their captions to Modem, CD-ROM, and Sound Card.
The elements of the interface are now on the Form, and you have two groups of controls that can be manipulated together. For example, you can change the setting of the Font property for a number of controls all at once by following these steps:
1. .Select the three Option buttons with the mouse, and then locate the Font property in the Properties window,
2. Click the ellipsis button to open the Font dialog box.
3. Select a font to apply to all selected controls.,
To select multiple controls on the Form, hold down the Shift (or Ctrl) key and click them. If the controls you want to select are clustered together, you can select them by drawing a box around them with the mouse. The selected controls are indicated with handles that appear along their perimeter.
Aligning the Controls
Now you must align the controls on the Form. This isn’t a trivial step. ‘(.our application’s user interface is its visible part, anti what people think about your application depends a great deal on how the application looks. You are not expected to design the most spectacular user interface (not that it wouldn’t help), but at the very least your controls must be perfectly aligned. If not, the Form will look crooked and out-of-whack. The Visual Basic IDE provides numerous commands for aligning controls, which are all on the Format menu, and they are explained next.
The Format Menu
The commands on the Format menu align and resize the selected controls on the Form.
Here’s a quick rundown of the commands on the Format menu, arranged according to their corresponding submenu.
Align
The commands on this menu align the edges or middles of the selected controls:
Lefts, Centers, Rights align the left, center, and right sides of the selected controls; these commands are meaningful only if controls are stacked in a column.
Tops, Middles, Bottoms aligns the top, middle, and bottom sides of the controls; these commands .are meaningful only if controls are placed next to each other.
To Grid aligns the controls to the nearest grid point.
Make Same Size The commands on this menu make all selected controls the same size.
Height, Width, Both make the horizontal, vertical, or both dimensions of the controls equal.
Size to Grid’ This command changes the size and/ or position of the selected control (s) so that ,each comer aligns with the nearest grid point.
Horizontal Spacing The commands on this menu control the horizontal spacing between selected controls.
Make Equal makes all horizontal (vertical) distances between successive controls the same size.
Increase increases the horizontal (vertical) distance between adjacent controls by one grid block.
Decrease decreases the horizontal (vertical) distance between adjacent controls by one grid block.
Remove removes any horizontal (vertical) space between adjacent controls.
Vertical Spacing This menu controls the vertical spacing between selected controls and has the same commands as the Horizontal Spacing submenu, only these commands apply to the vertical ,arrangement of the controls.
Center in Form This submenu contains two commands:
Horizontally centers the selected-control is in the width of the Form.
Vertically centers the selected control(s) in the height of the Form.
Order This submenu contains two commands that change the relative order of the selected control(s) by moving them in front or behind other controls.
Bring to Front brings the selected control in front of other overlapping controls.
Send to Back sends the selected control behind other overlapping controls.
They work just like the commands of the same name in a drawing application, and you use them to manipulate the depth of each control. The depth is equivalent to a layer on which one or more controls reside. Objects on layers closer to the viewer hide the objects on layers behind them and are hidden by objects on layers in front of them:
Lock Controls This command allows you to select a number of controls on the Form and lock them. A locked control can’t be moved on the Form and you don’t risk misaligning it. You can still change its properties through the Properties window, but you can’t move it by mistake or when you use it along with other controls in alignment operations.
Using the Format Menu
You can arrange your controls on the form in many ways, and after you acquire some experience with the Visual Basic IDE, you’ll be using these commands effectively.
To align the controls on the Examplel Form, follow these steps:
1. Select all three Option button controls with the mouse. (To select multiple controls, hold down Shift or Ctrl and click each one.) Alternatively, you can draw a rectangle on the Form that encloses the desired controls .
. 2. Choose Format >-Align :> Lefts to align the left edges of the three controls.
3. With the three controls selected, choose Format >- Vertical Spacing >- Make Equal to make the distance between successive controls equal.
4. While the three controls remain selected, move them around with the mouse to the desired position. Click any of the selected controls and drag it around. All the selected controls will move as a group.
Optionally, while the three controls remain selected, choose Format >- Lock Controls. This ensures that you won’t ruin the alignment of the controls. Once a control is locked, you can’t move it with the mouse or change its alignment. If your Form contains many carefully aligned controls, you should lock them; it doesn’t take much to ruin the alignment. As simple action such as selecting a control to use as a· reference to align other controls could move the control by a few pixels.
Running the Application
Now you can run and test the application. If you haven’t had any experience with Visual Basic (or other visual development tools), you may he wondering, “What application?” We didn’t type even a single line of code. Well, why do you think it’s called Visual Basic and not Microsoft Basic or Windows Basic or anything else? Visual Basic uses visual tools to build a large section of the application. The user interface can be built almost entirely with point-and-click operations.
To run the application, choose Run :>- Start or press F5. The application contains no code, but check out how much functionality is built into it. When you dick an Option button, it is checked, and the previously checked Option button is cleared. The checkboxes behave differently. Each time you dick a checkbox, it changes its state: if it is selected, it is cleared; if it is cleared, it becomes selected.
To stop the application, choose Run :>- End. As you can see, the Visual Basic IDE . is more than a program editor. It’s an integrated environment which you can design and run your applications.
Using the Immediate Window
Start the application again by pressing F5, and then interrupt it by pressing Ctrl+Break or by choosing Run :>- Break. The application has been interrupted, but not terminated. At the bottom of the screen, you will see a window named Immediate, as shown.
When you issue Visual Basic commands in this window, they execute immediately. Let’s see how this works.
