Command Button Implementation

     Command Button Implementation

Task

Design the following specified GUI program

Project name: button1

When the user clicks the Command button which caption is “Submit”, the message “Submit button was clicked!” will be displayed at the  Edit box.

Steps

1.       Open the Visual C++ compiler and click the New item in the File menu, opening the New dialog box.

2.       Now select the MFC AppWizard (exe) entry in the New dialog box.

3.       Give the new program the name button1 in the Project name box.

4.       Click the OK command button to starts the MFC AppWizard then click the option marked “Dialog based” to base our new program on the CDialog class. Click the Finish button to create the new program. Then finally, click the OK command button.

5.       Next, click the Resources tab, open the Dialog folder, and click the entry for our program’s main window IDD_BUTTON1_DIALOG. This process opens the dialog editor

*You will notice also that the Tool Box (Control Object Bar) appears at the right side of the dialog box.
**You can erase also the “TODO: Place the dialog controls here.”  Because this message only informs that we have to place the dialog controls (objects) such as command buttons, check boxes (or edit boxes) and others here.

6.       Add a new Command button with the caption “Submit” and a new Edit box into the dialog box. Drag these control objects from the Tool box.

*You will notice that the default caption of the command button is “Button1”. To change this into “Submit” caption is very simple. Just type right on it, the caption you want! You will notice that the Push Button Properties instantly appears where you can change the caption. Or after clicking or highlighting the command button Button1, just right-click the mouse to find the Push Button Properties. Now you can type the caption you want.
Then open the ClassWizard (by right-clicking the mouse) to connect the Submit button to an event-handler, OnBUtton1 () method.

7.       Double-click IDC_BUTTON1 in the Object IDs box, and double-click BN_CLICKED in the Messages box. This process creates the OnBUtton1() method (event-handler). Now click the OK button. At the Members Functions box, double-click the OnButton1. This process will take you to the method (event-handler) OnButton1() skeleton function. Now embed the following code:

void CButton1Dlg::OnBUtton1()
{
//TODO: Add your control notification handler code here
m_text=”Submit button was clicked!”;
UpdateData(false);
}

After that, close the program editor and save the code that you typed.
The BN_CLICKED entry is in the Message box is a special message that buttons send when they are clicked. By the way, BN prefix stands for button. The OnButton1() method is the method that the program will call when  the user clicks the Submit button in the dialog box. Here, we are able to connect a method to button clicks. However, we still need a way of reaching the dit box, because when the user clicks the button, we should place our message “Submit button was clicked!” in the edit box. In this situation, we use ClassWizard to connect a member variable to and Edit box control object in a dialog box.

8.       Open ClassWizard now by right-clicking the mouse, then click the Member Variables tab. We have to make it sure that our dialog box class, CButton1Dlg, is selected in the Class name box.

9.       Now select the Edit box control, IDC_EDIT1, and click the Add Variable button. This process opens the Add Member Variable box. Here we will be able to give a name to the text in the Edit box. Let us give the new member variable the name m_text in the Member

Variable name box. Let us make it sure that the Value shows in the Category box and CString in the Variable type box. This connects a CString variable named m_text  to the text in the Edit box.

10.   Now click the OK button in the Add Member Variable box to close it, bringing ClassWizard back up. We can place the text in the Edit box this way in OnButton1() method (which is the method cal when the user clicks the Submit button):

m_text=”Submit button was clicked!”
UpdateData(false)

Calling this method with a value of false updates the Edit box from the value in m_text member variable. Calling this method with a value of true updates m_text member varable form the text in the Edit box.

11.  You can now compile and run your program by choosing the Build menu  then click the Build item (which the corresponding file name or the project name of your program) and click the ! (exclamation mark) icon to run the program.

---------- ---------- ---------- ---------- ----------

Note:

           If some error occurs during compilation such as “Error linking...”, just close the Visual C++ 6.0 compiler, then reactivate it again and find the program you want to compile at the File menu, under the Recent Workspaces item. Just click it. Now click the Dialog folder and click the dialog object which you had created. In this example, it is the IDD_BUTTON1_DIALOG.

           

           To find the location of the error in your program, just double-click the error number at the bottom window of the Integrated Development Environment (IDE). For example, the error number is: errorC2146:missing ‘;’ before identifier “UpdateData”. Meaning, the statement that follows the UpdateData() function has no semicolon (;) at the end.

           When the Linking... messages are: 0 error(s), 0 warning(s), then your program is a success in compilation.

