GUI Programming Basics with Visual Studio

1. Lesson 15 Graphical User Interface Programming John Cole CS1 -- GUI Programming

2. GUI Basics • The C++ standard, unlike Java, does not define a graphical interface. If you’re programming under Linux, you have your choice of several: Gnome, KDE, Qt, etc. etc. • In the Microsoft world, nearly everyone uses the Microsoft Foundation Classes (MFC) • These are provided by Microsoft and encapsulate the entire Windows Application Programmer Interface (API) CS1 -- GUI Programming

3. Creating a GUI Project in Visual Studio • These instructions are for Visual Studio 2010 Professional Edition and will also work with VS 2010 Express edition • Do NOT use Visual Studio 2012 Express Edition. • Visual Studio Professional Edition 2012 has slightly different options when you start the project, but you get essentially the same thing. CS1 -- GUI Programming

4. Creating a GUI Project in Visual Studio • Go to the File menu and click New Project. • In the New Project screen select MFC Application (center option in VS2010) • Give it a name (such as GUIDemo) • Click OK • A screen will appear with various settings. Click Next, since we will change these CS1 -- GUI Programming

5. Creating a GUI Project (continued) • In this screen, click the radio button next to “Dialog based”. • Leave all the other settings alone and click Next. • In this screen, uncheck the “About Box” checkbox, then click Next. • In this next screen, you can leave the defaults and click Next. The final screen shows generated classes. These are fine. Click Finish. CS1 -- GUI Programming

6. Creating a GUI Project (continued) • You should now have a dialog box that looks like this: CS1 -- GUI Programming

7. Creating a GUI Project (continued) • Click on the “TODO: Place dialog controls here” text in the center of the screen and delete it by pressing the Delete key. This is a placeholder and we don’t need it. • You should now have a dialog with an OK and a Cancel button and nothing else. CS1 -- GUI Programming

8. Notes About the Program • If you look at the project in the Solution Explorer (the left-side bar that shows you the projects and source files) you’ll see a section called “Resource Files.” Under this you have three files, including a .rc file. This is where the definition of your dialog is stored. It isn’t in the source code. CS1 -- GUI Programming

9. The Resource View • The Resource View shows you program resources, such as dialogs, icons, and strings. This is where you can change the program icon, and how you would do internationalization. • One of the views shows Dialogs. You can use the various dialogs listed (one , in our case) to get back to the design of your window. CS1 -- GUI Programming

10. Controls • Controls are on-screen objects that do different things. We’ll explore several. • As we’ll see later, you can have a variable associated with a control that makes it easy to use. CS1 -- GUI Programming

11. Building the Interface • Also on the left side, one of the tabs is the “Toolbox.” This shows all of the different kinds of controls you can put onto a dialog. • Click and drag the “Static Text” onto your dialog near the top. • You’ll now see the properties. One is “Caption.” Change this to “Enter Your Name” CS1 -- GUI Programming

12. Building the Interface • Also in the toolbox is an Edit Control (equivalent to the Java TextBox) • Drag this so that it is to the right of the static control you created. • You now have a program that lets you enter a name and press an OK button and a Cancel button. CS1 -- GUI Programming

13. Building the Interface • The ID property of this control defaults to IDC_EDIT1. You can change it if you like, to something like IDC_NAME. Always use capital letters. Visual Studio creates these as constants in your project. I prefer to give control IDs meaningful names. CS1 -- GUI Programming

