Lab 4: Creating the STUpload User Interface

In this lab, you will develop the user interface for the STUpload application. You will create menu commands, edit the toolbar, and create dialog box templates. It is assumed that you have completed the exercises in this chapter and are familiar with the operation of the resource editors.

We have provided application icons and toolbar button bitmaps for you. To ensure that your project corresponds to this lab, replace your current development folder with a copy of the Chapter4\Lab\Partial\STUpload folder (and its subfolders) found on the companion CD.

Editing the STUpload Application Menu

In the first part of this lab, you will design the STUpload application menu in accordance with the customer requirements, as described in Lab 1. At this point, you should think about the functionality that the application is going to offer. Use the AppWizard-generated menus as a basis to plan how that functionality will be presented to the user as a set of menu choices.

You will recall that the user is able to load ASCII text files into the application and can save the data that these files contain in the application's document format. You will also implement the standard printing facilities offered by an MFC document/view application. Therefore, you will want to retain the File menu in the STUpload application interface.

The STUpload application will display a graph of the data that is loaded in from the text file. Users will not be able to interact with the data, and the graph will not contain selectable elements; therefore, you do not need to implement the Edit menu.

To remove the Edit menu

1. Open the STUpload project in Visual C++.
2. Click the ResourceView tab and expand the STUpload resources.
3. Expand the Menu folder.
4. Double-click the IDR_MAINFRAME menu resource to open the menu editor.
5. On the menu bar, click Edit, press DELETE, and then press ENTER to confirm removal of the Edit menu.

In place of the Edit menu you will create the Data menu, which provides options for importing data from a text file, uploading imported data to the central database, and querying and browsing the central database.

To add the Data menu

1. Click the blank menu command to the right of the title bar.
2. Drag the blank command and drop it between the File and View menu commands.
3. Double-click the blank menu command to display its properties. Type &Data as the Caption property.

To add the Import menu command to the Data menu

1. Click the blank command under the Data menu title.
2. Type the string &Import…\tCTRL+I . As you start typing, the Menu Item Properties dialog box will appear, and your text will be entered into the Caption box.
3. In the Prompt box, type Import data from file\nImport from file.
4. Click the thumbtack icon in the upper-left corner of the Menu Item Properties dialog box to keep the dialog box open while you edit different menu commands.
5. Click on another command, then click again on the Import menu command. Confirm that the editor has constructed the menu command ID ID_DATA_IMPORT.
6. Repeat the process just outlined to add the commands listed in Table 4.3 below the Import command on the Data menu.

Table 4.3 Data Menu Commands

Caption	Prompt	ID (Generated by editor)
&Upload\tCTRL+U	Upload data to central database\nUpload Data	ID_DATA_UPLOAD
&Query Database...\tCTRL+Q	Query the central database\nQuery Database	ID_DATA_QUERYDATABASE

Recall that the application loads text files that contain data from a number of different funds, and that the user should be able to select which fund to view. In a subsequent exercise, you will be implementing a Select Fund window—a modeless dialog box that contains a list of funds from which the user can select. In this exercise, you will create a menu command to allow the user to show or hide the Select Fund window. You will create this command on the View menu because this command is similar in function to the standard Toolbar and Status Bar options provided for the View menu by default.

To add the Select Fund command to the View menu

1. Select the View menu title.
2. Drag the empty command at the bottom of the menu to the top of the menu, above the Toolbar command.
3. Type the caption and prompt as indicated in Table 4.4.

Table 4.4 Select Fund Caption and Prompt ID

Caption	Prompt	ID (Generated by editor)
&FundSelection	View Select Fund window\nFund Selection	ID_VIEW_FUNDSELECTION

Adding New Shortcut Keys

You will now add shortcut keys for your new menu commands.

To define shortcut keys

1. In ResourceView, expand the Accelerator folder.
2. Double-click the IDR_MAINFRAME accelerator resource to open the accelerator editor.
3. Double-click the blank entry at the bottom of the list of accelerator entries. The Accelerator Properties property page should appear.
4. In the ID list, click ID_DATA_IMPORT.
5. Type I in the Key box and select the Ctrl modifier check box. Clear the Shift check box if it is selected.
6. Close the property page. The accelerator is added to the table.
7. Repeat this process to add the two shortcut keys in Table 4.5.

Table 4.5 Accelerator Table Entries

ID	Shortcut Key
ID_DATA_UPLOAD	CTRL+U
ID_DATA_QUERYDATABASE	CTRL+Q

