ch06.htm

delphi自学的好教材！特别适合刚刚起步学习delphi的人员！同样对使用者具有参考价值！

<PRE></PRE>
<P>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.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> When you select a group of controls and click one of the centering
	buttons, the controls will be treated <I>as a group</I>. 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.
	
<HR>


</BLOCKQUOTE>

<P>The form will now look like the one shown in Figure 6.13.</P>
<P><A HREF="javascript:popUp('28670613.gif')"><B>FIGURE 6.13.</B></A><B> </B><I>The
form with the buttons centered.</I></P>


<BLOCKQUOTE>
	<P>
<HR>
<BR>
	<strong>NOTE:</strong> 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. 
<HR>


</BLOCKQUOTE>

<P>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.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> 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. 
<HR>


</BLOCKQUOTE>

<P>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:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Click on the Additional tab on the Component palette and choose the
	Shape component. Click somewhere on the upper left of the form to add the shape.
	<P>
	<DT></DT>
	<DD><B>2. </B>Change the Shape property to stCircle.
	<P>
	<DT></DT>
	<DD><B>3. </B>Change the Width and Height properties to 150.
	<P>
	<DT></DT>
	<DD><B>4. </B>Double-click the Brush property and change its Color property to clBlack.
	<P>
	<DT></DT>
	<DD><B>5. </B>Place another Shape component on the form.
	<P>
	<DT></DT>
	<DD><B>6. </B>Change the second shape's Shape property to stCircle as well. Now you
	have two circles of different sizes on the screen--a white circle and a black circle.
	<P>
	<DT></DT>
	<DD><B>7. </B>Click on the black circle. Hold the Shift key and click on the white
	circle. Both shapes are selected.
	<P>
	<DT></DT>
	<DD><B>8. </B>Choose View | Alignment Palette from the main menu, if necessary (it
	might already be displayed). Arrange the Alignment palette so you can see the two
	shapes on the form. Observe the shapes as you perform the last two steps.
	<P>
	<DT></DT>
	<DD><B>9. </B>Click the Align Vertical Centers button on the Alignment palette. The
	vertical centers are aligned.
	<P>
	<DT></DT>
	<DD><B>10. </B>Click the Align Horizontal Centers button on the Alignment palette.
	The horizontal centers are aligned. Congratulations--you made a tire!
	<P>
</DL>

<P>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.</P>
<P>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.</P>
<P>
<H4>TABLE 6.2. THE ALIGNMENT PALETTE'S CONTEXT MENU ITEMS.</H4>
<P>
<TABLE BORDER="1">
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT"><I>Menu Item</I></TD>
		<TD ALIGN="LEFT"><I>Description</I></TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">Stay on Top</TD>
		<TD ALIGN="LEFT">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.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">Show Hints</TD>
		<TD ALIGN="LEFT">Turns the hints (tooltips) for the Alignment palette buttons on and off.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">Hide</TD>
		<TD ALIGN="LEFT">Hides the Alignment palette. (You can also use the close box on the</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT"></TD>
		<TD ALIGN="LEFT">Alignment palette to hide it.) To show the Alignment palette again, you</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT"></TD>
		<TD ALIGN="LEFT">have to choose View | Alignment Palette from the main menu.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">Help</TD>
		<TD ALIGN="LEFT">Brings up Delphi Help with the Alignment palette page displayed.</TD>
	</TR>
</TABLE>
</P>
<P>The Alignment dialog box performs the same actions as the Alignment palette. To
bring up the Alignment dialog box, choose Edit | Align from the main menu or Align
from the Form Designer's context menu. Figure 6.14 shows the Alignment dialog box.</P>
<P><A HREF="javascript:popUp('28670614.gif')"><B>FIGURE 6.14.</B></A><B> </B><I>The
Alignment dialog box.</I></P>
<P>In most cases, the Alignment palette is easier to use, but you can certainly use
the Alignment dialog box if you prefer.</P>
<P>
<H4>Using the Align Property</H4>
<P>Another type of alignment can be set using the Align property. This property controls
how a component is aligned with its parent. The possible values for the Align property
and a description of each are listed in Table 6.3.</P>
<P>
<H4>TABLE 6.3. POSSIBLE VALUES FOR THE Align PROPERTY.</H4>
<P>
<TABLE BORDER="1">
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT"><I>Value</I></TD>
		<TD ALIGN="LEFT"><I>Description</I></TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">alBottom</TD>
		<TD ALIGN="LEFT">The component is aligned at the bottom of the parent window. A status bar is an example
			of a component aligned along the bottom of a main form.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">alClient</TD>
		<TD ALIGN="LEFT">The component expands to fill the parent window's client area. If other components
			occupy part of the client area, the component fills what client area remains. Examples
			include Memo components, Image components, and RichEdit components.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">alLeft</TD>
		<TD ALIGN="LEFT">The component is aligned along the parent window's left edge. A vertical toolbar
			is an example of a left-aligned component.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">alNone</TD>
		<TD ALIGN="LEFT">The component is placed as designed with no special relationship to the parent. This
			is the default for most components.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">alRight</TD>
		<TD ALIGN="LEFT">The component is aligned along the parent's right edge.</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">alTop</TD>
		<TD ALIGN="LEFT">The component is aligned along the top of the parent's window. A toolbar is an example
			of this type of alignment.</TD>
	</TR>
