A Graphical Diversion

Creating Windows Based Applications

All of the work that we have done so far has been using standard (or ANSI) C++ in the form of "console applications."  While this limits the programs to a text-based command line interface, it does allow the programs we write to be portable.  That is, the C++ programs that we have written can be run on any computer that has a C++ compiler, whether it is a Macintosh, PC or Unix machine.   This is also the form of C++ that makes up the AP exam.  For these reasons, we will be sticking with this form of C++ for our work.  Today, however, we will briefly explore what is involved in creating a graphically based program using Visual C++.

Getting Started

In order to create a graphically based application we will use a wizard (similar to the graphing wizard we used in Excel).  To get started on the wizard we will create a new project and select MFC AppWizard(exe). appwiz.GIF (17987 bytes)
You should name your project and click OK.  Next you will be presented with a series of screens to choose options about your project.   There are many options to change, but we will skip them for now and click Finish, and then OK on the following screen. finish.GIF (29505 bytes)

Entering Code 

Using this wizard will create the basic structure of your program.  If you execute the program right now without adding any code, you will see that it actually runs, although it doesn't do much.  In order to actually make the program do something, we will add functions within the program that was just created.   You can navigate around the code using the "Classes" tab that has been present in previous programs.  Click on the "classes" tab now and find the class that has the name CtitleView where title is the name of your project.  Click on the plus sign and find the function named OnDraw as shown below.   Double-click on the OnDraw function. ondraw.GIF (13010 bytes)

You should see the code for the OnDraw function which is mostly empty.  This part of the program is executed when the window draws for the first time.  So, anything we put here will happen as soon as the window draws.   One of the lines in this function will is:

// TODO: add draw code for native data here

After this line you should add:

     CClientDC dc( this );

  dc.TextOut( 50, 50, "Hello" );

The first of these two lines defines a place to draw.  It says take "this" window that is visible and define it as a place where things will be output.  When we want to output something there, we will reference it as dc.  As an aside, the "dc" stands for device context which is a description of a place where output is directed to, such as the screen or a printer.  The next line says that we are going to output text to this device.  Specifically, at 50 points in from the left and 50 points down, we will output the word "Hello." 

Run this program now and see what it does.  Try exploring some of   the other parts of the program that were generated for you.  Also try altering the two lines that you entered to output different text to different locations.  Can you make it put many different (school friendly) expressions all over the screen?

Responding to Actions

As you should remember from Visual Basic, the design of a program that has a graphical user interface or GUI (pronounced gooey) is different than the console applications that we have been working on.  In a program with a GUI the program revolves around responding to user actions such as a mouse click or button press.   We will implement such a structure in this program.  You have to go through some more steps than with Visual Basic, but the ideas are similar.

 

In order to add a response to a mouse click, click once on the CtitleView class once again.  Now, go to the view menu and choose ClassWizard. classwiz.gif (1331 bytes)
You should see a window similar to the one on the right.  Go to the part of the window that says "Messages" and scroll down.  As you pass "On Draw" you will see that it is bold indicating that this is already implemented in your program.  Keep scrolling until you get to a series of messages that begin with the letters WM.  This series of messages corresponds with user actions. Find the one that says WM_LBUTTONDOWN.  This will occur when someone clicks the left button.  Double-click on the message that says WM_LBUTTONDOWN and you will see that something is added to the "Member functions" section.  These are the functions that are used in the program.  Finally, click on the "Edit Code" button. wizard.GIF (27212 bytes)

Clicking the Edit Code button should bring you to the code of the program itself.  One of the lines of code should be:

// TODO: Add your message handler code here and/or call default

After this message add the following two lines:

     CClientDC dc( this );

  dc.Ellipse( point.x, point.y, point.x+50, point.y+50);

The first of these two lines is the same as before, it sets the window as a device context.  The next line draws an ellipse in this context.  In order to understand what the four points are, you need to know that inside the mouse-click function you are given variable called point that contains the x and y coordinates of where the use clicked.  The x point is called "point.x" and the y point is called "point.y".  The ellipse draws from this point to a point that is 50 points away in the x direction and 50 points away in the y direction. 

Try this program out and see what it does.  Try changing the points around.  See if you can get it to respond to a left or a right mouse click.

There are other shapes that you can draw as well.  Their definitions are as follows:

    Rectangle( int x1, int y1, int x2, int y2 );
    Chord( int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4 );
    Ellipse( int x1, int y1, int x2, int y2 );
    Pie( int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4 );
    RoundRect( int x1, int y1, int x2, int y2, int x3, int y3 );

Mini-Assignment

We won't be using graphical programs much (if at all) in the rest of our class.  If you want to know why, try looking at all of the code that was generated just to draw "hello" on the screen and compare it to the console method of completing the same task.  When programs get more complicated you have to get into a lot of the code that is generated and that is beyond the scope of this course.   Additionally, getting keyboard input is a lot more difficult than when using console applications.  However, most of the other things that we have covered (if statements, for and while loops etc.) work just fine in graphical applications.

Your mini-assignment is to combine some of the techniques covered here for drawing text, drawing shapes and responding to mouse click with the other program techniques we have covered.  You should make a small program that does some interesting drawing.  For example, you could make an application that starts with an empty face and then have the left mouse button add ears and the right mouse button add eyes.  Don't waste time trying to figure out drawing techniques that we haven't covered, this is a constraint on your assignment.

This program will only be worth 10 points and it should be complete by April 7.  The program will be graded on:

  1. How original your drawing idea is.
  2. How well you incorporated past program principles.
  3. How easy your program is to follow (this is extremely important here because of the vast amount of code).

Back to Home Page House3.wmf (25540 bytes)