ch01.htm

VC 21天 学习VC 的好东西

	the Developer Studio area.
</UL>


<DL>
	<DT></DT>
	<DD><B>8. </B>Select Build | Build Hello.exe to compile your application.
	<P>
	<DT></DT>
	<DD><B>9. </B>As the Visual C++ compiler builds your application, you see progress
	and other compiler messages scroll by in the Output pane. After your application
	is built, the Output pane should display a message telling you that there were no
	errors or warnings, as in Figure 1.9.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig08.gif')"><B>FIGURE 1.8.</B></A><B> </B><I>Your
workspace with a tree view of the project's classes.</I></P>

<P><A HREF="javascript:popUp('01fig09.gif')"><B>FIGURE 1.9.</B></A><B> </B><I>The
Output pane displays any compiler errors.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>10. </B>Select Build | Execute Hello.exe to run your application.
	<P>
	<DT></DT>
	<DD><B>11. </B>Your application presents a dialog with a TODO message and OK and
	Cancel buttons, as shown in Figure 1.10. You can click either button to close the
	application.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig10.gif')"><B>FIGURE 1.10.</B></A><B> </B><I>The
unmodified application shell.</I></P>

<P><I></I>
<H2><A NAME="Heading9"></A>Designing Your Application Window</H2>
<P>Now that you have a running application shell, you need to turn your focus to
the window layout of your application. Even though the main dialog window may already
be available for painting in the editor area, you should still navigate to find the
dialog window in the workspace so that you can easily find the window in subsequent
develop-ment efforts. To redesign the layout of your application dialog, follow these
steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Select the Resource View tab in the workspace pane, as in Figure 1.11.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig11.gif')"><B>FIGURE 1.11.</B></A><B> </B><I>The
Resource View tab in the workspace pane.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>2. </B>Expand the resources tree to display the available dialogs. At this
	point, you can double-click the IDD_DAY1_DIALOG dialog to open the window in the
	Developer Studio editor area.
	<P>
	<DT></DT>
	<DD><B>3. </B>Select the text displayed in the dialog and delete it using the Delete
	key.
	<P>
	<DT></DT>
	<DD><B>4. </B>Select the Cancel button, drag it down to the bottom of the dialog,
	and resize it so that it is the full width of the layout area of the window, as in
	Figure 1.12.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig12.gif')"><B>FIGURE 1.12.</B></A><B> </B><I>Positioning
the Cancel button.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>5. </B>Right-click the mouse over the Cancel button, opening the pop-up menu
	in Figure 1.13. Select Properties from the menu, and the properties dialog in Figure
	1.14 opens.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig13.gif')"><B>FIGURE 1.13.</B></A><B> </B><I>Right-clicking
the mouse to open a pop-up menu.</I></P>

<P><A HREF="javascript:popUp('01fig14.gif')"><B>FIGURE 1.14.</B></A><B> </B><I>The
Cancel button properties dialog.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>6. </B>Change the value in the Caption field to &amp;Close. Close the properties
	dialog by clicking the Close icon in the upper-right corner of the dialog.
	<P>
	<DT></DT>
	<DD><B>7. </B>Move and resize the OK button to around the middle of the window, as
	in Figure 1.15.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig15.gif')"><B>FIGURE 1.15.</B></A><B> </B><I>Positioning
the OK button.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>8. </B>On the OK button properties dialog, change the ID value to IDHELLO
	and the caption to &amp;Hello.
	<P>
	<DT></DT>
	<DD><B>9. </B>Now when you compile and run your application, it will look like what
	you've just designed, as shown in Figure 1.16.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig16.gif')"><B>FIGURE 1.16.</B></A><B> </B><I>Running
your redesigned application.</I></P>


<BLOCKQUOTE>
	<P>
<HR>
<STRONG>NOTE:</STRONG> If you play with your application, you will notice that the
	Close button still closes the application. However, the Hello button no longer does
	anything because you changed the ID of the button. MFC applications contain a series
	of macros in the source code that determine which functions to call based on the
	ID and event message of each control in the application. Because you changed the
	ID of the Hello button, these macros no longer know which function to call when the
	button is clicked. 
<HR>


</BLOCKQUOTE>

<H2><A NAME="Heading10"></A>Adding Code to Your Application</H2>
<PRE>You can attach code to your dialog through the Visual C++ Class Wizard. You can use the Class Wizard to build the table of Windows messages that the application might receive, including the functions they should be passed to for processing, that the MFC macros use for attaching functionality to window controls. You can attach the functionality for this first application by following these steps:
</PRE>

<DL>
	<DT></DT>
	<DD><B>1. </B>To attach some functionality to the Hello button, right-click over
	the button and select Class Wizard from the pop-up menu.
	<P>
	<DT></DT>
	<DD><B>2. </B>If you had the Hello button selected when you opened the Class Wizard,
	it is already selected in the list of available Object IDs, as in Figure 1.17.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig17.gif')"><B>FIGURE 1.17.</B></A><B> </B><I>The
Class Wizard.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>3. </B>With IDHELLO selected in the Object ID list, select BN_CLICKED in the
	list of messages and click Add Function. This opens the Add Member Function dialog
	shown in Figure 1.18. This dialog contains a suggestion for the function name. Click
	OK to create the function and add it to the message map.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig18.gif')"><B>FIGURE 1.18.</B></A><B> </B><I>The
