CS-321 Lab 3
Introduction to the Graphics Shell

Course Objectives Addressed

• understand the design of graphical user interfaces.
• understand and be able to apply concepts of object-oriented programming, inheritance, polymorphism, and event-driven systems.
• be able to use reference materials to gain knowledge of an unfamiliar software library
• be able to implement multi-module software systems incorporating components developed by others.
• be able to clarify and document software requirements when specifications are initially incomplete or ambiguous.
• understand the need for extensive internal software documentation, and be able to provide it.

Overview

In this lab, you will be building upon a pre-written graphical user interface class referred to as the shell. It uses Qt (a graphics library) to provide a simple graphical user interface (GUI) with a drawing area, buttons, menu, and command line. Your projects from here on will work within this shell.

The graphics shell replaces the test program you used and extended in Lab 2. Here, you will create a new class (containing a main() function) called Lab3DerivedShell which inherits behavior (virtual methods) from the Shell class. The updated UML static class diagram is as follows:

Preliminary activity: Shell Library Set Up

Follow these instructions to download and build the shell on your Linux workstation:

• Download this shell.zip file
• Create a /usr/local/cs321/ directory on your laptop; you'll need administrative privileges to do this (i.e. use sudo). Next, chown and chgrp it to your personal account and ensure its permissions are 755 (drwxr-xr-x).
• Unzip the shell.zip file. Copy all the files from the shell directory, preserving subdirectories, into the /usr/local/cs321 directory. After copying, you should have the files shell.pro, sample.pro, and cs321.cpp in the /usr/local/cs321 directory, as well as the folders include, lib, and src.
• Copy all your source files from the working directory you used for Lab 2 to a new working directory you'll use for Lab 3. Move the sample.pro and cs321.cpp files from /usr/local/cs321 to the new Lab 3 working directory as well.
• From within the /usr/local/cs321 directory, rebuild the shell files by executing qmake shell (to generate the Makefile for building the CS321 interface shell library) and make (to build and set up the shell library in lib) while in the /usr/local/cs321 directory.
• Register the newly created library on your system by executing (as root or with sudo) the following command:
  ldconfig /usr/local/cs321/lib
• From your new Lab 3 working directory, issue the following commands to build and run a skeletal Lab 3 program:
  qmake sample
  make
  ./cs321&

Lab Activity

Become familiar with the various features of the GUI shell and note that it simply generates event-driven callbacks which do little more than cout before returning. ((I.e., there is no functionality yet.)

You do not have to make any modifications at all to the Shell class. Instead, you are to derive a class (Lab3DerivedShell) from the Shell class to add functionality that supports the drawing of white points on the black background of the drawing area using both the built-in command line and the mouse. As a minimum you will need to bring in your Lab 2 classes (NOTE: you will find it necessary to update some of these classes) and, in Lab3DerivedShell, override and add functionality to the following virtual functions of Shell:

• HelpText - to document your command line syntax and mouse usage
• CmdParse - to parse the command line -- you'll need to invent some simple commands such as 'e' to erase your image. For an "A" level grade, implement a "p <x> <y>" command that creates a point at the specified <x>,<y> coordinates.
• Draw - the real workhorse (see below)
• The constructors and destructors as appropriate
• Override the Erase function from Shell so that the user may erase the image by pressing the Erase button. This should cause the default image object to become empty and the drawing shown on the screen to become blank.

  Note: It is not (yet) necessary to handle loading and saving, but these features will be required in future labs, so you might want to get a start on them (and you already know how to do this from Lab 2).

When the Lab3DerivedShell::Draw method is called, you must check the source of the event by examining the QEvent. When an "exposure" event such as a paint event comes in, call the Redraw method in your image class. As the calls cascade and the Draw methods of your shape-derived classes get called, you must actually draw the shapes by using methods of the QPainter class. When the drawing window is initially created by the GUI shell it will automatically generate a paint event. 

When a "button press" event occurs (actually press or release -- your choice) you will have to use a dynamic_cast to convert the QEvent to a QMouseEvent to determine the mouse information contained therein. After determining the mouse location create a point object and add it to your image and draw it. Note: Upon referencing QPainter you will find that you need a QWidget. The  protected drawArea member of the Shell class, which you inherit within your Lab3DerivedShell class, is a QWidget object, so use that.

For the present, ignore the resize event.

Your professor will be more than happy to consult with you on an individual basis, but many of the details are left for you to research on your own.

More information on Qt can be found in the following places:

• TrollTech Web Site NOTE: There are numerous versions of QT - we are using 3.0. There are differences in implementation of various classes in later versions which will cause you great confusion if you follow documentation for the wrong version.
• The Linux man pages (e.g., man QPainter)
• Your optional reference text

Demonstration (during Lab 4)

You will need to demonstrate your project to the instructor during the Lab 4 session. The demonstration will count for 25% of your lab grade.

UML Class and Sequence Diagrams

Extend your UML diagrams from Lab 2 to reflect the changes you make in Lab 3. Use EA to prepare a UML class diagram and a UML sequence diagram.

Your UML static class diagram must replicate the diagram shown above and more fully depict the relationship between the classes you have developed or extended in this lab, as well as any pre-defined classes you use (e.g. QPainter). Specifically, you must change the diagram to accurately reflect

• the member variables and methods of your point and line classes
• any and all additional member variables and methods you have implemented in the Lab3DerivedShell class you derived from Shell.

You must create a UML sequence diagram containing enough detail to support the illustration of the interaction among your objects in response to a paint event.

Paste images of your UML Class and Sequence diagrams into your lab report document.

Lab submission (due by 11am day of lab 4)

This is a 1 week lab.

You must submit a quality lab report along with your program. Use this Word document as a template for your report, carefully following the instructions within.

1. I want only your .cpp, .h, .pro, and Word report files.
2. Use webCT to submit your assignment ("Lab 3: Introduction to the Graphics Shell").
3. Record the time (in minutes) you spent on this lab in the FAST system for week 4.

Your lab grade will be determined by the following factors:

• Meeting requirements/correct program operation/output.
• Technical quality (comments, formatting, naming)

• Required content
• Spelling and grammar (your word-processing program has a built-in spell checker - use it)
• Timeliness of submission as stated in the course policies.

If you have any questions, consult me.

This lab was originally developed by Prof. Henry Welch, with modifications by Prof. Eric Durant.
And even more modifications by Prof. Mark Hornick.

This page was last updated on 09/29/2006.