Starting Microsoft Visual Studio 6.0 And Exploring Available Controls Tools

Starting Microsoft Visual Studio 6.0 And Exploring Available Controls Tools Section 1. Opening Microsoft Visual Studio 6.0 1. Start Microsoft Visual Studio ("C:\Program Files\Microsoft Visual Studio\Common\MSDev98\Bin\MSDEV.EXE") 2. Select New Project (File->New) 3. Select Microsoft Foundation Classes Application Wizard (MFC AppWizard(exe)) 4. Set Project Name and Location where to save the application 5. Click OK 1

6. Select type of application (In our examples we work with Dialog based application) a. Single Document-> for document based applications such as Note Pad b. Multiple Document -> for document based applications with multiple document support c. Dialog based -> for dialog based applications (our focus) 7. Click Finish to accept default settings OR Next to customize further 2

8. Customize according needs and click Next a. About box: Select if interested to write some notes about the application. b. 3D Controls: Select if you want to see the GUI as 3D view not flat 2D. c. ActiveX Control: Beyond the scope of the course. d. Dialog Title: Edit this to have the title of the dialog to your interest. 3

9. Customize according needs and click Next a. Choose whether interested to automatically generate source file comments. b. Select as shared dll (the executable file needs MFC to run) or Statically linked library (doesn t need MFC to run but takes more memory space). 10.Click Finish. 11.Click OK Congratulations! We have created our fully working first Windows application in Visual C++. It includes some of the standard interface features used in virtually all Windows Programs. 4

Section 2. Exploring Available Controls Tools The following are few of the available controls in Microsoft Visual Studio 6.0 Controls Toolbox 1) Static Text Used for making labels. Can not be edited on run time. 2) Edit Box Used for entering text. Can be edited on run time. 3) Group Box Used for grouping controls. Radio buttons use Group Box to act together. 4) Button Clickable object to trigger events. 5) Check Box A small box used to select or unselect options. Not mutually exclusive. 6) Radio Button Used to select only one option among available options. Mutually exclusive. 7) Combo Box Used to supply predefined options where only one is shown. 8) Horizontal Scroll bar Used to scroll horizontally when a contained exceeds visible area horizontally. 9) Vertical Scroll bar Used to scroll vertically when a contained exceeds visible area vertically. 10) Spin Used to scroll up and down in a predefined options. Similar to combo box. 11) Progress Used to show progress of some processes, like copying files in Windows Explorer. 12) Slider Used to slide forward and backwards. Example slice viewer. 13) List Control 5

Used for listing data in column format. 14) Tab Control Used to separate several GUI interfaces of an application with tabs. 15) Date Time Picker Special Combo box designed for date selection. Comes with Month Calander. 16) Month Calendar Special spin for choosing month and year. 17) IP Address Special Edit Box designed for editing IP address in particular format. And more more more more 6

Section 3. Examples Example 1. Working With Push Buttons 1. Do the steps given in section 1, with project name Example2 2. Select the TODO: place dialog controls here static text and delete it by simply pressing the delete button. 3. Select the Button control from the controls toolbox 4. Move the mouse over the dialog template. The cursor will change to cross sign showing that it is ready to deploy a control residing on the clipboard. Position the cross away from the OK and Cancel buttons and then click with the mouse. A new button will appear labelled (with a caption) Button 1 as shown below. 7

5. Select the button just added and type on the keyboard Press ME. The moment we start typing, a new dialog box will open, called the property dialog box of a control, in our case a push button. What we just started typing will go to the caption of the property dialog box. This is the text that we see written on the button. It is called the Caption of the button. 6. For the ID combo box on the Push Button Property dialog box, type IDC_PRESS_ME. This makes the identifier of the button just added IDC_PRESS_ME which is easy to remember and more meaningful. 7. Close the Push Button Property dialog box. The label of the new button should now read as Press Me. 8. For the sake of curiosity compile and run. The new button, when clicked, does nothing. This is what we should expect after all we haven t attached any code to it in order to instruct it to respond for a click event. 9. Now we attach code to the new button. Right click on the newly added button and select Events from the context menu. The New Window Message and Event Handlers dialog appears for the dialog class as shown below. 8

10. Select IDC_PRESS_ME under the Class or Object to handle section and BN_CLICKED (meaning when the button is clicked) under New Windows messages/events. If the Press Me button is pressed (when the application is running), Windows Operating System sends the Working With Buttons dialog (remember this is the title of our project and thus we call the executable program by that name for convenience) a message. We use the New Windows Message and Event Handlers dialog box to trap when this occurs and direct our program to specific code that handles the event. Click the Add and Edit button. The Add Member Function dialog box appears as shown in the figure below. 11. Click OK to accept the default name OnPressMe. Its good name anyways! The body of the function now appears as shown below finally letting us type whatever we want to do when the Press Me button is clicked (pressed). SHORT CUT:- In fact, all the steps 9 11 could be replaced as simply as double clicking on the newly added button, setting caption and ID and clicking OK on the Push Button Properties dialog box. 9

