ch13.htm

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

based on whether the cool bar is vertical or horizontal. Another way to change the
orientation of the cool bar is by setting the Vertical property.</P>
<P>The Bitmap property enables you to set a background bitmap for the cool bar. The
bitmap you choose will be tiled to fill the cool bar's background. Note that this
sets the background bitmap for the cool bar itself, not for any individual bands
on the cool bar (as discussed in the previous section). You use the ImageList property
to set the image list that the bands will use to display an image to the left of
any band that has its ImageIndex property set.</P>
<P>The AutoSize property determines whether the cool bar will resize itself when
bands are moved. You saw the effect of the AutoSize property in the preceding exercise.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> Check out the TControlBar component on the Additional tab of the
	Component palette. TControlBar is a native VCL component that works very much like
	a cool bar. This component does not rely on COMCTL32.DLL as does TCoolBar, so it
	is less susceptible to the whims of Microsoft. 
<HR>


</BLOCKQUOTE>

<H3><A NAME="Heading4"></A>The ToolBar Component</H3>
<P>The ToolBar component encapsulates the Win32 toolbar control. The toolbar will
automatically arrange and size the controls placed on the toolbar so that they all
have a consistent height. You can use the ToolBar component with or without a cool
bar. If you have only a single toolbar, use the toolbar without a cool bar. If you
have multiple toolbars that you want to enable the user to move, place two or more
toolbars on a cool bar.</P>
<P>Creating a toolbar and adding buttons to it is very easy. If your toolbar buttons
will have glyphs (and most do), you have to use an ImageList component for the glyphs.
To illustrate how to build a toolbar with the ToolBar component, let's again go back
to the ScratchPad program. You'll tear it apart and put it back together.</P>
<P>
<H4>Removing the Old Toolbar</H4>
<P>If you recall, the toolbar you created for ScratchPad originally was just a placeholder.
The first thing you need to do is get rid of the old toolbar by performing these
steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Click the Memo component and change its Align property to alNone. Drag
	down the top of the Memo to make room for the new toolbar.
	<P>
	<DT></DT>
	<DD><B>2. </B>Click the toolbar component and delete it.
	<P>
</DL>

<H4>Adding a New Toolbar</H4>
<P>Now you can start adding components back again. The first thing to do is add a
cool bar and a toolbar. You don't really need a cool bar at this stage because you
have only one toolbar, but you might want to add another toolbar later, so it's best
to plan ahead. Perform these steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Drop a CoolBar component on the form. It automatically aligns itself
	to the top of the form. Change its Name property to CoolBar.
	<P>
	<DT></DT>
	<DD><B>2. </B>Drop a ToolBar component on the cool bar. Change its Name property
	to MainToolBar.
	<P>
	<DT></DT>
	<DD><B>3. </B>Double-click the EdgeBorders property in the Object Inspector to show
	all the edge border items. Change the ebTop style to False (all EdgeBorders styles
	should now be False).
	<P>
	<DT></DT>
	<DD><B>4. </B>Change the Flat property to True. This gives the toolbar buttons a
	flat appearance until the cursor passes over them.
	<P>
	<DT></DT>
	<DD><B>5. </B>Click the cool bar and change the AutoSize property to True. The cool
	bar sizes itself to the size of the toolbar.
	<P>
	<DT></DT>
	<DD><B>6. </B>Click the Memo component and change its Align property back to alClient.
	<P>
</DL>

<H4>Adding Buttons to the Toolbar</H4>
<P>Now you begin adding buttons to the toolbar; you will add several buttons and
a few spacers. At first the buttons won't have glyphs on them, but you'll take care
of that later. For now, follow these steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Right-click the toolbar and choose New Button. A button is placed on
	the toolbar. Change the button's Name property to FileNewBtn. Set the Hint property
	to New|Create A New File and the ShowHint property to True. (Remember when you wrote
	the hint code on Day 8? That code is still in the program, so the new hints will
	work immediately.)
	<P>
	<DT></DT>
	<DD><B>2. </B>Right-click on the toolbar and again choose New Button. A second button
	is placed on the toolbar to the right of the first button. Change its Name property
	to FileOpenBtn. Set the Hint property to Open|Open An Existing File and the ShowHint
	property to True.
	<P>
	<DT></DT>
	<DD><B>3. </B>Add another button. Change this button's Name property to FileSaveBtn.
	Set the Hint property to Save|Save A File and the ShowHint property to True.
	<P>
</DL>



<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> Buttons and spacers added to the toolbar always appear to the right
	of the toolbar's last control. You can't insert a button at a specific location in
	the toolbar, but after a button or spacer is added, you can drag it to a different
	location on the toolbar. The existing buttons will make room for the new button.
	
<HR>


</BLOCKQUOTE>

<P>That finishes the first set of buttons (except for the glyphs). You are about
to add a second set of buttons, but before you do, there needs to be a little separation
between the first set of buttons and the second. Back to work:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Right-click on the toolbar again, but this time choose New Separator.
	A separator is added to the toolbar.
	<P>
	<DT></DT>
	<DD><B>2. </B>Add another button. This time change the Name property to EditCutBtn
	and the Hint property to Cut|Cut To Clipboard.
	<P>
	<DT></DT>
	<DD><B>3. </B>Add buttons for Copy and Paste. Change their Name and Hint properties
	as appropriate.
	<P>
	<DT></DT>
	<DD><B>4. </B>Add another separator.
	<P>
	<DT></DT>
	<DD><B>5. </B>Add a button called HelpAboutBtn. Change its Hint property to About|About
	ScratchPad.
	<P>
	<DT></DT>
	<DD><B>6. </B>Select the Cut, Copy, Paste, and Help buttons (use Shift+-Click to
	select each button). Change the ShowHint property to True. It will be changed for
	all buttons selected.
	<P>
