Concordia TAV 2002 Comp5421_91 Comp5421 Object Oriented Programming User Interface Design Lecture 9 Tianxiang Shen Summer 2002 Department of Computer Science

Concordia TAV 2002 Comp5421_9 1

Comp5421 Object Oriented Programming

User Interface Design

Lecture 9 Tianxiang ShenSummer 2002

Department of Computer Science Concordia University


User Interface Design• The most important issues in user interface design (UID) are

aesthetic and ergonomic.

1. Aesthetic means that the screen should be attractive to look at.

2. Ergonomic means that the interface should be easy to use.

• COMP 675 (User Interface Design) covers the aesthetic and ergonomic aspects of UID. Now, we will only discuss how object oriented methods affect UID.

• Important transition in UID occurred with the introduction of windows and mouse. Xerox's Palo Alto Research Center (PARC) was a pioneer in the late 70s. They were taken up by Apple, and latest by Microsoft and are now ubiquitous.


User Interface Design (2)

• Windows/mouse interface gives the user more control. User can hold several windows on the screen, not necessarily belonging to the same program.

• User can move windows, resize them, hide or restore them, click on any control, write text in the text areas, and so on.

• Sometimes the program will indicate things that you cannot do, but generally you have a much greater freedom than with the older interfaces.



• Transfer of control required a corresponding change in program design. The old style programs had a procedural design with Input/output statements. Program executed statements in a convenient sequence, prompting user input.

• In the new style of programming, the programmer must assume that the user can do anything at any time. User actions are called event and the program is a collection of event handlers that respond to the user’s actions.

• Windows libraries hide many of the details from the application programmer. For example, the program does not have to know that a window has been moved.

when the user resizes a window, the new window library displays the new window frame and sends a "resize" message with new dimensions to the program: program just needs to redisplay the contents of the new window.



• With object oriented programming, it is possible to make all of this very natural.

There is an object in the program corresponding to each window on the screen.

The window manager captures all mouse and keyboard events and sends them to the appropriate object. Thus objects will have methods that correspond to operations such as ''resize'', ''scroll up'', and ''display character''.


Coding for Windows• Goal of User Interface Design is to give the user as much

control as possible. 1. Decide:

what controls you will provide;what events you will handle

2. Design the code:in such a way that any event can be processed at

any time. • If the user operates controls incorrectly, the program

should respond in a friendly and helpful way. For example, if the user clicks Next before required fields have been completed, the program should display something like ''Please complete fields X, Y, Z before proceeding''.


Coding for Windows (2)

• A common mistake in UI programming is to assume that there must be a lot of global data, because events can be processed in any order.

there must be a lot of global data. It is not always easy to combine information hiding with good UI design, but it is possible.

• This is a way to do this:

1. Design the program without paying much attention to

the Ul. Introduce as many classes as necessary to

manage the data and computations that you need.

2. Identify the classes that must respond to events. Keep

the number of such classes as small as possible. If

necessary, revise the design to reduce this number.

3.Introduce a new class (or, if necessary, classes) to

handle all of the events. When this class receives an

event, it passes it to the object that handles that event.


Model-View-Controller Framework• MVC Framework is a technique that is used to manage

graphics interfaces. It has three main classes. They are:

1. Model class does all of the important computation. The model should not be aware of the existence of any other program components. It responds to requests to performance various calculations and to report the results.

2. View class provides one or more ways of displaying the results of computations on the screen. In a simple program, the view could manage one window showing results. The view should not be aware of other program components.

3. Controller class handles events and tells the model and the view what to do.


MVC Framework (2)

• This description is somewhat idealized. In practice, the view usually communicates directly with the model because this is easier and more efficient than negotiating via the controller.

• MVC is often implemented as a framework. This means that the model, view, and controller are abstract base classes that specify channels of communication. A program is implemented by deriving concrete classes from the base classes.


MVC Framework: Model class• the following program is an extremely simple example of the MVC

framework.• Abstract base class for Model:

class Model

// A general description of a simulated system.

{

public:

virtual int finished () { return 0; }

// Return true when the simulation has finished.

// By default, a simulation does not finish.

virtual void update () = 0;

// This function is called at each time step to update

// the model.

virtual double report () = 0;

// This function is called whenever necessary to find

// out what the model is doing. This rather simple

// version requires that the behavior of the model is

// described by one variable.

};

11

MVC Framework:

Heater class

• We now introduce some concrete models. First, the class Heater simulates heating a room.

class Heater : public Model // Model of a simple heating system.

{ public:

Heater ();

void update ();

// Update the heating system: must be called at each step.

double report () { return room_temperature; }

// Report the current temperature: call as needed.

private:

int on; // The heater is on.

double room_temperature;

// Current room temperature.

double desired_temperature;

// Temperature that we want in the room.

double heater_temperature;

// Temperature of the heater.

double tolerance;

// Temperature tolerance of the thermostat.

double outside_temperature;

// Temperature outside the room.

};


MVC Framework: Heater class (2)

• Constructor for Heater: Heater::Heater ()

{

on = 0;

room_temperature = 21.0;

desired_temperature = 20.0;

heater_temperature = 100.0;

tolerance = 1.0;

outside_temperature = -5.0;

}

MVC Framework: Heater class (3)• The update() method for Heater tries to keep the room at the required

