Lesson 15

CS1 -- GUI Programming 1

Lesson 15

Graphical User Interface ProgrammingJohn Cole


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)


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.


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


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.



• You should now have a dialog box that looks like this:



• 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.


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.


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.


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.


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”



• 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.



• 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.


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.


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.


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.


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.


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 string class.

• 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.


Formatting Numbers with CString

• CString contains 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.

CString csTemp;double dTemp = 31.75;csTemp.Format(_T("Value: %8.2f"), dTemp);


Getting Data from the Control

• Add the following code in the button handler:CString strName;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.


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:

CString csContent = “Say Hello”;ctlEdit.SetWindowTextW(csContent);


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 atof to convert strings to doubles. The following code will do the trick:

CString csTemp; double dTemp; wchar_t *stop; ctlAmount.GetWindowTextW(csTemp); dTemp = wcstod(csTemp, &stop);


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.


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.


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.


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"));


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.


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.


Adding Items to a Combobox

CString cblist[] = {_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]); }


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.


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.


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.

Date post:	23-Feb-2016
Category:	Documents
Upload:	anneke
View:	48 times
Download:	0 times