002 – An example of creation of dialog window in MS Visual Studio 2010 – C++

An example of creation of dialog window in MS Visual Studio 2010 – C++

 Task

1. Develop a dialog window, which contains two buttons OK and Cancel (Fig. 1).

05_02_00_002_01_

Fig. 1. Form, which you need to create

 Show the dialog window from main window of application. A corresponding message must be showed, if the one of two buttons is pressed: OK or Cancel.

 

Instructions

  1. Run MS Visual Studio 2010.
  1. Create the project on C++ as Dialog Based Application.

 Creating a project as Dialog Based Application is described here in details.

 In the window of new project creating yon need to set the name of application as “MFCApp“. In the future we will use this name.

 Application folder in our case:

E:\Programs\CPP\Train-04

 When you create a new project, in wizard select Dialog Based Application. All others settings leave by default. All others settings leave by default.

 As a result, two classes named CMFCAppApp and CMFCAppDlg will be generated.

 The window MS Visual Studio after executed actions, will has the view as shown at Figure 2.

05_02_00_002_02_

Fig. 2. Application form after creating “Dialog Based Application

 

  1. Changing of appearance of main form.

Let us delete the OK button. But button “Cancel” rename to “Exit“.

To delete “OK” button, first of all you need to select it, then press the button Delete.

Same way we delete element in which is written:

"TODO: Place dialog controls here."

 To rename the button Cancel, first select it, then, in window Properties in property Caption, enter word “Exit” (Fig. 3). The application is already configured to press on the “Exit” button, so that there is a way to exit of the application.

05_02_00_002_03_

Fig. 3. Renaming of button name from “Cancel” on “Exit

 Currently, we have two elements from panel “Properties“:

IDD_MFCAPP_DIALOG – the main window of application;

IDCANCEL – button “Exit” (бывшая “Cancel“).

Now, you can run the application and test it.

 Place on the form other button. In the window of panel “Properties” there is one more element IDC_BUTTON1.

 The application form will have view, as shown in figure 4.

05_02_00_002_04_

Fig. 4. Placing the button on the form without event handlers

 Change the property “Caption” of button IDC_BUTTON1 from value “Caption” to value “Form2“. After pressing on this button the dialog window will be called.

 

  1. The stages of designing of the dialog box.

In Visual C ++, any design of dialog box consists three stages:

– forming the resources of dialog box;

– creating the class of dialog box;

– using the class of dialog box.

 

  1. Designing the class and resources of dialog box.

 In MS Visual Studio, resources of dialog window are created after creating of window class automatically. So, when you created a window class, you automatically create the resource of window.

 To work with classes we need to use “Class Wizard“. To call “Class Wizard” we need to click the right mouse button and in the context menu select command “Class Wizard…” (Fig. 5).

05_02_00_002_05_

Fig. 5. Calling “Class Wizard…” to creating the class and resource of dialog box

 As a result, the window shown on Figure 6 will be opened.

05_02_00_002_06_

Fig. 6. Window “MFC Class Wizard

 Window includes the following fields:

1. Field “Project:” – shows projects in solution (Solution).

2. Field “Class Name:” – it defines the classes of project. In our case there are three classes with following names:

CMFCAppApp – class of application in general;

CMFCAppDlg – class of dialog window of application;

CAboutDlg – class of dialog box “About“, which were formed by wizard AppWizard.

3. Field “Base Class:” – points to the base class, from which is inherited the class, which is displayed in the field “Class Name:“.

4. Field “Resource:” defines the name of resource, which corresponds the class from field “Class Name:“.

5. Field “Class declaration:” defines the name of header file for class, which is displayed in field “Class Name:“.

6. Field “Class implementation:” defines the name of file, which realizes methods of class, which is displayed in field “Class Name:“.

 Also, window consists five tabs, which for class from field “Class Name:” describes:

– commands of messages map;

– the Windows messages, which are generating in class and can be processed;

