Lesson 2: Creating Dialog Boxes

In this lesson, you will learn about the different types of dialog boxes used within a Windows application. You will learn how you can visually design and edit a dialog box using the Visual C++ dialog editor, and how to create an instance of a dialog box within your application.

After this lesson, you will be able to:

  • Describe the types of dialog boxes used in a Windows application.
  • Describe how to use the Visual C++ dialog editor to create a dialog box template.
  • Describe how to edit the properties and controls of a dialog box.
  • Describe how to use ClassWizard to create a dialog box class from a template.
  • Describe how to use the dialog box class to create an instance of a dialog box within your code.
Estimated lesson time: 30 minutes

Dialog Boxes

Anyone who has ever used a Windows application should be familiar with the concept of a dialog box. A dialog box is a child window of the main application window that is used to display application status information or to get input from the user. A dialog box contains controls, which are small standardized window objects that can be manipulated by the user to perform an action, or used by the application to display information to the user. For example, a user can enter text into an edit control, or set a simple on/off option through a check box control. The user can select from a predefined list of options in a list box control. The application can relay information to a user through a static text control or with a dynamic progress bar control. Button controls are generally used to start an application procedure or close the currently open dialog box.

Types of Dialog Boxes

There are two types of dialog boxes that accept user input. Modal dialog boxes take control of an application interface and require the user to supply information or cancel the dialog box before continuing with the application. Each AppWizard-generated application provides an About dialog box, which is a good example of a simple modal dialog box. Select the About command from the Help menu in your MyApp application to see how a modal dialog box operates.

Modal dialog boxes are used everywhere; modeless dialog boxes are less common. Modeless dialog boxes do not take control of an application interface, but allow you to work on other areas of the application without closing the dialog box. You can switch between application windows and a modeless dialog box as required.

A good example of a modeless dialog box is the Menu Item Properties dialog box that you used in the previous lesson to set the command ID and command text of the application menu commands. Try opening the menu editor and editing the properties of one of the menu commands. If you keep the Menu Item Properties dialog box open by clicking on the thumbtack icon in the upper-left corner, the dialog box will remain open as you move between menu commands in the editor. You can even add and delete menu commands while the Menu Item Properties dialog box is open.

The Menu Item Properties dialog box is actually a special type of dialog box known as a property sheet. A property sheet presents the user with a tabbed, index card_like selection of property pages, each of which features standard dialog box_style controls. Property sheets are usually used to configure options or settings for objects or applications. They can be modal or modeless in operation.

Creating a Dialog Box Template

The first stage in creating a dialog box is to use the Visual C++ dialog editor to create a dialog box template. A dialog box template is a reusable application resource that is a binary description of a dialog box and the controls it contains. The dialog editor (shown in Figure 4.11) is a visual tool that allows you to lay out the template of a dialog box and its controls on screen, edit their properties, and test their operations.

click to view at full size.

Figure 4.11 The Visual C++ dialog editor

Note the Controls toolbar, which might be docked. You place a control on the dialog box template by selecting the appropriate tool on the Controls toolbar. This action turns your pointer into a control placement tool (usually a crosshair pointer) of the appropriate type.

In the following exercises, you will use the dialog editor to create a template for a dialog box belonging to the MyApp application, which will allow the user to connect to a data source. The user will use a list box control to select a data source name. A read-only edit control will convey information about each data source as its corresponding list item is selected. The dialog box will contain edit controls to allow the user to enter logon information consisting of a user ID, a password, and a numeric privilege level. A check box option will allow users to indicate whether subsequent sessions of the application should attempt to connect to the current data source. The dialog box will contain two buttons, Connect and Cancel. Connect will allow the user to try and connect to the currently selected data source, and Cancel will cancel the operation.

The Connect to Data Source dialog box is shown in Figure 4.12. You can use this illustration as a guide when working through the following exercise.