Class Wizard Add Member Function dialog.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>4. </B>After the function is added for the click message on the Hello button,
	select the OnHello function in the list of available functions, as in Figure 1.19.
	Click the Edit Code button so that your cursor is positioned in the source code for
	the function, right at the position where you should add your functionality.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig19.gif')"><B>FIGURE 1.19.</B></A><B> </B><I>The
list of available functions in the Class Wizard.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>5. </B>Add the code in Listing 1.1 just below the TODO comment line, as shown
	in Figure 1.20.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig20.gif')"><B>FIGURE 1.20.</B></A><B> </B><I>Source
code view where you insert Listing 1.1.</I></P>

<P><I></I>
<H4>LISTING 1.1.HELLODLG.CPP--THE OnHello FUNCTION.</H4>
<PRE> 1: Void CHelloDlg::OnHello()
 2: {
 3:     // TODO: Add your control notification handler code here
 4: 
 5:     ///////////////////////
 6:     // MY CODE STARTS HERE
 7:     ///////////////////////
 8: 
 9:     // Say hello to the user
10:     MessageBox(&quot;Hello. This is my first Visual C++ Application!&quot;);
11: 
12:     ///////////////////////
13:     // MY CODE ENDS HERE
14:     ///////////////////////
</PRE>

<PRE>15: }</PRE>

<DL>
	<DT></DT>
	<DD><B>6. </B>When you compile and run your application, the Hello button should
	display the message shown in Figure 1.21.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig21.gif')"><B>FIGURE 1.21.</B></A><B> </B><I>Now
your application will say hello to you.</I></P>

<P><I></I>
<H2><A NAME="Heading11"></A>Finishing Touches</H2>
<P>Now that your application is functionally complete, you can still add a few details
to finish off the project. Those finishing touches include</P>

<UL>
	<LI>Creating the dialog box icon
	<P>
	<LI>Adding maximize and minimize buttons
</UL>

<H3><A NAME="Heading12"></A>Creating the Dialog Box Icon</H3>
<P>If you noticed the icon in the top-left corner of your application window, you
saw three blocks with the letters M, F, and C. What does MFC have to do with your
application? MFC stands for Microsoft Foundation Classes. Technically, it's the C++
class library that your application is built with, but do you want to broadcast that
to every user who sees your application? Most likely not. You need to edit the application
icon to display an image that you do want to represent your application. Let's get
busy!</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>In the tree view of your application resources in the workspace pane,
	expand the icon branch and select the IDR_MAINFRAME icon, as in Figure 1.22. This
	brings the application icon into the editor area of the Developer Studio.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig22.gif')"><B>FIGURE 1.22.</B></A><B> </B><I>The
standard MFC icon.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>2. </B>Using the painting tools provided, repaint the icon to display an image
	that you want to use to represent your application, as in Figure 1.23.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig23.gif')"><B>FIGURE 1.23.</B></A> <I>Your own
custom icon for your application.</I></P>

<DL>
	<DT><I></I></DT>
	<DD><B>3. </B>When you compile and run your application, you will notice your custom
	icon in the top-left corner of your application window. Click the icon and select
	About Hello from the drop-down menu.
	<P>
	<DT></DT>
	<DD><B>4. </B>On the About dialog that Visual C++ created for you, you can see a
	large version of your custom icon in all its glory, as shown in Figure 1.24.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig24.gif')"><B>FIGURE 1.24.</B></A><B> </B><I>Your
application's About window.</I></P>


<BLOCKQUOTE>
	<P>
<HR>
<STRONG>NOTE:</STRONG> When you open an application icon in the icon designer, the
	icon is sized by default at 32x32. You can also select a 16x16 size icon from the
	drop-down list box just above where you are drawing the icon. You should draw both
	of these icons because there are some instances in which the large icon will be displayed
	and some instance in which the small icon will be shown. You will want both icons
	to show the same image to represent your application. 
<HR>


</BLOCKQUOTE>

<H3><A NAME="Heading13"></A>Adding Maximize and Minimize Buttons</H3>
<P>In the dialog editor, where you design your application window, you can add the
minimize and maximize buttons to the title bar of your application window by following
these steps:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Select the dialog window itself as if you were going to resize the
	window.
	<P>
	<DT></DT>
	<DD><B>2. </B>Using the pop-up menu (from right-clicking the mouse), select the dialog
	properties.
	<P>
	<DT></DT>
	<DD><B>3. </B>Select the Styles tab, as shown in Figure 1.25.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig25.gif')"><B>FIGURE 1.25.</B></A><B> </B><I>Turning
the minimize and maximize buttons on and off.</I></P>

<DL>
	<DT><I><BR>
	</I></DT>
	<DD><B>4. </B>After you turn on the minimize and maximize boxes, you can compile
	and run your application. The minimize and maximize buttons appear on the title bar,
	as in Figure 1.26.
	<P>
</DL>

<P><A HREF="javascript:popUp('01fig26.gif')"><B>FIGURE 1.26.</B></A><B> </B><I>The
application window with the minimize and maximize buttons.</I></P>

<P><I></I>
<H2><A NAME="Heading14"></A>Summary</H2>
<P>Today you got your first taste of building applications using Visual C++. You
learned about the different areas of the Visual C++ Developer Studio and what function
each of these areas serves. You also learned how you can rearrange the Developer
Studio environment to suit the way you work. You also learned how you can use the
Visual C++ wizards to create an applic