READ MORE - Command Button Implementation

Check Box Implementation

Check Box Implementation

We will explore now a new control object; and this is the checked boxes. We design a check boxes                      graphical user interface (GUI) to let the user selet one or more options from a nember of given chi=oices or  alternatives such as the ingredients of a pizza (onion rings, chilli and tomato, cheese, mushrooms, bacon and ham, so on).


          Task 
          Design the following specified GUI program
          Program name: check1

  

When the user clicks one of our three check boxes, we indicated which check box the users had clicked in an edit box. Like for example, if Check box 2 was clicked by the user, we will display “Check box 2 was clicked!” at the edit box. We will do the same with the Check box 1 and Check box 3.

Steps

1.       Open the Visual C++ compiler and click the New item in the File menu, opening the New dialog box.

2.       Now select the MFC AppWizard (exe) entry in the New dialog box.

3.       Give the new program the name check1 in the Project name box.

4.       Click the OK command button to starts the MFC AppWizard then click the option marked “Dialog based” to base our new program on the CDialog class. Click the Finish button to create the new program. Then finally, click the OK command button.

5.       Next, click the Resources tab, open the Dialog folder, and click the entry for our program’s main window IDD_CHECK1_DIALOG. This process opens the dialog editor

**You can erase also the “TODO: Place the dialog controls here.”  Because this message only informs that we have to place the dialog controls (objects) such as command buttons, check boxes (or edit boxes) and others here.

6.       It is easy to add three Check boxes and an Edit box to our Dialog box. Just simply drag those control objects over to the dialog box form the tool box. You could noticed that the dialog editor assigns a caption for each Check box. These captions are Check1 for Check box 1, Check 2 for Check box 2 and Check 3 for Check box 3. If you want to assign other caption for each check box, just right-click the check box, click the Properties item in the pop-up menu that appears and type in the caption you want.

7.       Open the ClassWizard now by right-clicking the mouse and find the three Check boxes, IDC_CHECK1, IDC_CHECK2 and IDC_CHECK3. We can add an event-handlers to these control objects by clicking those Object ID’s values one by one and double-clicking the BN_CLICKED message in the Message box. This creates the methods (event-handlers) on OnCheck1(),OnCheck2() and OnCheck3(). Now click the OK button to accept the suggested method name for each function. After these procedures we will use again the ClassWizard to connect a member variable to the text in the Edit box, which we will name as m_text. To do this, click the Member Variables tab. Now select the Edit box control, IDC_EDIT1, and click the Add Variable button. Type m_text as the name of the member variable. Make it sure that the Value shows in the Category box and CString in the Variable type box. Finally, click the OK button to close the Add Member variable dialog box. This time, click the Message Maps tab and double-click the OnCheck 1 method (located under the Member functions box). This process opens the OnCHeck1() method.

void CCheck1Dlg:: OnCheck1()
{
//TODO: Add your control notification handler code here
}

Method above is the one called when the user clicks the first check box (Check 1). Clicking the check box changes automatically its logical state form checked (with check mark) to unchecked (blank box) or vice versa (unchecked to checked).

8.       Let us now embed the following code to each method:

void CCheck1Dlg::OnCheck1()
{
//TODO: Add your control notification handler code here
m_text=”Check box 1 was clicked!”;
UpdateData(false);
}

void CCheck1Dlg::OnCheck2()
{
//TODO: Add your control notification handler code here
m_text=”Check box 2 was clicked!”;
UpdateData(false);

}

void CCheck1Dlg::OnCheck3()
{
//TODO: Add your control notification handler code here
m_text=”Check box 3 was clicked!”;
UpdateData(false);

}

9.       You can now compile and run your program by choosing the Build menu and click the Build check1.exe program (project), then click the !(exclamation mark) icon to run the program.

---------- ---------- ---------- ---------- ----------

Note:

      In the example above on Check boxes, the user can click several check boxes as many as three checked check boxes showing at once.

READ MORE - Check Box Implementation

Radio Buttons Implementation