</DL>

<P>Your form now looks like the one shown in Figure 13.3.</P>

<DL>
	<DT><A HREF="javascript:popUp('28671303.gif')"><B>Figure 13.3.</B></A><B> </B><I>The
	ScratchPad main form after adding a toolbar.</I></DT>
</DL>

<P>
<H4>Making the Toolbar Buttons Functional</H4>
<P>You now have a good start on the toolbar, but the toolbar buttons don't do anything
because you haven't assigned any event handlers to their OnClick events. Let's do
that next.</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Click the FileNewBtn (the first button) and select the Events page
	in the Object Inspector. Click the drop-down arrow next to the OnClick event and
	choose FileNewClick. The button is now hooked up to the FileNewClick event handler.
	<P>
	<DT></DT>
	<DD><B>2. </B>Repeat step 1 for each remaining button, being careful to select the
	appropriate OnClick handler for each button (FileOpenClick, FileSaveClick, EditCutClick,
	and so on).
	<P>
	<DT></DT>
	<DD><B>3. </B>If you haven't yet created an About Box for ScratchPad, create one.
	When you are done, create an event handler for the Help|About menu item. Hook the
	OnClick event of the HelpAboutBtn to the event handler for the Help|About menu item.
	<P>
</DL>

<H4>Adding Bitmaps to the Toolbar Buttons</H4>
<P>Obviously this toolbar is missing something. You need to add glyphs to the toolbar
buttons. To do so, you must add an ImageList component to the form by following these
steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Place an ImageList component on the form. (You find it on the Win32
	tab of the Component palette.) Change the Name property to ImageList.
	<P>
	<DT></DT>
	<DD><B>2. </B>Right-click the ImageList component's icon on your form and choose
	ImageList Editor. The ImageList Editor is displayed. (You can also double-click the
	ImageList icon on your form to display the ImageList Editor.)
	<P>
	<DT></DT>
	<DD><B>3. </B>Click the Add button. Navigate to the Common Files\Borland Shared\Images\
	Buttons directory. Select the FILENEW.BMP file and click Open.
	<P>
	<DT></DT>
	<DD>A message box appears and asks whether you want to separate the bitmap into two
	images. What is happening here is that the image list's Width and Height properties
	are both set to 16. The bitmap you have selected is wider than 16 pixels, so it has
	to be split into two images or shrunk to fit. If you recall, the button bitmaps that
	come with Delphi are a single bitmap with two images. The first image is the normal
	button bitmap, and the second image is for the disabled button. You will have the
	ImageList Editor split the bitmap into two images, and then you will delete the second
	part of the image.
	<P>
	<DT></DT>
	<DD><B>4. </B>Click Yes to have the ImageList Editor split the bitmap into two images.
	The ImageList Editor now shows two images. You need only the first of these images,
	so click on the second image (the disabled button image) and click the Delete button.
	<P>
	<DT></DT>
	<DD><B>5. </B>Click the Add button again. This time choose the FILEOPEN.BMP file.
	Click Yes again when prompted to split the bitmap into two images. Click on the disabled
	image for this bitmap and delete it. Figure 13.4 shows the image editor as it looks
	just before deleting the second image.
	<P>
</DL>

<P><A HREF="javascript:popUp('28671304.gif')"><B>FIGURE 13.4.</B></A><B> </B><I>The
ImageList Editor after adding three images.</I></P>
<P>

<DL>
	<DT><I></I></DT>
	<DD><B>6. </B>Repeat step 5 for each remaining button (File Save, Cut, Copy, Paste,
	and About). Use any bitmaps you like, but make certain you delete the extra bitmap
	each time you add an image to the list. Also make sure that the images in the ImageList
	editor follow the order of the buttons on the toolbar. When you are done, you will
	have seven images in the image list, numbering from 0 to 6.
	<P>
	<DT></DT>
	<DD><B>7. </B>Click OK to close the ImageList Editor.
	<P>
</DL>



<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> You can select multiple images in the ImageList Editor's Add Images
	dialog box and add them all to the image list at one time. 
<HR>


</BLOCKQUOTE>

<P>Now you are ready to hook the image list to the toolbar. Click on the toolbar.
Locate the Images property in the Object Inspector and choose ImageList from the
drop-down list. If you did everything right, your buttons now have glyphs. You probably
didn't notice, but each time you added a toolbar button, Delphi automatically incremented
the ImageIndex property for the button. Because you created the buttons and images
in the same order, the glyphs on the buttons should be correct. If a button is wrong,
you can either change the button's ImageIndex property or go back to the ImageList
Editor and change the order of the images in the image list.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> To rearrange the images in an image list, drag them to a new position
	in the ImageList Editor. 
<HR>


</BLOCKQUOTE>

<H4>Disabled Button Glyphs</H4>
<P>Right now you have glyphs only for the buttons in the enabled state. You also
need glyphs that will be displayed when the buttons are disabled. You aren't disabling
the toolbar buttons yet, but you will be before the day is done. There are two ways
to implement the disabled button glyphs:</P>

<UL>
	<LI>Let the toolbar create the disabled state glyphs automatically.
	<P>
	<LI>Create a second image list that contains disabled state bitmaps for the buttons.
</UL>

<P>Certainly the easier of these two methods is to let the toolbar create the disabled
state buttons automatically. Most of the time this is sufficient. Sometimes, however,
the algorithm for creating the disabled buttons glyphs doesn't work well. (The glyphs