– virtual methods (functions);

– internal variables, that are described in the class;

– methods, which are in the class.

To add new class, you need to call the command “Add Class” (Fig. 7).

05_02_00_002_07_

Fig. 7. Command to add the new class

 As a result, the window “MFC Add Class Wizard” will be opened. In this window set the fields to values as shown in Figure 8. To set values of fields, you need enter text “CForm2” in the field “Class Name:“. Automatically all the other fields will be filled with the exception of field “Base class:“.

 In the field “Base class:” is specified base class CDialog.

The name of resource is set to IDD_FORM2.

 Header file and implementation file are named “Form2.h” and “Form2.cpp“.

05_02_00_002_08_

Fig. 8. Creating a new class CForm2 and new resource IDD_FORM2

 We do the click on button “Finish“. In the previously window you can see, that to three previously classes is added class CForm2.

 We do the click on “OK” again.

 

  1. Window MS Visual Studio and panel Solution Explorer.

  After performing steps, the window of panel “Solution Explorer” has the view as shown in Figure 9.

05_02_00_002_09_

Fig. 9. Window Solution Explorer

 As you see in Figure 9, there are two files “Form2.h” and “Form2.cpp” in the list of files. Accordingly, it is the header and implementation files for the newly formed class CForm2.

 

  1. Calling the dialog box of class CForm2 as resource.

 To begin forming new dialog box (class CForm2) you need to call it as a resource. To do it, in Solution Explorer, you need do the double mouse click on the file “MFCApp.rc” of tab “Resources” (Fig. 10).

05_02_00_002_10_

Fig. 10. Calling the resources names list of application

 As result, we get the list of available resources:

IDD_ABOUTBOX – resource of dialog box of About window;

IDD_FORM2 – resource of newly created dialog box;

IDD_MFC_APP_DIALOG – resource of main window of application.

 To call a needed resource, you need do the double click by mouse. Do the double click on the resource IDD_FORM2. As a result, the newly created dialog box will be opened (Fig. 11). As seen in Figure 11, it is similar to the initial application window of type “Dialog Based Application“.

05_02_00_002_11_

Fig. 11. The window of class CForm2, which is inherited from class CDialog

 You can change the size of form and placement of buttons “OK” and “Cancel“.

 

  1. The event programming of click at the button “Form2” of main window of application.

  Using “Solution Explorer” and resource file “MFCApp.rc” (see p.7) we are proceeding to resource IDD_MFCAPP_DIALOG of main window of application (Fig.12).

05_02_00_002_12_

Fig. 12. Main window of application

 In the “Properties” window we select the button with identifier IDC_BUTTON1. Then we are moving to the tab “Control Events” (Fig. 13).

05_02_00_002_13_

Fig. 13. List of events from tab “Control Events” of control IDC_BUTTON1

 In the list of events we find the event named BN_CLICKED. Then we select the button of selection of drop-down menu and select “<Add> OnBnClickedButton1” (Fig. 14).

05_02_00_002_14_

Fig. 14. The selection of event BN_CLICKED and calling the handling event   OnBnClickedButton1

As a result, the window of file “MFCAppDlg.cpp” with the selected code of handling event OnBnClickedButton1 will be opened.

 

void CMFCAppDlg::OnBnClickedButton1()
{
      // TODO: Add your control notification handler code here
}

Between the braces { } you need to insert your own event-handling code.

  The program code of function of event handling of button IDC_BUTTON1 is the following:

void CMFCAppDlg::OnBnClickedButton1()
{
      // TODO: Add your control notification handler code here
      CForm2 dlg;        // creating the object of type "dialog box"
      CString res_msg;   // additional variable for result output

      if (dlg.DoModal()==IDOK)
      {
            res_msg = "Return from Form2 is OK";
      }
      else
      {
            res_msg = "Return from Form2 is Cancel";
      }

      AfxMessageBox(res_msg); // show the message on screen
}

Now you can run and test the application.