Radio (Option) Buttons Implementation

Sometimes, we only want to let the user select one option, not multiple options on a given set of choices or alternatives. In this case, Check boxes are not appropriate to implement, therefore we will use another control object: the Option (Radio) buttons. Like for example an applicant can choose only one to the given options: single, married, or widowed. Or in a situation where a user should choose only one sex status: male or female. In a case like these, we will implement Radio buttons since the user is restricted or limited to choose only one option. Let us design the Option (Radio) Buttons now:

Task
Design the following specified GUI program:
Project name: radio1

When the user clicks the Radio button 3, we will display “Radio button 3 was clicked!” at the Edit box. We will do the same with Radio button 1 and Radio button 3.

Steps

1.       Open the Visual C++ compiler and click the New item in the File menu, opening the New dialog box.

2.       Now select the MFC AppWizard (exe) entry in the New dialog box.

3.       Give the new program the name radio1 in the Project name box.

4.       Click the OK command button to starts the MFC AppWizard then click the option marked “Dialog based” to base our new program on the CDialog class. Click the Finish button to create the new program. Then finally, click the OK command button.

5.       Next, click the Resources tab, open the Dialog folder, and click the entry for our program’s main window IDD_RADIO1_DIALOG. This process opens the dialog editor

**You can erase also the “TODO: Place the dialog controls here.”  Because this message only informs that we have to place the dialog controls (objects) such as command buttons, check boxes (or edit boxes) and others here.

6.       Add a new Radio buttons and a new Edit box to the dialog box. Drag these control objects form the toolbox. You could notice that the dialog editor assigns a caption for each Check box. These captions are Radio 1 for Option button 1, Radio 2 for Option button 2 and Radio 3 for Option button 3. If you want to assign other caption for each radio button, just right-click the radio button, click the Properties item in the pop-up menu that appears, and type in the caption you want.

7.       Now open the ClassWizard now by right-clicking the mouse and find the three radio buttons, IDC_RADIO1, IDC_RADIO2 and IDC_RADIO3. Then connect the event-handlers (methods) to each of these new controls, OnRadio1 (), OnRadio2 () and OnRadio3 () by clicking those objects ID’s value one by one and double-click the BN_CLICKED message in the Message box. This creates the methods (event-handlers) on OnRadio1 (), OnRadio2 () and OnRadio3 (). Click the OK button to accept the suggested method name for each function. After these procedures, we will use again the ClassWizard to connect a member variable to the text in the Edit box, which we will name as m_text. To do this, click the Member Variables tab. Now select the Edit box control, IDC_EDIT1, and click the Add Variable button. Type m_text as the name of the member variable. Make it sure that the Value shows in the Category box and CString in the Variable type box. Finally, click the OK button to close the Add Member variable dialog box. This time, click the Message Maps tab and double-click the OnRadio1 method (located under the Member functions box). This process opens the OnRadio1 () method ( and the OnRadio2 () and OnRadio3 () skeleton methods followed below ).
Now embed the following code:

void CRadio1Dlg::OnRadio1 ()

{
//TODO: Add your control notification handler code here
m_text=”Radio button 1 was clicked!”;
MessageBox(m_text);
UpdateData(false);
}

Above function is the event-handler (method) to be called or execured whe the user clicks the Radio button 1 in the dialog box. Here, we just display the user’s action in the Edit box with the message “Radio button 1 was clicked!”.

8.       Now we will do the same with the OnRadio2 () and OnRadio3 () methods:

void CRadio1Dlg::OnRadio2 ()

{
//TODO: Add your control notification handler code here
m_text=”Radio button 2 was clicked!”;
MessageBox(m_text);
UpdateData(false);
}

void CRadio1Dlg::OnRadio3 ()

{
//TODO: Add your control notification handler code here
m_text=”Radio button 3 was clicked!”;
MessageBox(m_text);
UpdateData(false);
}

               9.   You can now compile and run your program by choosing the Build menu and click the Build  radio1.exe item. Then finally click the ! (exclamation mark) icon to run the program.

                  In this exampe, we add the Message box that is why we have two output messages here, one the Edit box, and one for the Message box. The two similar messages will be displayed one after the other.

READ MORE - Radio Buttons Implementation