</TABLE>
</P>
<P>An example helps explain the Align property. Start with a blank form and then
perform these steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Click on the Standard tab on the Component palette and choose a Panel
	component. Place the panel anywhere on the form.
	<P>
	<DT></DT>
	<DD><B>2. </B>Locate the Align property in the Object Inspector (it's at the top
	of the list). Notice that it is set on alNone. Change the Align property to alTop.
	The panel is aligned at the top of the form and it expands to fill the form's width.
	<P>
	<DT></DT>
	<DD><B>3. </B>Try to move the panel back to the middle of the form. The panel will
	snap back to the top.
	<P>
	<DT></DT>
	<DD><B>4. </B>Try to make the panel narrower. Notice that the panel retains its width.
	<P>
	<DT></DT>
	<DD><B>5. </B>Change the panel's height. Note that the panel's height can be changed
	(the width cannot).
	<P>
	<DT></DT>
	<DD><B>6. </B>Change the Align to alBottom. Now the panel is glued to the bottom
	of the form.
	<P>
	<DT></DT>
	<DD><B>7. </B>Change the Align to alRight and then alLeft. The width is now the same
	as the height was before. In effect, the panel is rotated. Again, attempts to move
	the panel or size it vertically fail.
	<P>
	<DT></DT>
	<DD><B>8. </B>Change the Align property to alClient. The panel expands to fill the
	form's entire client area. The panel cannot be resized in any dimension.
	<P>
	<DT></DT>
	<DD><B>9. </B>Change the Align property to alNone. The panel can again be sized and
	moved.
	<P>
</DL>

<P>As you see, changing Align to anything other than alNone effectively glues the
panel to one edge of the form. In the case of alClient, the panel is glued to all
four edges.</P>
<P>
<H3><A NAME="Heading11"></A>Setting the Tab Order</H3>
<P><strong>New Term:</strong> The <I>tab order</I> refers to the order in which components
receive input focus when the user presses the Tab key on the keyboard.</P>
<P>Delphi forms automatically support component navigation using the Tab key. This
means that you can move forward from component to component using Tab and backward
using Shift+Tab.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> There are two types of visual components. <I>Windowed</I> components
	are components that accept keyboard focus, which means that the component can be
	clicked with the mouse or tabbed to with the Tab key. When a component has keyboard
	focus, it either displays a specialized cursor (such as the I-beam cursor in an edit
	control) or has a focus rectangle drawn somewhere on the component. Windowed components
	include the Edit, Memo, ListBox, ComboBox, and Button components, as well as many
	more.</P>
	<P><I>Non-windowed</I> components are components that don't accept keyboard focus.
	Components such as Image, SpeedButton, Label, Shape, and many others are non-windowed
	components.</P>
	<P>The tab order applies only to windowed components. Non-windowed components are
	excluded from the tab order. 
<HR>


</BLOCKQUOTE>

<P>The tab order is initially set based on the order the components were placed on
the form when the form was designed. You can modify the tab order by changing the
TabOrder property for each control in the Object Inspector, but that method is tedious
because you have to go to each control individually. The Edit Tab Order dialog box
provides an easier way (see Figure 6.15).</P>
<P><A HREF="javascript:popUp('28670615.gif')"><B>FIGURE 6.15.</B></A><B> </B><I>The
Edit Tab Order dialog box.</I></P>
<P>The Edit Tab Order dialog box is invoked by choosing Edit | Tab Order from the
main menu. This dialog box displays all windowed components currently on the form;
non-windowed components are not displayed. To change the tab order, click on the
name of the component you want to move in the tab order and then click the up or
down buttons as needed. You can also drag the component to its new position in the
tab order. After you get the tab order the way you want it, click OK to set it that
way. You can confirm the new settings by viewing each control's TabOrder property.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> The tab order starts with 0. The first component in the tab order
	is 0, the second is 1, and so on. 
<HR>
</P>

</BLOCKQUOTE>

<H2><A NAME="Heading12"></A>Building an Example Application</H2>
<P>To illustrate how different components work together, let's build a prototype
of an application that resembles Windows Notepad, Windows standard text editor.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> Building a text editor probably doesn't sound too glamorous. To be
	honest, it's not. What building a text editor will do for you, however, is teach
	you how to conquer many of the real-world problems you will encounter when programming
	in Delphi. It might not be glamorous, but it will almost certainly teach you more
	than building Snazzy Gadgets 1.0. 
<HR>


</BLOCKQUOTE>