What we're doing...

Our first Visual C++ program will be "dialog-based", which means it will use a dialog box as its main window. This is the simplest general-purpose type of Visual C++ program and, because it's so easy to work with, we'll look at it first.

Our first program, HelloDlg, presents the user with a text box (also called an edit box or edit control) and a button that displays the caption "Click Me!":

 ---------------------------------------------
|                                             |
|---------------------------------------------|
|                                             |
|                                             |
|                                             |
|      --------------   ------------          |
|     |              | | Click Me!  |         |
|      --------------   ------------          |
|                                             |
|                                             |
|                                             |
 ---------------------------------------------

 ---------------------------------------------
|                                             |
|---------------------------------------------|
|                                             |
|                                             |
|                                             |
|      --------------   ------------          |
|     | Hello World! | | Click Me!  |         |
|      --------------   ------------          |
|                                             |
|                                             |
|                                             |
 ---------------------------------------------

Creating our HelloDlg

We'll begin the creation of HelloDlg with Visual C++ now. The first thing to do is open Visual C++ and set the Emacs compatibility mode. Do this now by going to the Tools->Options menu. Next, choose the Compatibility tab and then from the Current source editor emulation drop-down list, choose Epsilon:

Finally, click Yes when it asks if you're sure you want to change the emulation and voila! You're now able to use your Emacs key-bindings!

Now let's select the New item in the File menu to open the New dialog box. We're going to create a new project so make sure that tab is selected. Select the MFC AppWizard (exe) item in the list of projects and enter HelloDlg as the project's name in the Project name box:

Clicking the OK button opens the MFC AppWizard, a valuable Visual C++ tool that writes the skeleton framework of our projects for us, usually saving a great deal of time.

At the box titled Step 1, make sure you click the option button marked Dialog and then click the Finish button to make the HelloDlg project dialog based. This means that our new program will be based on (or inherit from) the CDialog class.

Finally, click the OK button in the New Project Information box that appears, and Visual C++ creates the HelloDlg project for us. At this point, Visual C++ opens the HelloDlg project with the new dialog window on which our project is based in the middle of the project.

As you can see, Visual C++ has placed the message TODO: Place dialog controls here. in a label on the dialog box. The first order of business is to remove that label; we can do this by clicking that label to select it (a dotted border appears around the label and sizing handles appear to allow you position or stretch the label as you like). Delete the label now by pressing the Del key.

Now we're ready to add the two new controls we'll need to this dialog window: a text box and a command button. We add controls using the control toolbox, which appears at the right in the figure above.

If the Control ToolBox doesn't appear in Visual C++: Just select Tools->Customize from the menu, then click Controls in the Toolbars tab.

Click the text box tool (the 2^nd tool down on the right) in the toolbox now and draw a text box. Then add a command button using the button tool (the 3^rd tool down on the right), as shown below.

Change the caption of the button by right-clicking the button and choosing the Properties option and then typing "Click Me!" in the Caption box.

Now that we've added a text box to our program, we need to make it accessible to our code, which we'll do with the Visual C++ Class Wizard. Right-click the text box now and select the Class Wizard option.

To make the the text box accessible to the rest of the program, we use Class Wizard to connect the text in that text box to a variable in our program. Select the text box entry, IDC_EDIT1, in the Class Wizard now (as shown above) and click the Add Variable button. This opens the Add Member Variable dialog box; type m_text in the Member variable name box, leaving the variable type as CString (the Visual C++ string class, which handles text strings) and click OK. This associates a new variable in our program, m_text, with the text box. Click OK to close the Class Wizard.

Sidenote: We could also have done this by naming the variable m_edit, setting the Category combo-box to Control, and setting the Variable type box to CEdit. Then, all we'd have to do in the code below is call the CEdit class's SetWindowText() member function to set the edit box's text (it actually calls the CWindow class's SetWindowText() function since CEdit inherits from CWindow) as follows:

void CHelloDlgDlg::OnButton1()
{
   m_edit.SetWindowText(CString("Hello World!"));
}

Next, we'll connect the button to our code so we can display our greeting message when the user clicks that button. Right-click the button to open the Push Button Properties window and, after selecting the General tab, set the button's caption to "Click Me!". Then, close the Properties window and double-click the button to open the Add Member Function box. Click OK in that box to accept the default function for button clicks, OnButton1(), in a new window.

void CHelloDlgDlg::OnButton1()
{
   // TODO:  Add your control notification handler code here

}

void CHelloDlgDlg::OnButton1()
{
   // TODO:  Add your control notification handler code here
   m_text = "Hello World!";
   UpdateData(false);
}

Call UpdateData() with a value of FALSE to display the value now in m_text in the text box and call it with a value of TRUE to load m_text with the value now displayed in the text box. → UpdateData(false) means → update IDC_EDIT1 from m_text → SET → UpdateData(true)  means → update m_text from IDC_EDIT1 → GET When you show a dialog box from within a SDI or MDI application (i.e., not from a dialog-based program like HelloDlg), you don't need to use UpdateData() because that function is automatically called (different for a modeless dialog box).

Sidenote: We could also have done this from the Class Wizard by choosing the Mesage Maps tab, double-clicking IDC_BUTTON1 in the Object IDs box and then double-clicking the BN_CLICKED message in the Messages box (this also would create the OnButton1() function member).

That's it... our program's ready to go! To run the program, select Build HelloDlg.exe from the Visual C++ Build menu to create the HelloDlg.exe. Run that program by selecting the Execute HelloDlg.exe item in the Build menu.

Supplemental

1. Now add another edit box below the first one
   • Use the alternate method and add a variable that's connected to the control
   • Add a Windows Message listener for that Edit Box that responds to the EN_SETFOCUS (a windows event) that sets its text to blank (or something else)
     • Please see http://www.microsoft.com/msj/0795/dilascia/dilascia.aspx for more about messages, message maps, events, etc.
   • Add a Windows Message listener for other messages like WM_LButtonDown, etc.
     • This could, for example, print "You clicked the Left Mouse Button" in your edit box... or perhaps set the edit box's text to empty... your choice (the idea is to play around a little bit here).
2. Add three more buttons
   • Change the caption of the first one to "Top to Bottom"
   • Change the caption of the second one to "Bottom to Top"
   • Change the caption of the third one to "Swap"
3. Add code to each of the three buttons to achieve this functionality
4. Try adding some Check Boxes to hide or disable the buttons
5. You can try something like this:

   void CHelloDlgDlg::OnCheck1()
   {
     // TODO: Add your control notification handler code here
     if (m_check1.GetCheck()) {
       m_button1.EnableWindow(false);
       //m_button1.ShowWindow(false);  // Hide Window Altogether
     } else {
       m_button1.EnableWindow(true);
     }
   }
       

   or this:

       void CHelloDlgDlg::OnCheck2() 
       {
   	// TODO: Add your control notification handler code here
   	UpdateData(true);
   	if(m_enable == TRUE)
   	{
   		GetDlgItem(IDC_BUTTON3)->EnableWindow(true);
   	}
   	else
   	{
   		GetDlgItem(IDC_BUTTON3)->EnableWindow(false);
   	}
       }
       

Hand In: This lab handout with the answers filled in attached to a listing of your final program files, HelloDlgDlg.cpp and HelloDlgDlg.h.