Editing the STUpload Application Toolbar

If you open the IDR_MAINFRAME toolbar resource for the STUpload application, you will see that we have supplied a new toolbar bitmap for your use. The bitmap contains icons for the Import, Upload, and Query Database commands. The new toolbar is illustrated in Figure 4.14.

Figure 4.14 The STUpload application toolbar

Your next task will be to associate the toolbar buttons with the command IDs that you created for the new menu commands.

To associate a toolbar button with a command ID

1. In ResourceView, expand the Toolbar folder.
2. Double-click the IDR_MAINFRAME toolbar resource to open the toolbar editor.
3. Click the Import toolbar button.
4. Press ENTER to open the Toolbar Button Properties dialog box. You will see that the button is still associated with the ID_EDIT_CUT ID.
5. In the ID list, click ID_DATA_IMPORT. This is the ID that was generated when you created the Import menu command.
6. Click the thumbtack icon to keep the Properties dialog box open. Following the procedure just outlined, change the command IDs of the other new buttons as specified in Table 4.6.

Table 4.6 Toolbar Button Command IDs

Button	Old ID	New ID
Upload	ID_EDIT_COPY	ID_DATA_UPLOAD
Query	ID_EDIT_PASTE	ID_DATA_QUERYDATABASE
Select Fund	ID_APP_ABOUT	ID_VIEW_FUNDSELECTION

Creating STUpload Application Dialog Boxes

In this portion of the lab, you will be creating two dialog boxes for the STUpload application: the Conflicting Record dialog box and the Select Fund dialog box.

Conflicting Record Dialog Box

The Conflicting Record dialog box will contain a rich edit control—an edit control that can display rich text format (RTF) text, and three buttons labeled Yes, No, and Abort. The dialog box will warn the user of conflicting data records during the import process. The edit control will display details of the existing and new records, which have the same fund and date values, but different price values. The user will decide whether to replace the existing record, leave the existing record and discard the new record, or abort the import process altogether.

The Conflicting Record dialog box is shown in Figure 4.15. You can use this illustration as a guide when following through this section of the lab.

Figure 4.15 The Conflicting Record dialog box

To create the Conflicting Record dialog box

1. In ResourceView, expand the STUpload resources folder.
2. Right-click the Dialog folder. Click Insert Dialog. A new blank dialog box appears.
3. Resize the dialog box so that it measures 3 inches tall by 4 inches wide.
4. Press ENTER to edit the properties.
5. On the General tab, change the dialog resource ID by typing IDD_CONFLICT_DIALOG in the ID box.
6. In the Caption box, type Conflicting Record.
7. Change the OK button caption to read Yes, but do not change the IDOK command ID. Change the Cancel button caption to read No, but do not change the IDCANCEL command ID.
8. Copy the Cancel button to create a new button. Click the new button and type Abort to set the caption. In the ID list, click IDABORT. Close the Properties dialog box.
9. Reorganize the buttons so that they appear as in Figure 4.15.

To add a static text control to the dialog box

1. Locate and click the Static Text drawing tool.
2. Just above the Yes button, draw a static text box that extends across the dialog box but is no deeper than a single line of text.
3. With the static text box selected, type Replace with new record?
4. Close the Text Properties dialog box that has appeared. Using Figure 4.15 as a guide, ensure that the text item is in an appropriate position and the text displays fully.

To add a rich edit control to the dialog box

1. Using the ToolTips feature, click the Rich Edit tool on the Controls toolbar. Do not confuse this with the regular Edit Box tool.
2. With the crosshair pointer, draw a rich edit control box as shown in Figure 4.15. This should be as wide as the dashed drawing guides in the editor and deep enough to take six lines of text.
3. Press ENTER to edit the properties.
4. On the General tab, change the control ID by typing IDC_CONFLICT_RICHEDIT in the ID box.
5. On the Styles tab, select the Multiline and Read Only check boxes.
6. Close the Rich Edit Properties dialog box.
7. From the Layout menu of the Visual Studio main window, click Tab Order.
8. Click first on the Yes button, then on the No button, and then on the Abort button to set the tab order.
9. Press CTRL+T to test the operation of the dialog box.

Select Fund Window

As mentioned in the Editing the STUpload Application Menu section earlier in this lab, the Select Fund window will be implemented as a modeless dialog box. This dialog box will contain a list box control that allows the user to select from all the fund names currently loaded into the application.

The Select Fund dialog box is shown in Figure 4.16.