12. As for the code to be attached type void CExample2Dlg::OnPressMe() // TODO: Add your control notification handler code here MessageBox("Thanks hey, I needed that!", You just clicked Press Me Button ); 13. Compile and Run and press on the Press Me button. Woahhhhhhhh!!! With just one line of code we have made a difference. A dialog message box appears with a title and message. MessageBox is a predefined class of VC++ which prompts a message to the user. The first argument is the actual message and the second message is the title of the message box. Please see MSDN for more details. Few Remarks:- The place where we had access to controls toolbox and the design of the GUI is called RESOURCE VIEW because that is where we find all the resources for our GUI design. While the place where we add code to our controls is called is called FILE VIEW. In order to swap between resource view and file view and also class view, we use the project workspace pane on the left side of the VC++ 6.0. We have three tabs one for each of the class view, resource view and file view. Thus if we want to modify the code of the Press Me button, we could go to file view and double click Example2Dlg.cpp file where Example2 is the name of our project. Likewise, if one wants to access the resource view all what is needed to be done is to go to resource view tab and double click on IDD_EXAMPLE2_DIALOG identifier under Dialog folder. Now suppose, we want to count the number of times the Press Me button was clicked. We proceed as follows: 1. Add a member variable to Example2Dlg class. This can be done by selecting Class View from the workspace pane and right click on CExample2Dlg and then selecting Add Member Variable from the context menu. 2. Type int for Variable Type and clickcounter for Variable Declaration. Leave the access mode to public as given by default. Click Ok. 3. Obviously, we need to initialize the clickcounter variable to zero somewhere in our program. The best place is on the constructor method of Example2Dlg class. To go to the constructor method, go to Class View, double click CExample2Dlg clss name to expand it, double click the first method which is the constructor. Its name should read, CExample2Dlg(CWnd *pparent = NULL). Once you double click it, an editor will showing the course code for the constructor method. As a last line type clickcounter = 0; 4. We have already created the OnPressMe function in step 12 above, so we go there and add a last line clickcounter++; in order to increment the click counter by one every time the Press Me button is pressed. 10

5. Finally we say something about the number of clicks when the Ok or Cancel buttons of the dialog are clicked to close the program. Before doing so however, let us add one function which gives the required messages for both Ok and Cancel Button in order to avoid code repetition. Go to class view, select Example2Dlg, right click, and select Add Member function from the context menu. Function Type call it bool and function name (declaration) call it ClickCounterMessage. Leave the access mode as public and click Ok. The function name will now appear in the class view tab under CExample2Dlg class. Double click it to go the function body which is of course empty and enter the following code: bool CExample2Dlg::ClickCounterMessage() if (clickcounter == 0) MessageBox("You haven't clicked Press Me button.", "No no no...", MB_ICONSTOP); return false; if (clickcounter == 1) MessageBox("You clicked Press Me button once."); else CString s; s.format("press Me was clicked %d times", clickcounter); MessageBox(s); return true; 6. Now, we may edit the handler of Ok and Cancel buttons and call this function to print what is needed. 7. In order to put code for the Ok or Cancel button i.e. add a handler, simply double click it on resource View in order to go to its handler function. Add the following code. void CExample2Dlg::OnOK() // TODO: Add extra validation here if (ClickCounterMessage()) CDialog::OnOK(); void CExample2Dlg::OnCancel() // TODO: Add extra cleanup here if (ClickCounterMessage()) CDialog::OnCancel(); 11

Example 2. Working With Static Texts and Edit Boxes Now that we are familiar with the pieces of details when working with Visual Studio environment, we may create the following example quite fairly straight forward. 1. Design the following GUI 2. Our aim is to insert two numbers and compute sum and product. Of course our main goal is on how to extract text and number from Edit Box. The simplest way to extract information from control tools is to attach a variable to the control. And so accessing the variable is same as accessing the control with certain precaution. Before we attach a variable however, let us give the edit boxes proper names. Right click on the first edit box and select properties. As its ID, type IDC_EDIT_FIRST_NUMBER. Similarly call the second edit box as IDC_EDIT_SECOND_NUMBER. 3. In order to attach a variable for the first edit box, go to the View menu and select Class Wizard (Ctrl + W). Select Member Variables tab. Select IDC_EDIT_FIRST_NUMBER and click on Add Variable button on the right hand side. The Add Member variable dialog box appears. For variable name, type firstnumber, for Category select Value, and for Variable Type select double. Similarly, do the same for the second edit box with a variable name secondnumber. 4. Add handler for the Get Sum button. Edit the following code. void CExample3Dlg::OnButtonSum() // TODO: Add your control notification handler code here UpdateData(); //Take data from control to variable CEdit* firstnumberedit = (CEdit *)GetDlgItem(IDC_EDIT_FIRST_NUMBER); CString firstnumbertext; firstnumberedit->getwindowtext(firstnumbertext); if (strlen(firstnumbertext) == 0) MessageBox("Please Enter first number."); return; CEdit* secondnumberedit = (CEdit *)GetDlgItem(IDC_EDIT_SECOND_NUMBER); 12