temperature within the given tolerance. void Heater::update ()

{ // Compute heat loss to exterior.

room_temperature += 0.05 * (outside_temperature - room_temperature);

// If the heater is on, it heats up the room.

if (on) room_temperature += 0.05 * (heater_temperature - room_temperature);

// If the heater is on and the room temperature is at the top of

// the range, turn the heater off.

if (on && room_temperature > desired_temperature + tolerance) on = 0;

// If the heater is off and the room temperature is at the bottom

// of the range, turn the heater on.

if ( ! on && room_temperature < desired_temperature - tolerance) on = 1;

}


MVC Framework: Projectile class• The second model is a projectile that goes vertically upwards

and comes down under the influence of gravity [Newton law]. class Projectile : public Model

{

public:

Projectile ();

int finished ();

void update ();

double report ();

private:

double delta_t;

// Simulation time increment.

double gravitational_constant;

double velocity;

double height;

};


MVC Framework: Projectile class (2)

• The constructor sets initial values: the projectile is on the ground and ascending.

Projectile::Projectile (){

delta_t = 0.1;

gravitational_constant = -5.0;

velocity = 10.0;

height = 0.0;

}

• The simulation finishes when the projectile lands on the ground. int Projectile::finished ()

{

return height < 0.0;

}


MVC Framework: Projectile class (3)

• The update function for the projectile uses Newton's laws. void Projectile::update ()

// Update variables using first-order integration.

// Use Newton's second law to get the acceleration,

// integrate once to get the velocity,

// and again to get the height.

{

velocity += gravitational_constant * delta_t;

height += velocity * delta_t;

}

• Report the height of the projectile.double Projectile::report ()

{

return height;

}


MVC Framework: View class

class View

// A general description of a way of viewing the behavior

// of a system.

{

public:

virtual int finished () { return 0; }

// Return true when the view has finished. For example,

// a plot might finish when it reaches the right side of

// the display. The default behavior is never to finish.

virtual void update (double observable) = 0;

// Update the view using the value of a single variable.

};


MVC Framework: DigitalView class

• Concrete classes for views. The first is a ''digital View'': it simply displays a list of numbers.

class DigitalView : public View

// Display simulation results in digital form.

{

public:

DigitalView ();

int finished ();

// Return true when cycle count exceeds maximum.

void update (double observable);

// Print the given value.

private:

int cycles;

// Count simulation cycles.

};


MVC Framework: DigitalView class (2)• The methods of a DigitalView are implemented as follows.

DigitalView::DigitalView (){

cycles = 0;}

int DigitalView::finished (){

return cycles > 40;}

void DigitalView::update (double observable){

cout << observable << endl;cycles++;

}


MVC Framework: GraphicalView class• The second kind of view is a very simple ''graphical view'' that displays

indented asterisks.

class GraphicalView : public View// Display simulation results in graphical form.

{public:

void update (double observable);};void GraphicalView::update (double observable)

// Print a row of asterisks. The length of the row is// proportional to the give value.

{const int num_stars = int(observable);for (int stars = 0; stars < num_stars; stars++)

cout << '*';cout << endl;

}


MVC Framework: Controller class

• The class Controller is concrete here although in a practical application it should be abstract.

class Controller// The concrete class Controller runs a simulation using a Model// and a View.{

public:Controller (Model *model, View *view);

// Construct a controller with pointers to a model and a// view. Pointers (as opposed to values) are required

to// make virtual functions work properly.

void run ();// Run the simulation until something finishes.

private:Model *model;View *view;

};


MVC Framework: Controller class (2)

• The constructor is given a model and a view.

Controller::Controller (Model *model, View *view)

{

Controller::model = model;

Controller::view = view;

}


MVC Framework: Controller class (3)• Its run() method simply updates the model and the view until

one of them indicates that it is finished or - as a safety precaution! - a fixed number of cycles have been executed.

void Controller::run ()/* Run the model and use the view to report its behavior until either the model or the view finishes. If neither finishes, terminate after 100 iterations. */

{int cycles = 0;while ( ! (model->finished() || view->finished() ) && cycles++ < 100){

model->update();view->update(model->report());

}}

int main ()

{

Model *model;

View *view;

char reply; // Let the user choose a model.

cout << "Do you want a (h)eater or a (p)rojectile? ";

cin >> reply;

switch (reply)

{

case 'h':

model = new Heater;

break;

case 'p':

model = new Projectile;

break;

default:

model = new Heater;

cout << "You got a heater.\n";

break;

}

// Let the user choose a view.

cout << "Do you want a (d)igital view or a (g)raphical

view? ";

cin >> reply;

switch (reply)

{ case 'd': view = new DigitalView; break;

case 'g': view = new GraphicalView; break;

default: view = new DigitalView;

cout << "You got a digital view.\n";

break;

}

/* Construct a controller with pointers to the chosen

model and view. The code for "run()" was written

(and could have been compiled) before the concrete

model and view classes were written, but it calls

them correctly using dynamic binding. */

Controller ctrl(model, view);

ctrl.run();

return 0;

}

MVC Framework Main Function

Documents

Concordia TAV 2002 Comp5421_91 Comp5421 Object Oriented Programming User Interface Design Lecture 9 Tianxiang Shen Summer 2002 Department of Computer Science