Figure 4.16 The Select Fund dialog box

To create the Select Fund dialog box

1. In ResourceView, right-click the Dialog folder.
2. Click Insert Dialog. A new blank dialog box appears. Use the center bottom resize handle to shrink the height of the dialog box to about 1.75 inches.
3. Press ENTER to edit the properties.
4. Type IDD_FUNDDIALOG in the ID text box.
5. Type Select Fund in the Caption text box.
6. On the Styles tab, clear the System menu check box.
7. On the Extended Styles tab, select the Tool window check box.
8. Close the Dialog Properties sheet.

To add a list box control

1. Click List Box on the Controls toolbar.
2. Use the crosshair pointer to draw a list box to fit the height of the drawing guides. The list box should be about 1 inch wide, as shown in Figure 4.14.
3. Press ENTER to edit the properties.
4. On the General tab, type IDC_FUNDLIST in the ID box.
5. Close the list box property sheet.

You will now add dialog classes for your Conflicting Record and Select Fund dialog boxes. In Lesson 2 of this chapter, you learned that you could create dialog classes automatically by invoking ClassWizard from within the dialog editor. In the following exercises, you will use ClassWizard to create the class without having the dialog editor open. This will demonstrate how ClassWizard automates the creation of any class that is derived from an MFC class.

To create the dialog classes

1. On the Window menu, click Close All.
2. On the ClassView tab, press CTRL+W to open ClassWizard.
3. Click Add Class. Select New from the pop-up menu.
4. The New Class dialog box appears as shown in Figure 4.17.



Figure 4.17 The New Class dialog box

5. In the Name box, type CConflictDialog.
6. In the Base Class list, click CDialog. Note that you can derive your class from any MFC class. Note, too, that the selection of the CDialog class enables the Dialog ID list box.
7. In the Dialog ID list, click IDD_CONFLICT_DIALOG.
8. Click OK to create the new class.
9. Repeat the procedure to add a dialog class for the Select Fund dialog box. The class name should be CFundDialog, the class should be derived from the CDialog class, and the class should be based on the IDD_FUNDDIALOG dialog ID.
10. Click OK to close ClassWizard. Note that the new classes have been added to the MyApp classes tree.

Using Common Dialog Boxes

In the final part of this lab, you will learn how to use a Windows common file dialog box by creating an instance of the MFC class CFileDialog. The Import command of the STUpload application is used to locate and open a text file to import into the application. You will create a handler for the Import command that will (for now) simply display a Windows common file dialog box with the file type filter set to show only files with a .dat extension. Because the task of the handler function is to load the application data, you will create the function as a member of the application's document object CSTUploadDoc.

To create the Import command handler function

1. Press CTRL+W to open ClassWizard.
2. In the Class Name list, click CSTUpload.
3. In the Object IDs list, click ID_DATA_IMPORT.
4. In the Messages list, click COMMAND.
5. Click Add Function, and then click OK to accept the name OnDataImport.

To implement the OnDataImport() function

1. Click Edit Code to edit the function implementation.
2. In Windows Explorer, locate the \Chapter 4\Code folder on the companion CD.
3. Double-click the CH4_01.cpp file to edit it in Visual C++. The file contains the following code:

// String to customize File Dialog CString strFilter = Data Files (*.dat)|*.dat|All Files (*.*)|*.*||"; CFileDialog aFileDialog(TRUE, NULL, NULL,      OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, strFilter); int nID = aFileDialog.DoModal();

This code creates an object of the MFC class CFileDialog. The filter string passed to the constructor specifies that the Windows common file dialog box will be created with a filter set to show only files with a .dat extension, although the user will also be able to select the "all files" *.* filter. The dialog box is activated by a call to the base class method CDialog::DoModal().

4. Select all the text in the CH4_01.cpp file and press CTRL+C to copy the code to the clipboard. Close the CH4_01.cpp file.
5. Return to the implementation of the OnDataImport() function. Select the entire // TODO comment line.
6. Press CTRL+V to replace this line with the code on the clipboard.

You can now build and run the STUpload application. Test the menu and toolbar prompt and ToolTip features. Click Import on the Data menu to ensure that the common file dialog box appears as expected. You can browse to find the file Ch4Test.dat in the \Chapter 4\Data folder on the companion CD. You will provide further implementation of the Import command in Lab 5.

You will not be able to see the dialog boxes that you have created at this point. Although you have created templates and classes for them, you have not yet created instances of those classes within your application code. We will create these instances in Lab 5.