MFC Step-by-Step Guide

Tutorial 2

GUI Elements and Control Variables


GOAL: To gain understanding of basic events by showing button clicks and text echoing
PREREQUISITES: Tutorial 1

Clean Up UI Window
  1. (Inside the VS Project Window) Click the menu item View >> Resource View
  2. Double-Click on "IDD_TUTORIAL_DIALOG" to bring up the MFC Resource Editor
  3. Select the main application window by Left-Mouse-Button click in the window
  4. Bring up the Properties window for the main application window (With main application window selected, Right-Mouse-Button click » Properties), change
    1. ID to "IDD_ECHOBUTTONEVENT_DIALOG" and
    2. Caption to "MFC_EchoButtonEvent"
  5. Click the project menu item View >> Solution Explorer
  6. Inside 'Tutorial.h', change enum value of IDD to "IDD_ECHOBUTTONEVENT_DIALOG"
  7. Left-Mouse-Button click to select and Right-Mouse-Buttton click to bring up the pop-up menu for both "TODO: ..." text box and the "OK" button, click Delete
  8. Left-Mouse-Button to select the "Cancel" button
  9. Bring up the Properties window of the "Cancel" button (With the "Cancel" button selected, Right-Mouse-Button click » Properties), rename
    1. Caption to "QUIT"
  10. Drag the now "QUIT" button to bottom-right corner of the dialog window
  11. Build the Solution
Create "Button Clicks" Text Labels
  1. Open the Toolbox (View >> Toolbox)
  2. Drag a Static Text to the dialog window, inside the Properties window of the Static Text, rename
    1. Caption to "Button Clicks"
  3. Drag another Static Text next to the "Button Clicks", inside the Properties window, change
    1. ID to "IDC_ECHO_AREA"
    2. Caption to "0"
    3. Client Edge to True
Create "Add" Button
  1. Drag a Button above the "Button Clicks" Text, inside the Properties window, change
    1. ID to "IDC_BTN_ADD"
    2. Caption to "Click to Add"
Add Control Variable
  1. Right-Mouse-Button click the "Button Clicks" text box, select Add Variable...
  2. In the 'Add Variable Wizard' window, change
    1. Access to private
    2. Category to Value
    3. Variable Type to CString
    4. Variable Name to "m_EchoText"
    5. Click Finish
Add Event Handler
  1. Right-Mouse-Button click the "Click to Add" button, select Add Event Handler...
  2. In the 'Event Handler Wizard' window, change
    1. Message Type to BN_CLICKED
    2. Class List to CTutorialDlg
    3. Function Handler Name to OnBnClickedBtnAdd
    4. Click Add and Edit
Setting Variables and Function
  1. In 'TutorialDlg.h', add a private variable int m_OkCount;
  2. In 'TutorialDlg.cpp', initiate variable to 0 inside the OnInitDialog() function
    BOOL CTutorialDlg::OnInitDialog(){
       ...
       m_OkCount = 0;
    }
  3. Within the OnBnClickedBtnAdd() function, add the following variables
    void CTutorialDlg::OnBnClickedBtnAdd(){
       m_OkCount++;
       m_EchoText.Format("%d", m_OkCount);
       // without UpdateData() status area will _NOT_ be updated.
       UpdateData(FALSE);
    }


» Written by William Frankhouser (wjf2@washington.edu)
» Advised by Kelvin Sung (ksung@washington.edu) as part of the project sponsored by the National Science Foundation under Grant No. 0442420. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.
» Produced in the "Essential Concepts for Building Interactive Computer Graphics Applications", A.K. Peters, Ltd.