CString secondnumbertext; secondnumberedit->getwindowtext(secondnumbertext); if (strlen(secondnumbertext) == 0) MessageBox("Please Enter second number."); return; double sum = m_firstnumber + m_secondnumber; /* //Alternatively double firstnumber = atof(firstnumbertext); double secondnumber = atof(secondnumbertext); double sum = firstnumber + secondnumber; */ CString sumstring; sumstring.format("the sum is %f", sum); MessageBox(sumString); return; 5. Similarly edit the handler of the Get Product button as above except for the use of multiplication instead of addition. 13

Example 3. Working With Radio Buttons and Check Boxes Radio buttons and Check boxes are used for selecting options among alternative choices. While radio buttons are mutually exclusive, check boxes are not. We demonstrate using an example. 1. Design the following GUI as follows. First choose a Group control. Make its caption Destination and select its Tab stop option from its Properties window. Then add four radio buttons and call them London, Paris, Rome and Vancouver. Moreover change their ID of the radio buttons to IDC_London, IDC_Paris, IDC_Rome and IDC_Vancopuver respectively. Similarly add a second Group control, make its caption Hotels, select its tab stop check box and then add three radio buttons and you may select all of them and select their style property from the properties dialog to pushbutton style. Also change their IDs to IDC_Luxury, IDC_Standard and IDC_Economy. Finally you may also add two check boxes for completeness. Call them IDC_Dance and IDC_Champagne. 2. Now in order to make the radio buttons under destination to work independent of the Hotel radio buttons and the check boxes not to be affected, select the Group option of London and Luxury radio buttons and Dinner check box from their respective Property dialog boxes. 14

3. Finally, in order to retrieve which radio button is selected for destination, we attach a variable for each group of radio buttons that work independently. Thus we need to attach a variable for IDC_London and IDC_Luxury. Call the variable for destination as m_destination and that of the hotel m_hotel and their types int and category value. 4. Now class wizard has already initialized for us the variables to -1 which means no radio button is selected at the beginning. We alter this to 0 to mean select the first radio buttons by default. To do so we go to the constructor method of the our program in class view pane and change the -1 s to 0 s. 5. Now we may double click the Ok button of our dialog to edit its handler to something like the following: void CExample4Dlg::OnOK() // TODO: Add extra validation here UpdateData(); CString strdestination, strhotel; GetDlgItem(IDC_LONDON + m_destination)->getwindowtext(strdestination); GetDlgItem(IDC_LUXURY + m_hotel)->getwindowtext(strhotel); CString s = "Buon Vialgio to a " + strhotel + " Hotel in " + strdestination; CButton* dancebutton = (CButton*)GetDlgItem(IDC_DANCE); CButton* champagnbutton = (CButton*)GetDlgItem(IDC_CHAMPAGN); if (dancebutton->getcheck()) s += " and a dinner dance"; if(champagnbutton->getcheck()) s += " with Champagn"; MessageBox(s); CDialog::OnOK(); 6. We may also agree up on this: One can go for dance and opt not to have champagne but one can not have champagne without dinner dance. Thus if Champagne check box is selected, surely dinner dance is selected and if dinner dance not selected then champagne is also not selected. To do so, we may add BN_CLICKED functions for both dinner dance and champagne check boxes and edit their handlers as follows: void CExample4Dlg::OnDance() // TODO: Add your control notification handler code here CButton* dancebutton = (CButton*)GetDlgItem(IDC_DANCE); CButton* champagnbutton = (CButton*)GetDlgItem(IDC_CHAMPAGN); if (!dancebutton->getcheck()) champagnbutton->setcheck(0); void CExample4Dlg::OnChampagn() // TODO: Add your control notification handler code here CButton* dancebutton = (CButton*)GetDlgItem(IDC_DANCE); CButton* champagnbutton = (CButton*)GetDlgItem(IDC_CHAMPAGN); if (champagnbutton->getcheck()) dancebutton->setcheck(1); 7. Compile and Run and have fun. 15