Lesson 15 - PowerPoint Presentation

Slide1

Lesson 15

Graphical User Interface ProgrammingJohn Cole

CS1 -- GUI Programming

1Slide2

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

2Slide3

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

3Slide4

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 OKA screen will appear with various settings. Click Next, since we will change these

CS1 -- GUI Programming

4Slide5

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

5Slide6

Creating a GUI Project (continued)

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

CS1 -- GUI Programming

6Slide7

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

7Slide8

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

8Slide9

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

9Slide10

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

10Slide11

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

11Slide12

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

12Slide13

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

13Slide14

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

14Slide15

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

15Slide16

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

16Slide17

Writing the Code

Double-click the OK button in the Resource ViewThis 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

17Slide18

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.

CS1 -- GUI Programming

18Slide19

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

);

CS1 -- GUI Programming

19Slide20

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.

CS1 -- GUI Programming

20Slide21

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

);

CS1 -- GUI Programming

21Slide22

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

CS1 -- GUI Programming

22Slide23

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

23Slide24

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

24Slide25

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

25Slide26

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

26Slide27

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

27Slide28

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

28Slide29

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

}

CS1 -- GUI Programming

29Slide30

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

30Slide31

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

31Slide32

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

32