| home Java Script MS Access Perl HTML Delphi C ++ Visual Basic Java CGIPerl MS Excel Front Page 98 Windows 98 Ms Word Builder PHP Assembler Link to us Links |
As you know by now, Delphi is heavily form-based, a model that takes maximum advantage of the visual programming environment. In this chapter you will explore
To illustrate the use of the Form Designer, you will build an application that approximates the Windows Notepad program. Along the way you will gain valuable experience working with the Form Designer. Later in the chapter, you'll explore the Menu Designer in detail.
This chapter might seem elementary if you have used Delphi extensively. Even so, be sure to take a quick look to discover things previously unknown or to rediscover things you've forgotten. I'm willing to bet there is at least one thing in this chapter that will be new to you.
The Delphi Form Designer is a powerful visual programming tool. It enables you to place, select, move, resize, and align components and much more. The Form Designer also enables you to size and position the form itself, add menus, and create specialized dialog boxes--everything you need to create the user interface to a typical Windows program.
I'll examine each Form Designer feature in the following sections. As you read, I encourage you to stop and experiment any time you are curious about how something works. Sometimes a few minutes playing around can teach you a technique that you will use for a long time to come.
When you first start Delphi or when you create a new project, you are presented with a blank form in the Form Designer. The Form Designer, like most Delphi windows, has a context menu associated with it. Table 6.1 lists and describes each item on the Form Designer context menu.
| Item | Description |
| Align to Grid | Aligns selected components to the Form Designer grid. |
| Bring to Front | Brings selected components to the front of all other components. |
| Send to Back | Sends selected components behind all other components. |
| Revert to Inherited | Causes the selected control to revert to its original state when you are working with a form that you have inherited from the Object Repository. (Inheriting forms from the Object Repository is covered on Day 8, "Creating Applications in Delphi.") |
| Align | Displays the Alignment dialog box. |
| Size | Displays the Size dialog box. |
| Scale | Displays the Scale dialog box. |
| Tab Order | Displays the Edit Tab Order dialog box. |
| Creation Order | Displays the Creation Order dialog box. |
| Flip Children | For non-English versions of Windows, this command changes the reading order of a component. Disabled for English versions of Windows. |
| Add to Repository | Adds this form to the Object Repository. Custom forms can be saved to be used later. (The Object Repository is discussed on Day 8.) |
| View as Text | Shows the form description as text in the Code Editor. You can edit the form's text version if you like. Choose View as Form from the Code Editor context menu to go back to the form. You can also use Alt+F12 to switch from the View as Text and View as Form options. |
NOTE: Delphi creates a form file (DFM) for every form you create and places it in your project's directory. The form file is a binary resource file that can't be read by mere humans. When you choose the View as Text context menu item, Delphi converts the binary resource to readable form. When you switch back to the View as Form option, Delphi recompiles the form file to implement any changes you have made.
Most of the context menu options are discussed in the following sections. Others are discussed in later chapters when you examine the particular aspect of Delphi to which they pertain.
Placing a component on a form is simple. All you have to do is select the component you want from the Component palette and click on the form to place the component. When you click on the form, the component's upper-left corner is placed at the location you clicked. Notice that when you click a button on the Component palette, the button appears as pressed. When you click on the form to place the component, the button on the Component palette pops up again to indicate that the action is complete.
TIP: As you learned on Day 4, "The Delphi IDE Explored," to place a component on a form multiple times, press and hold Shift when you first select the component's button on the Component palette. Each time you click on the form, a new component will be added. Click the Arrow button on the Component palette to stop placing components.
Most components can be sized. You can place a component on a form and then size it, or you can size the component at the same time you place it on the form. To size while placing the component, click on the form where you want the top-left corner to be placed and then drag with the mouse until the component is the desired size. When you release the mouse, the component will be placed at the size you specified.
NOTE: Not all components can be sized in this manner. Nonvisual components, for example, are represented on the form by an icon. Although you can click and drag to place a nonvisual component, the drag size will be ignored. Another example is a single-line edit component. The edit component can be placed by dragging, but only the drag width will be used. The drag height will be ignored because the height of a single-line edit component defaults to the height of a single-line edit control.
CAUTION: If you change your mind while placing the control via the dragging method, you can press the Esc key on the keyboard before you release the mouse button to cancel the operation. The component's button will still be pressed on the Component palette, however, so you might need to click the Arrow button to return to component-selection mode.
Placing components is simple enough that you don't need to spend much time on the subject. You had some experience with placing components yesterday, so let's move on to other things.
The Form Designer has a built-in grid that aids in designing forms. By default, Delphi shows the grid. The grid size is initially set to eight pixels horizontally and eight pixels vertically. When the Form Designer is set to display the grid, a dot is placed at the intersection of each grid point. Components placed on a form will snap to the nearest grid point. By snap to I mean that the component's top-left corner will automatically jump to the nearest grid point. This is an advantage because you frequently want a group of controls to be aligned either on their left, right, top, or bottom edge. When the Snap to Grid option is on, you merely get close enough to the correct location and the Form Designer automatically places your component at the nearest grid point. This saves you time by sparing you from tweaking the individual component's size or position on the form.
The grid settings can be modified via the Preferences page of the Environment Options dialog box. (I'll discuss the Environment Options in detail on Day 9, "Projects, the Code Editor, and the Code Explorer.") From here you can change the grid size or turn off the Snap to Grid feature. You can also turn the grid display on or off. When the grid display is off, the grid is still active (assuming Snap to Grid is on), but the dots marking grid points are not drawn on the form.
After you place a component on a form, you often have to select the component in order to modify it in some way. You might have to select a component to perform one of the following actions:
To select a single component, just click on it. When you select the component, eight black sizing handles appear around the component to indicate that it is selected. (I'll discuss the sizing handles in a moment.) Figure 6.1 shows a form with a button component selected.
As soon as you select a component, the Object Inspector changes to show the properties and events for the control you selected. To deselect a control, click on the form's background or Shift+click on the control. (Shift+click is described in the next section.)
NOTE: Each component has a default event handler associated with it. When you double-click a component on a form, the Code Editor displays the default event handler for that component, ready for you to type code. In most cases, the default event handler is the OnClick handler. Exactly what happens when the component is double-clicked depends on how the component is designed. For example, in the case of the Image component, double-clicking will display the Picture Editor dialog box.
FIGURE 6.1.A
form with a button component selected.
You can also select multiple components so that you can act on them as a group. This is accomplished in one of three ways:
To select all components on the form, choose Edit | Select All from the main menu.
To use the Shift+click sequence, first select one control. Then press and hold the Shift key on the keyboard and click on any other controls you want to include in the selection. Each control you click is bounded by four gray boxes to indicate that it is part of the selection.
You can remove a control from the selection by continuing to hold the Shift key and again clicking on the component. In other words, the Shift+click sequence toggles a component's inclusion in the selection. To illustrate, first start with a blank form and then perform the following steps:
Figure 6.2 shows the form as it will look at the end of this sequence. Keep in mind that your buttons could have been placed anywhere on the form. Keep the form handy because you'll use it again in the next exercise.
FIGURE 6.2. A
form with three buttons selected.
NOTE: If you click on a component that is part of a selection, nothing will happen. To select a single control that is currently part of a group selection, you need to first click on the form's background or press the Esc key to remove the group selection. Then you can click on the individual control you want to select.
You can select multiple controls by dragging a bounding rectangle around the controls to be selected. The bounding rectangle is a broken-line rectangle that changes size as you drag. In fact, you don't have to drag the bounding rectangle completely around the components. You have only to touch a component with the bounding rectangle in order for it to be included in the selection.
Be sure that you start by placing the mouse cursor over the form's background and not on a component. Hold the left mouse button down and begin dragging. You will see the bounding rectangle as you drag. Surround or touch the components you want selected and release the mouse button. Any components that were inside the bounding rectangle (or touching it) are included in the selection.
When you have selected a group of controls, you can use the Shift+click technique explained in the previous section to add other controls to the selection or to remove controls from the selection. For example, you might want to select all controls in one area of your form except for one. Surround the controls and then deselect the control you want to exclude from the selection.
Go back to the form with the three buttons you created earlier (if you've already discarded that form, create a new one and place three buttons on it). Start at the top-left corner and drag down and to the right to surround the buttons. Let go of the mouse button and the controls will be selected. Figure 6.3 shows the form and the bounding rectangle being dragged.
FIGURE 6.3. Controls
being selected by dragging.
CAUTION: You can use Shift+drag to select non-adjacent groups of controls. If, for instance, you have two separate groups of controls in different areas on your form, you can drag around the first set and then hold the Shift key down and drag around the second set. Both groups will be selected.
NOTE: You don't have to drag down and to the right. You can drag in any direction to select components.
Frequently you will have components placed within other components. The Panel component is often used as a container for other components. To select a group of components on a panel, you have to hold down the Ctrl key on the keyboard while you drag to select the components. (Try it without holding down the Ctrl key and see what happens!) In case you're wondering, yes, you can use a combination of Ctrl+Shift+drag. (I suppose the Borland designers could have figured out some way of working the Alt key in there, too.)
To illustrate, first start with a blank form. Then do the following:
FIGURE 6.4. The
form with a panel and six buttons.
Using the Ctrl+drag sequence is the only way to select a group of components contained within another component if you are using the drag method. You can use the Shift+click method to select components contained within another component just as you do when selecting components on a form.
Moving components is a common and simple task. To move an individual component, place the mouse cursor over the component and drag. As you drag, a rectangle that represents the component moves with the mouse cursor. When you have the rectangle where you want it, let go of the mouse button and the component will be moved to that location.
NOTE: When you move a control via drag and drop, the control's Left and Top properties are automatically updated. If you pause for a moment while moving a component, you will notice a tooltip appear next to the mouse cursor. The tooltip shows what the new top and left position of the component will be when you stop dragging.
A similar tooltip is displayed when sizing a component by dragging. In the case of sizing a component, the tooltip shows what the new width and height of the component will be when you stop dragging. Figure 6.6 shows the tooltip you see when sizing a component (in the lower-right corner).
If you have the Snap to Grid option on, the dragging rectangle will snap to the nearest grid point as you drag.
TIP: If you change your mind while dragging, you can press the Esc key on the keyboard before you release the mouse button to cancel the drag operation. The component will return to its original position.
Dragging a group of controls works the same way. After you have a group of components selected, place the mouse cursor over any one of the controls and begin dragging. The dragging rectangle will be displayed for each control in the group. This enables you to visualize where the group will be placed when you release the mouse button.
NOTE: You cannot move a group of components if components in the group have different parent controls. For instance, let's say you select both a Button component on the main form and a SpeedButton on a panel. Because these two components have different parent controls, you cannot move them as a group.
TIP: When you have selected a control, you can nudge it a pixel at a time by holding down the Ctrl key while using the arrow keys on the keyboard. This technique works for both groups of controls and individual controls. The Snap to Grid feature is overridden when you use this technique.
After you have moved a component using this method, the component is no longer on a grid point--it is offset by some amount. If you now drag the component, it will maintain its offset from the grid point as you drag.
TIP: If you move a control using the Ctrl+arrow method and want to align it again to the grid, choose Edit | Align to Grid from the main menu. The control's top-left corner will snap to the nearest grid point.
A control cannot be dragged outside its parent form. If you drag a component off the form's left or top edge, you will see that the component is clipped at the form's edge. If, however, you drag the component off the right or bottom of the form and drop it, scrollbars will appear on the form so that you can scroll to see the rest of the form.
The form's Width and Height properties are not altered. If you drag the component back onto the visible part of the form, the scrollbars disappear again. This is the default behavior and will occur unless you change the form's AutoScroll property to False. Figure 6.5 shows a Memo component that has been dragged partially off the form's right edge. Notice the scrollbar that appears at the bottom of the form.
Components can be locked into place so that they cannot be moved. Locking components is useful if you know that a form's design is final and you don't want to worry about accidentally moving controls. To lock a form's controls, choose Edit | Lock Controls from the main menu. Locked controls cannot be moved or sized. When controls are locked, their sizing handles are gray with a black border. To unlock the controls, choose Edit | Lock Controls again. The controls can now be moved as before. You can lock all components on a form with this technique or none of the components. You cannot, however, lock just selected components.
FIGURE 6.5. A
form with AutoScroll in action.
Sometimes you will place components on top of one another to achieve a visual effect. For example, a shadowed box can be created by placing a white box over a black box (both would be Shape components). Obviously you can't have the shadow on top of the box, so you have to order the controls to tell Delphi which controls go on top and which go on the bottom. Let's do a simple exercise that illustrates this. Along the way, you will also see how you can use Copy and Paste with components. First, start with a blank form (you know the drill by now). Now follow these steps:
NOTE: After a paste operation, the component just pasted will be selected.
This exercise illustrates two features of the Form Designer. It shows how you can change the stacking order of controls and how you can use Copy and Paste to copy components. The original component's properties are copied exactly and pasted in as part of the pasting process. Each time you paste a component, it is placed below and to the right of the previous component you pasted.
NOTE: If a component that can serve as a container is selected when you perform Paste, the component in the Clipboard will be pasted as the container component's child. For example, you might want to move a button from the main form to a panel. You can select the button and choose Edit | Cut from the main menu to remove the button from the form and place it in the Clipboard. Then you can select the panel and choose Edit | Paste from the main menu to paste the button onto the panel.
I don't need to go into much detail on the cut operation. When you cut a component, the component disappears from the form and is placed in the Clipboard. Later, you can paste the component onto the form or onto another component such as a Panel component.
TIP: You can also copy a component and paste it into your source code. The results will be something like this:object Edit1: TEdit Left = 24 Top = 16 Width = 457 Height = 21 TabOrder = 0 Text = `Edit1'end
This is not code that will compile, but this technique will give you a component's size and position as it appears on the form. This information comes in handy when you create components on-the-fly at runtime rather than at design time. You can place a dummy component visually on the form, get its size and position using Copy and Paste, and then delete the component. Then you can write code to create the component at runtime and know that it will be properly sized and positioned.
With some components, you drop them on a form and accept the default size. Buttons are a good example. A standard button has a height of 25 pixels and a width of 75 pixels. For many situations, the default button size is exactly what you want. With some components, however, the default size is rarely exactly what you need. A Memo component, for example, nearly always has to be sized to fit the specific form on which you are working.
When you select a control, eight black sizing handles appear around the control. When you place the mouse cursor over one of the sizing handles, the cursor changes to a double-headed arrow known as the sizing cursor. When you see the sizing cursor, you can begin dragging to size the control. How the component is sized depends on which sizing handle you grab.
The sizing handles centered at the top and bottom of the component size it vertically (taller or shorter). Likewise, the right and left sizing handles size the component horizontally (wider or narrower). If you grab one of the sizing handles in the component's corners, you can size both horizontally and vertically at the same time. As with moving a component, a sizing rectangle appears as you drag. When the sizing rectangle is the desired size, let go of the mouse button and the component will be resized. Figure 6.6 illustrates a memo component being sized by dragging; Figure 6.7 shows the form after the drag operation.
NOTE: Sizing applies to visual components only. Nonvisual components appear on the form as an icon that cannot be sized. The sizing handles appear on nonvisual components and the handles can be dragged, but the result of the dragging operation will be ignored.
FIGURE 6.6. A
memo component being sized.
FIGURE 6.7. The
form after sizing the memo component.
Groups of controls cannot be sized by dragging. The sizing handles (black squares) are replaced by selection indicators (gray squares) when you select more than one component.
TIP: To size all the components in a group at one time, modify the Width or Height property in the Object Inspector or use the Size dialog box (the Size dialog box is discussed in the next section). All components in the selection will take on the new values.
TIP: To size a control or group of controls by one pixel at a time, hold down the Shift key and press any arrow key on the keyboard. The up and down arrows size the control vertically and the right and left arrows size it horizontally. Only the component's Width and Height properties are affected. The Top and Left properties are not modified.
Another sizing option is the Size dialog box. You can bring up the Size dialog box by choosing Edit | Size from the main menu. Figure 6.8 shows the Size dialog box.
FIGURE 6.8. The
Size dialog box.
The Size dialog box is used when you want to force a group of controls to the same width or height. For instance, let's say you have six edit components on a form, all with different widths. To make the form appear more balanced, you might want to make all the edit components the same width. First, select the components and then invoke the Size dialog box. From there you can choose Shrink to smallest (in the Width column) to make all the components the width of the shortest edit component, or Grow to largest to make all the components the width of the longest component in the group. You can also enter an exact width in the Width box, in which case you would leave the Height set on No change. When you click OK, the components will all be the same width.
TIP: The Size dialog box can also be invoked from the Form Designer context menu.
Another sizing tool is the Scale dialog box, shown in Figure 6.9. This dialog box enables you to specify a scaling percentage. To make the components twice as large, enter 200 in the Scaling factor box. To reduce the components' size by half, enter 50 in the Scaling factor box. The Scale dialog box is convenient for quickly changing the size of all the form's components. You can bring up the Scale dialog box by choosing Edit | Scale from the main menu or Scale from the Form Designer context menu.
A control can also be sized and moved by using the various Alignment options. Let's take a look at those in the next section.
FIGURE 6.9. The
Scale dialog box.
NOTE: Remember, components can always be moved by modifying their Left and Top properties and sized by modifying their Width and Height properties in the Object Inspector.
Regardless of whether you have the Snap to Grid option turned on, you sometimes need to align components after placing them. Aligning components could mean aligning several components along a common edge, centering components on the form, or spacing components. There are two ways to align components:
The following sections explain these two methods.
NOTE: You might have noticed the Alignment property for some components. This property pertains only to the way the component's text is aligned (centered, right-justified, or left-justified) and has nothing to do with aligning components on a form.
It is often necessary to move or size components relative to the form or relative to one another. The Alignment palette contains several buttons that aid in that task. The Alignment dialog box performs the same operations as the Alignment palette, but in a different format. To display the Alignment palette, choose View | Alignment Palette from the main menu. Figure 6.10 shows the Alignment palette and describes each button. If you pause the mouse cursor over a button on the Alignment palette, a tooltip describing the button will appear.
FIGURE 6.10. The
Alignment palette.
TIP: The Alignment palette can save you a lot of work. Don't spend too much time trying to get controls to line up exactly. Place the components on the form and then use the Alignment palette to position them.
The Align Left Edges button is used to line up components on their left edges. Start with a blank form and then do the following:
FIGURE 6.11. The
form with the buttons randomly placed.
See how easy that is? As long as you have the buttons selected, let's look at another alignment option. The Space Equally Vertically alignment option can now be used to space the buttons evenly. The buttons should still be selected, so all you have to do is click the Space Equally Vertically button on the Alignment palette, and voilą! The buttons are perfectly spaced. The form will now look like Figure 6.12.
FIGURE 6.12.The
form with the buttons aligned and equally spaced.
NOTE: The Space Equally Vertically alignment option spaces the components equally between the first component in the column (the top component) and the last component in the column (the bottom component). Be sure to set the first and last components where you want them before choosing the Space Equally Vertically alignment option. This is true of the Space Equally Horizontally alignment option as well.
The Center Horizontally in Window and Center Vertically in Window alignment options do exactly as their names indicate. These options are convenient for centering a single control on the form or for centering a group of controls. As long as you still have the group of buttons selected, click both the Center Horizontally in Window and Center Vertically in Window buttons on the Alignment palette. The buttons will be centered on the form both horizontally and vertically.
NOTE: When you select a group of controls and click one of the centering buttons, the controls will be treated as a group. If you choose each control individually and center it both horizontally and vertically on the form, all the controls will be stacked on top of one another in the middle of the form. By selecting the group and then centering, you get the entire group centered as you intended.
The form will now look like the one shown in Figure 6.13.
FIGURE 6.13.The
form with the buttons centered.
NOTE: The Center Horizontally in Window and Center Vertically in Window alignment options can be used to align components contained within other components, such as buttons on a panel. The components will be centered horizontally or vertically on their parent component regardless of whether the parent is a panel, a form, or some other container component.
The Align Tops, Align Bottoms, and Align Right Edges options work just like the Align Left Edges option you used earlier. There's not much point in going over all the possibilities that exist for their use.
TIP: The first component selected will be the anchor point when using any edge-alignment option. Refer to Figure 6.4. Let's say you selected Button3 first and then used Shift+click to select the remaining buttons. When you choose Align Left Edges, Button3 will remain where it is and all the other buttons will line up with Button3's left edge because Button3 is the anchor component.
The Align Horizontal Centers and Align Vertical Centers options can be used to center components relative to one another. This is best illustrated with shapes. Start with a new form (or delete the buttons from the form you have been working on). Now do the following:
Did you see the effect as you performed the last two steps? Notice that because you selected the black circle first, it did not move (it is the anchor component), but the white circle moved as you clicked the alignment buttons. You can use these alignment options to center any number of controls on one another. These two alignment options have no effect when used on a single control.
Like the Component palette, the Alignment palette has a context menu associated with it. Place the mouse cursor over the Alignment palette and click the secondary mouse button. The context menu is displayed. Table 6.2 lists the items on the Alignment palette's context menu and explains their uses.
| Menu Item | Description |
| Stay on Top | Forces the Alignment palette to always be on top. This is useful if you are frequently switching back and forth between the Form Designer and the Code Editor. Because the Alignment palette is a small window, it's easy to lose it. |
| Show Hints | Turns the hints (tooltips) for the Alignment palette buttons on and off. |
| Hide | Hides the Alignment palette. (You can also use the close box on the |
| Alignment palette to hide it.) To show the Alignment palette again, you | |
| have to choose View | Alignment Palette from |