CSC 7322 : Object Oriented Development J Paul Gibson, A207 [email protected] . it-sudparis.eu /~gibson/Teaching/CSC7322

2013: J Paul Gibson TSP: Software Engineering CSC7322/DesignPattern-MVC.1

CSC 7322 : Object Oriented Development

J Paul Gibson, A207

[email protected]

http://www-public.it-sudparis.eu/~gibson/Teaching/CSC7322/

Design Patterns

…/~gibson/Teaching/CSC7322/L5-DesignPattern-MVC.pdf


Introduction

pattern noun 1 a model, guide or set of instructions for making something • a dress pattern. 2 a decorative design, often consisting of repeated motifs, eg on wallpaper or fabric. 3 a piece, eg of fabric, as a sample. 4 any excellent example suitable for imitation. 5 a coherent series of occurrences or set of features • a pattern of events. verb (patterned, patterning) (usually pattern something on another thing) to model it on another type, design, etc.

ETYMOLOGY: 14c as patron; French, from Latin patronus example or defender.

SOURCE - Chambers 21st Century Dictionary


Introduction

design verb (designed, designing) 1 to develop or prepare a plan, drawing or model of something before it is built or made. 2 formal to plan, intend or develop something for a particular purpose. noun 1 a plan, drawing or model showing how something is to be made. 2 the art or job of making such drawings, plans, etc. 3 the way in which something has been made. 4 a picture, pattern, arrangement of shapes, etc used eg as decoration. 5 a plan, purpose or intention. designable adj. designedly adverb intentionally; on purpose. designing adj, derog using cunning and deceit to achieve a purpose. designingly adverb. by design intentionally. have designs on someone or something to have plans to appropriate them or it.

ETYMOLOGY: 16c: from French désigner.

SOURCE - Chambers 21st Century Dictionary


Introduction