14. Variables for Controls • Right-click on the Edit Control you created. In the pop-up menu, click Add Variable. • In the screen that pops up, the only thing you need to change is the variable name, on the lower left. Enter “ctlName” without the quotes. (My personal naming convention is that every “control” variable starts with “ctl.” • You now have a variable you can use to manipulate this Edit Control. CS1 -- GUI Programming

15. Notes About the Code • The other interesting function Visual Studio generates for you is the OnInitDialog function. This does some initialization for the dialog. For example, if you need to read configuration information, this is the place to do it. • This is not the constructor of the class, so on-screen controls will already have been created. CS1 -- GUI Programming

16. The Header File • Visual Studio generates a header file for you when you create an MFC program, something it does not do for console programs. • This contains definitions for all functions in your program, and all fields. • One of the things it contains is a variable called “name” of type CEdit. CS1 -- GUI Programming

17. Writing the Code • Double-click the OK button in the Resource View • This will bring you to the code and create a function for handling the button. You can also look at the rest of the code. • For example, if we wanted to write the name entered to a file, you could do it in this handler. CS1 -- GUI Programming

18. The CString class • In the C++ standard, you can use the string class. Since the Microsoft Foundation Classes pre-date the standard, they defined their own string, the CString. It is very similar to the string class, and you should use it when writing GUI programs. However, it is much richer than the standard stringclass. • CStrings take a value that is either ASCII or Unicode, depending upon how you set up your project. Thus when using strings in an MFC project, code them as shown on the next slide. CS1 -- GUI Programming

19. Formatting Numbers with CString • CStringcontains a member function for formatting numeric data. The following code formats the number in dTemp (31.75) and puts it into csTemp with the string “Value: “ in front of it. CStringcsTemp; double dTemp= 31.75; csTemp.Format(_T("Value: %8.2f"), dTemp); CS1 -- GUI Programming

20. Getting Data from the Control • Add the following code in the button handler: CStringstrName; name.GetWindowTextW(strName);CWnd::MessageBox(strName, _T("Message")); • This gets whatever you typed into the edit control on the screen into a CString and shows it in a message box. CS1 -- GUI Programming

21. Putting Data Into a Control • You can easily change the contents of a control. If you want to put something into an edit control named ctlName, use the following: CStringcsContent = “Say Hello”; ctlEdit.SetWindowTextW(csContent); CS1 -- GUI Programming

22. Handling Numeric Data • Visual C++ works not in ASCII but Unicode, which is a “wide” character set. Thus you can’t use the standard functions like atofto convert strings to doubles. The following code will do the trick: CStringcsTemp; doubledTemp; wchar_t *stop; ctlAmount.GetWindowTextW(csTemp); dTemp = wcstod(csTemp, &stop); CS1 -- GUI Programming

23. The OK Button • The default behavior of the OK is to close the dialog and return a code to the window that created it. If this is the topmost dialog, the program exits. • The line of code that does this is: CDialogEx::OnOK(); • Which calls the default behavior for the button. If you comment it out, the program will no longer exit. CS1 -- GUI Programming

24. The Cancel Button • The default behavior of this button is to close the current window and return a code of “cancel” to the window that created it. • If the window being closed is the topmost one, the program closes. CS1 -- GUI Programming

25. Checkboxes • A checkbox has three states: checked, unchecked, and indeterminate, although the last is almost never used. • You can add a variable for the checkbox the same way you did for the edit control. CS1 -- GUI Programming

26. Checkboxes • The getCheck method of the checkbox returns three possible values: BST_CHECKED, BST_UNCHECKED, and BST_INDETERMINATE. • These are constants in the stdafx header file. • Check the state thus: if (checkTest1.GetCheck()==BST_CHECKED) strName.Append(_T("checked")); else strName.Append(_T("unchecked")); CS1 -- GUI Programming

27. Comboboxes • A combobox is a combination of an edit control and a list that may or may not be visible. • You can fill the list with items, and you can determine which item was selected, if any. • You can restrict the user’s choices to items in the list, or allow anything to be entered into the edit control part. CS1 -- GUI Programming

28. Comboboxes • There are three styles. • Simple comboboxes have no drop-down but let you either enter something into the edit control or choose from a list using the arrow keys. • Dropdown comboboxes work like the simple variety but the list drops down • Drop list comboboxes let you only choose items from the list. CS1 -- GUI Programming

29. Adding Items to a Combobox CStringcblist[] = {_T("List Item 1"), _T("List Item 2"), _T("Third list item")}; for(int ix=0; ix<3; ix++) { cbSimple.AddString(cblist[ix]); cbDropdown.AddString(cblist[ix]); cbDroplist.AddString(cblist[ix]); } CS1 -- GUI Programming

30. Getting Information • Use the same function to get the text as for an edit control cbSimple.GetWindowTextW(strName); • Get the index of the selection with this: int selected = bDroplist.GetCurSel(); • If nothing is selected, this returns -1. CS1 -- GUI Programming

31. List Control • This is a little more complicated, and requires considerable code. However… • You can set up a list that looks very much like the list in Windows Explorer (shown by My Computer, My Documents, etc.) • You can show icons, a list, have sort headers, etc. CS1 -- GUI Programming

32. Notes on Controls • Every control is a “window.” Therefore, it has a Windows handle. • You can get the handle to any control, and with it, you can get and set the contents of controls from other programs. • This works only for programs that use the standard controls, not for Java or .net programs. CS1 -- GUI Programming