Figure 4.12 The Connect to Data Source dialog box

  • To create the Connect to Data Source dialog box template
    1. In the MyApp workspace pane, click ResourceView and expand the MyApp resources folder.
    2. Right-click the Dialog folder. Click Insert Dialog. A new blank dialog box appears with default OK and Cancel command buttons.
    3. Click the title bar of the dialog box to select it. Don't click one of the command buttons, because doing so would select the button rather than the entire dialog box.
    4. Use the resize handle on the bottom-right corner of the dialog box to stretch it to 230 pixels wide by 200 pixels tall. The size of the dialog box in pixels is displayed on the status bar when the dialog editor is open.

  • To edit the dialog box properties
    1. With the dialog box selected, press ENTER.
    2. On the General tab, change the dialog resource ID by typing IDD_ CONNECTDIALOG in the ID box. IDD_ is the standard prefix used for dialog resource IDs.
    3. In the Caption box, type Connect to Data Source.
    4. Close the Dialog Properties dialog box.

  • To add a caption for the list box control
    1. On the Controls toolbar, click the Static Text tool.
    2. With the crosshair pointer, draw a static text box against the top left corner of the drawing guide.
    3. With the static text box selected, start typing the text &Data Source: The Text Properties sheet will appear automatically, and your typing will be entered into the Caption box.

  • To add a list box control to the dialog box
    1. On the Controls toolbar, click the List Box button.
    2. Use the crosshair pointer to draw a list box beneath the list box caption that you just created. (Refer to Figure 4.12 for a guide to the correct size and position.)
    3. Select the list box and press ENTER to edit the properties.
    4. On the General tab, type IDC_DSNLIST in the ID box.
    5. Explore the other pages on the property sheet. (Press F1 for context-sensitive help.) When you are done, close the list box property sheet.

  • To add a read-only edit control to the dialog box
    1. On the Controls toolbar, click the Edit Box tool.
    2. With the crosshair pointer, draw an edit control box beneath the list box. Position it as shown in Figure 4.12.
    3. Click the edit control to select it, and press ENTER.
    4. On the General tab, change the control ID by typing IDC_DESCRIPTION in the ID box.
    5. On the Styles tab, select the Multiline and Read Only check boxes.
    6. Close the Edit Properties dialog box.

  • To add the logon information edit controls to the dialog box
    1. Using the Static Text tool, create captions for the logon information edit controls shown in Figure 4.12. Type the captions User &ID:, &Password:, and &Access Level:.
    2. Using the Edit Box tool, create an input box for the User ID command (shown in Figure 4.12). Set the control ID to IDC_USERID.
    3. Create an input box for the Password. Set the Control ID to IDC_PASSWORD. On the Styles tab of the property sheet, select the Password check box. This style displays the characters typed by the user as asterisks to preserve the privacy of the user password.
    4. Create an input box for the Access Level command. As shown in Figure 4.10, this should be smaller than the other two input boxes. Set the control ID to IDC_ACCESS. On the Styles tab of the property sheet, select the Number check box so that the edit control will accept only numeric input.

  • To add a check box control to the dialog box
    1. On the Controls toolbar, select the Check Box tool.
    2. With the crosshair pointer, draw a check box control beneath the read-only edit control, as shown in Figure 4.12. Extend the control far enough to the right to accommodate the text shown in the illustration.
    3. Click the check box control to select it.
    4. Press ENTER to edit the properties.
    5. On the General tab, change the control ID by typing IDC_CHECKCONTROL in the ID box.
    6. In the Caption box, type Attempt to connect at application & startup.
    7. Close the Edit Properties dialog box. If the entire caption text is not showing, use the resize handle to extend the control to the right.

  • To reorganize the button layout
    1. Click OK. Type Connec&t. The Push Button Properties sheet will appear automatically and your typing will be entered in the Caption box. Do not change the control ID.
    2. Close the Push Button Properties sheet. Reorganize the Connect button and the Cancel button as shown in Figure 4.12.

    Often, users need to be able to select values from some controls in a dialog box and alter values in others. For example, they might need to make a selection from a list box or enter text in a text box. They usually need to make a selection between two command buttons. To facilitate this movement, the controls need to be selectable. When a particular control is selected, it is said to have the focus.

    When a control has the focus, the user is able to interact with that control. The control with the focus is readily apparent. It looks different from the other controls because it appears with an outline or contains the insertion point or is distinguished in some other way. This provides a clear signal about which control will be affected by the user's actions.

    A user can navigate through the controls displayed on a dialog box by using the TAB key. When the user presses the TAB key, the focus changes from one control to the next. Not all of the controls on a dialog box can necessarily receive the focus. For example, a static text control cannot. But each control capable of receiving the focus gets a turn. The order in which their turns come is known as the tab order.

    The tab order of the controls in a dialog box is set by the developer. The tab order provides a means for navigating among the controls using only the keyboard. This order can be an important aspect of a heavily used application, where the thousands of times a month a user might need to move a hand from the keyboard to manipulate the mouse can add up to lost productivity and increased fatigue.

    Pressing the TAB key moves forward through the tab order. Pressing SHIFT+TAB moves backward through the tab order. When a dialog box is initially displayed, the first selectable control receives the focus.

    On a dialog box with numerous controls, the user may need to press the TAB key many times to reach the control of interest. Access keys are handy in these cases. To provide an access key for a selectable control, place a static text control in the tab order immediately prior to the control to which it is to be assigned and include an ampersand in the displayed text for the static text control.

    When the user presses the access key for the static text control, focus goes to the first selectable control in the tab order after the static text control to which that access key was assigned.

  • To set the tab order
    1. On the Layout menu of the Visual Studio main window, click Tab Order. Numbers representing the current tab order will appear in the upper left corner of each control in the dialog box.
    2. Click the Data Source caption, then the list box control, then each of the input box captions, and then each of the associated input boxes. Next, select the Attempt to connect at application startup check box, then click Connect, and finally click Cancel. The order in which you click determines the tab order.
    3. Click outside the dialog box to finish setting the tab order.

  • To test the dialog box
    1. Click the Test button or press CTRL+T. An instance of your dialog box appears.
    2. Try testing the tab order. Test the access keys to ensure the tab order was set correctly to permit moving among controls using the access keys. Try selecting the different sample commands in the list box, and then try closing the dialog box with the Continue or Cancel button.

    Creating and Using a Dialog Box Class

    Once you have created a dialog box template, you need to create a class to represent the dialog box in your code. The dialog box class should be derived from the MFC class CDialog. This class might contain member variables to represent controls and data items in the dialog box, and methods to handle events arising from user interaction with the controls. The task of creating a dialog box class, and the binding of controls to class data members, is greatly simplified by automatic features of ClassWizard.

    In this lesson, you will use ClassWizard to create a class for your Connect to Data Source dialog box and you will learn how to display the dialog box in your application. You will learn how to work with dialog data and with dialog box controls in Chapter 5.

  • To create the CConflictDialog class
    1. With the IDD_CONNECTDIALOG dialog box open in the dialog editor, press CTRL+W to open ClassWizard. You will see the Adding a Class dialog box shown in Figure 4.13.
    2. Figure 4.13 Adding a new dialog class

    3. With the Create a new class option selected, click OK. The New Class dialog box appears.
    4. In the Name text box, type CConnectDialog. Note the file name that is created by default.
    5. Click OK. The CConnectDialog dialog class is created and selected in the Class Name box of ClassWizard.
    6. Click OK to close ClassWizard.

    Displaying the Dialog Box

    Once you have created a dialog class, displaying a modal dialog box is simply a matter of creating an instance of the dialog class in your code and calling the base class method CDialog::DoModal(). The base class functions CDialog:: OnOK() and CDialog::OnCancel() provide default handling of the IDOK and IDCANCEL messages generated (by default) by the OK and Cancel buttons. Both of these functions call the CDialog::EndDialog() method to close the dialog box. The DoModal() function returns the ID of the button used to close the dialog box.

    An application generated by the MFC AppWizard provides a dialog template and a dialog class for the About dialog box. The code to display the About dialog box is located within the OnAppAbout() member function of the application object, which is the handler function for the ID_APP_ABOUT command ID. The following code snippet illustrates how the OnAppAbout() function in your MyApp application displays the About dialog box:

    void CMyAppApp::OnAppAbout() {      CAboutDlg aboutDlg;      aboutDlg.DoModal(); }

    Modeless dialog boxes are handled differently. Rather than calling DoModal() to activate a modeless dialog box, you call the CDialog::Create() function and pass the resource ID of the dialog box template as a parameter. If the dialog resource has the property WS_VISIBLE, the dialog box appears immediately. If it does not, you must call the base class member function CWnd::ShowWindow() to display the dialog box. The ShowWindow() function accepts a single parameter, which can be any of a number of predefined values, that specifies how the window is to be shown. The values generally used with a modeless dialog box are SW_SHOW to display the dialog box, and SW_HIDE to hide it.

    NOTE
    If you need to remind yourself of the inheritance hierarchy of the CDialog class, refer to Figure 3.1 in Chapter 3.

    Because modal dialog boxes take control of an application interface, they are usually created as they are needed. An object that represents a modal dialog box will be declared just before it is used, and will be allowed to go out of scope once the dialog box has been closed and the user responses have been processed.

    Modeless dialog boxes tend to exist for the lifetime of the application and are simply shown or hidden in response to user commands. Modeless dialog boxes are often created early on in the application, usually as members of one of the application classes. SW_SHOW and SW_HIDE are used to show or hide the dialog box as the application demands. Modeless dialog boxes are similar to application toolbars in this respect. Toolbar objects are created at application startup as members of the CMainFrame class and are always available to be shown or hidden as the user selects or clears the Toolbar menu option.

    You will learn more about how to use modal and modeless dialog boxes in Chapter 5. In the following exercise, you will see how to make the Connect menu option of the MyApp application display the Connect to Data Source dialog box.

  • To display the Connect to Data Source dialog box
    1. In the MyApp project, click the ClassView tab and expand the CMyAppApp class icon.
    2. Double-click the OnUpdateConnect() function icon to locate the user- interface update command handler.
    3. Remove the single line of implementation code that reads:
    4. pCmdUI->SetCheck(m_isDatabaseConnected);

    5. Locate the OnConnect() handler function. Replace the current line of implementation code that reads
    6. m_isDatabaseConnected = m_isDatabaseConnected ? FALSE : TRUE;

      with the following lines:

      CConnectDialog aCD; aCD.DoModal();

    7. At the top of the MyApp.cpp file, along with the other #include statements, add the following line:
    8. #include "ConnectDialog.h"

    9. Build and run the MyApp application. On the Data menu, click Connect, and verify that the Connect to Data Source dialog box appears. Note that although we have changed the OK command button caption to Connect, it retains the IDOK ID and will therefore call the default OnOK() handler to close the dialog box.

    At present, you cannot do much with this dialog box. In the next chapter, you will add code to set and retrieve dialog box data and process messages from controls.

    Common Dialog Classes

    MFC supplies several classes derived from CDialog that encapsulate the "common dialog boxes" supplied as part of the Windows common dialog library COMMDLG.DLL. These dialog boxes simplify common Windows application tasks such as locating and opening files or specifying print job information. Common dialog boxes should always be used where appropriate to ensure that your application presents a standard interface to the users and complies with the Windows Logo requirements.

    The five common dialog classes provided by MFC are listed in Table 4.2.

    Table 4.2 Windows Common Dialog Boxes

    Dialog ClassDescription
    CColorDialogUsed to select colors.
    CFileDialog Used to select a filename to open or save.
    CFindReplaceDialogUsed to initiate a find or replace operation in a text file.
    CFontDialog Used to specify a font.
    CPrintDialogUsed to specify information for a print job.

    For more information on these classes, refer to the MFC class documentation in the Visual C++ online Help.

    Lesson Summary

    A dialog box is a child window of the main application. It is used to display application status information or to get input from the user. A dialog box contains controls, which are small, standardized window objects that can be manipulated by the user to perform an action, or used by the application to display information to the user.

    There are two types of dialog boxes. Modal dialog boxes require the user to supply information or cancel the dialog box before returning control to the application. Modeless dialog boxes do not take control of an application interface, but allow you to work on other areas of the application without closing the dialog box. A property sheet is a special kind of dialog box that presents the user with a tabbed, index card-like selection of property pages. Property sheets can be modal or modeless.

    The first stage in creating a dialog box is to use the Visual C++ dialog editor to create a dialog box template. A dialog box template is a reusable application resource that is a binary description of a dialog box and the controls it contains. The next stage is to create a class, derived from the MFC class CDialog, to represent the dialog box in your code. The task of creating a dialog box class is greatly simplified by automatic features of ClassWizard.

    Once you have created a dialog class, you can display a modal dialog box by creating an instance of the dialog class in your code and calling the CDialog::DoModal() function. To display a modeless dialog box, you call the CDialog::Create() function, passing the resource ID of the dialog box template as a parameter. Use the CWnd::ShowWindow() with a parameter of SW_SHOW or SW_HIDE to display or hide the modeless dialog box.

    MFC supplies several classes derived from CDialog that encapsulate common Windows dialog boxes. These dialog boxes simplify common Windows application tasks and should always be used where appropriate to ensure that your application presents a consistent interface to the users.



    Microsoft Press - Desktop Applications with Microsoft Visual C++ 6. 0. MCSD Training Kit
    Desktop Applications with Microsoft Visual C++ 6.0 MCSD Training Kit
    ISBN: 0735607958
    EAN: 2147483647
    Year: 1999
    Pages: 95

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net