design patternprogramming A description of an object-oriented design technique which names, abstracts and identifies aspects of a design structure that are useful for creating an object-oriented design. The design pattern identifies classes and instances, their roles, collaborations and responsibilities. Each design pattern focuses on a particular object-oriented design problem or issue. It describes when it applies, whether it can be applied in the presence of other design constraints, and the consequences and trade-offs of its use. Home (http://st-www.cs.uiuc.edu/users/patterns/patterns.html) ["Design Patterns: Elements of Reusable Object-Oriented Software", Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides]. (1997-07-21)

SOURCE – Free On-Line Dictionary Of Computing (http://foldoc.org/)


Introduction

1970’s - Christopher Alexander (an architect) worked on « Pattern Languages » which were applied in many domains:

a structured method of describing good design practices within a field of expertise.

Using a pattern language permits non-experts in a field to successfully solve very large, complex design problems.

A single problem is documented with its typical place (the syntax), and use (the grammar) with the most common and recognized good solution seen in the real world, like the entries seen in dictionaries.

Such an entry is considered to be a single design pattern; and a rich set of patterns form a language.


Introduction

Early research:

THING-MODEL-VIEW-EDITOR an Example from a planning system, Trygve Reenskaug, 1979.

Using Pattern Languages for Object-Oriented Programs,Kent Beck and Ward Cunningham, 1987.

A Cookbook for Using View-Controller User the Model- Interface Paradigm in Smalltalk-80, Krasner and Pope, 1988.


Introduction

Breakthrough into mainstream: Gang of Four (GOF)

Design Patterns: Abstraction and Reuse of Object-Oriented Design, Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides, 1993


Introduction

Further reading:

• Design Patterns for Object-Oriented Software Development, Pree and Sikora, 1997

• The origins of pattern theory: the future of the theory, and the generation of a living world, C. Alexander, 1999

• Software Factories Assembling Applications with Patterns, Models, Frameworks and Tools, Greenfield and Short, 2003.

• The Model-View-Controller (MVC) Its Past and Present, Trygve Reenskaug, 2003.

• What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software, O'Reilly, 2007


Definitions

Alexander :

As an element in the world, each pattern is a relationship between a certain context, a certain system of forces which occurs repeatedly in that context, and a certain spatial configuration which allows these forces to resolve themselves.

As an element of language, a pattern is an instruction, which shows how this spatial configuration can be used, over and over again, to resolve the given system of forces, wherever the context makes it relevant.

Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.


Definitions

Erich Gamma (GoF):

Patterns provide you with tools that help you with design problems. They do so not by giving a pat solution but by explaining trade-offs. Even though patterns are abstracted from concrete uses, they also provide you valuable implementation hints. From my perspective it is the fact that patterns are implementable that makes them so valuable.

Patterns are distilled from the experiences of experts. They enable you to repeat a successful design done by someone else. However, since patterns enable many implementation variations you still have to keep the brain turned on.

Since patterns provide you with names for design building blocks they provide you with a vocabulary to describe and discuss a particular design.

I think patterns as a whole can help people learn object-oriented thinking: how you can leverage polymorphism, design for composition, delegation, balance responsibilities, and provide pluggable behavior.


Elements of Design Patterns

• Pattern Name

• Problem statement -context where it might be applied

• Solution - elements of the design, their relations, responsibilities, and collaborations (including a template of the solution)

• Consequences - Results and trade-offs


The 23 GoF patterns are generally considered the foundation for all other patterns. They are categorized in three groups: Creational, Structural, and Behavioral.


Design pattern composition: MVC example

Traditional version of MVC as a compound pattern


Design pattern composition: MVC example

Alternative version of MVC as a compound pattern


• The best way to learn about patterns is to look at examples.

• We shall do these in UML/Java, but any (OO) language can be used to model/implement/re-use a pattern.

• It is best if you discover patterns yourself, rather than being shown them – but this is not guaranteed to happen!

• You can also read about them. A good web site is: http://sourcemaking.com/design_patterns

Learning by PBL


The Model View Design Pattern – PBL Session

Dowload the code from the module web site:

…~gibson/Teaching/CSC7322/Code/DesignPattern-MVC.zip

Note the package structure – particularly the MVC components:

• Models• Views• Controllers

Let us examine some of this code together



PaddleSpecification



PaddleSpecification



PaddleSpecification

/** * The lower bound on the horizontal position of the paddle */final int MINIMUM_position = 0;

/** * The upper bound on the horizontal position of the paddle */final int MAXIMUM_position = 31;

/** * @return true if the <code> MINIMUM_position </code> value is * less than the <code> MAXIMUM_position</code> */ boolean INVARIANT_OF_CLASS = (MINIMUM_position <= MAXIMUM_position);



PaddleSpecification



PaddleSpecification



PaddleSpecification



PaddleSpecification



Paddle Implementation: Paddle




TO DO: Examine the code and check that you understand it.




TO DO: Examine the code and check that you understand it.




public void updatePosition(){

if (directionToRight && position < MAXIMUM_position) position++; else if (!directionToRight && position > MINIMUM_position) position--; else changeDirection();}

public void changeDirection(){directionToRight= ! directionToRight; }

QUESTION: Do the methods that change the state respect the invariant?


The Model View Design Pattern – PBL SessionPaddle Implementation: Testing the Paddle Model



Unit Testing the Paddle Model

TO DO: Check that you understand the unit test code



Paddle View Specification

Once we have tested our model (the Paddle) we can develop a (graphical) view:



Paddle View Specification

QUESTION: Why do we specify these methods?



Paddle View Test

public class Test_PaddleView {

public static void main(String args[]) {

Paddle paddleModel = new Paddle(0); PaddleView paddleView = new PaddleView(paddleModel); paddleView.updateView();}

}



Paddle View – the implementation




public PaddleView(PaddleSpecification rvPaddle){

frame = new JFrame("Paddle MVC");frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setSize(VIEW_WIDTH+(BORDER/2),VIEW_HEIGHT+(BORDER/2));frame.setVisible(true);frame.setResizable(false);canvas = new PaddleViewCanvas(rvPaddle, VIEW_WIDTH, VIEW_HEIGHT);

frame.getContentPane().add(canvas, BorderLayout.CENTER );}

TO DO: Check your understanding of the code



Paddle View Canvas – where the drawing is done inside the View frame

TO DO: Check your understanding of the code






Extending the model so that it can be animated inside the view







public void run(){

do{try {Thread.sleep(DELAY);} catch (InterruptedException e) {e.printStackTrace();}

updatePosition();if (paddleView !=null) paddleView.updateView();}while (true);}

QUESTION: do you understand how the delay is implemented?


The Model View Design Pattern – PBL SessionTesting the animated view

public class Test_RunnableViewablePaddle {

public static void main(String args[]) {

RunnableViewablePaddle rvPaddle = new RunnableViewablePaddle(); PaddleView paddleView = new PaddleView(rvPaddle); rvPaddle.setView(paddleView); Thread paddleThread = new Thread(rvPaddle); paddleThread.run();}}


The Model View Design Pattern – PBL SessionAdding a controller to the system – the specification


The Model View Design Pattern – PBL SessionAdding a controller to the system – the implementation

public class PaddleController extends PaddleControllerAbstraction{

/** * The model being controlled by the controller */PaddleSpecification paddle;

/** * @param rvPaddle is the model to be controlled by the controller */public PaddleController(PaddleSpecification rvPaddle){

this.paddle = rvPaddle;}

/** * Change direction when a key is typed */ public void keyTyped(KeyEvent e){ paddle.changeDirection();}}


The Model View Design Pattern – PBL SessionAdding a controller to the system – the MVC structure



public PaddleMVC(){

// Construct modelrvPaddle = new RunnableViewablePaddle();

// Construct view which can see modelpaddleView = new PaddleView(rvPaddle);

//Allow the model to see view in order to make updates when state changesrvPaddle.setView(paddleView);

//Construct controllerPaddleController paddleController = new PaddleController(rvPaddle);

//The frame which contains the view must allow the controller to react to key pressespaddleView.getFrame().addKeyListener(paddleController);}



public void startgame(){

Thread paddleThread = new Thread((Runnable) rvPaddle); paddleThread.run();}

Now we just need a method that starts a thread containing the runnable viewable paddle


The Model View Design Pattern – PBL SessionAdding a controller to the system – the MVC system application

public class PaddleMVC_Application {

public static void main(String[] args){

PaddleMVC application = new PaddleMVC(); application.startgame();}

}


The Model View Design Pattern – PBL SessionThe MVC problem

The use of the MVC design pattern should make it easier to maintain/extend/update the Paddle application.

TO DO:

1. Change the model so that the paddle doesn’t bounce it wraps around2. Change the controller so that you have to hold down a button to move left

and hold down a button to move right3. Change the view so that the direction of the next move is represented

graphically

QUESTION: How many different Paddle systems are now possible (based on 2 different models, two different views and 2 different controllers)?

Can you instantiate all of them and test their behaviour?

Documents

CSC 7322 : Object Oriented Development J Paul Gibson, A207 [email protected] . it-sudparis.eu /~gibson/Teaching/CSC7322