Tutorial 2

GUI Elements and Control Variables

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

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

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"

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

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

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);
   }

• In the Visual Studio project window, click
  1. Build >> Build Solution
  2. Debug >> Start to run
  
  Figure 2.1 - Application Window