MiniDraw is a framework that helps you building apps that have

[Demo]

• [Demo]

MiniDraw is a framework that helps you building apps that have

• MiniDraw is a framework that helps you building apps that have

• 2D image based graphics
• GIF files
• Optimized repainting
• Direct manipulation
• Manipulate objects directly using the mouse
• Semantic constraints
• Keep objects semantically linked

MiniDraw is downsized from JHotDraw

• MiniDraw is downsized from JHotDraw

• JHotDraw

• Thomas Eggenschwiler and Erich Gamma
• Java version of HotDraw

• HotDraw

• Kent Beck and Ward Cunningham.
• Part of a smalltalk research project that lead to the ideas we now call design patterns and frameworks

MiniDraw

• MiniDraw

• supporting board games mainly
• cut down detail for teaching purposes
• MiniDraw: compositional design (most of the time)
• JHotDraw: polymorphic design (quite a lot of the time)

• Latest addition

• BoardGame extension:
• More direct support for board games with fixed set of checkers

DrawingEditor

• DrawingEditor

• “Project manager”/Redaktør
• Default implementation

• Figure

• Visible element
• ImageFigure

• Drawing

• container of figures

• Tool

• = controller

• Factory

• create impl. of MiniDraw roles

• DrawingView

• view type to use...

Main JHotDraw architecture remains

• Main JHotDraw architecture remains

• Model-View-Controller architectural pattern
• Drawing-DrawingView-Tool
• Observer pattern event mechanism

Challenge:

• Challenge:

• writing programs with a graphical user interface
• multiple open windows showing the same data – keeping them consistent
• manipulating data in many different ways by direct manipulation (eg. move, resize, delete, create, ...)
• i.e. switching tool will switch the object manipulation

Keeping multiple windows consistent?

• Keeping multiple windows consistent?

• Analysis:

• Data is shared but visualization is variable!
•  Data visualisation is variable behaviour
•  Responsibility to visualize data is expressed in interface: View
•  Instead of data object (model) itself is responsible for drawing graphics it lets someone else do the job: the views

Few mouse events (down, up, drag) translate to open-ended number of actions (move, resize, create, ?) on data.

• Few mouse events (down, up, drag) translate to open-ended number of actions (move, resize, create, ?) on data.

• Events are the same but manipulation is variable
•  Data manipulation is variable behaviour
•  Responsibility to manipulate data is expressed in interface: Controller
•  Instead of graphical view itself is responsible for manipulating data it lets someone else do the job: the controller

Challenge 1:

• Challenge 1:

• Also known as observer pattern

• Intent

• Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

Protocol:

• Protocol:

• A convention detailing the expected sequence of interactions or actions expected by a set of roles.

Benefits

• Benefits

• open ended number of viewer types (run-time binding)
• need not be known at develop time
• change by addition, not by modification...
• any number of views open at the same time when executing
• all guarantied to be synchronized

• Liabilities

• update sequence can become cyclic or costly to maintain

Challenge 2:

• Challenge 2:

• Also known as state pattern

• Intent

• Allow an object to alter its behaviour when its internal state changes. The object will appear to change its class.
• i.e. when the editor is in “draw rectangle” state, the mouse events (click, drag, release) will create a rectangle; when in “select object” state, the same (click, drag, release) will move an object…

Consequences

• Consequences

• the manipulation that is active determine the application state (“am I moving or resizing figures?”)
• open ended number of manipulations (run-time binding)
• need not know all states at compile time
• change by addition...

In MiniDraw (HotDraw) the editor is in a state that determines how mouse events are interpreted – do they move a checker, do they select a set of figures, or do they create a rectangle?

• In MiniDraw (HotDraw) the editor is in a state that determines how mouse events are interpreted – do they move a checker, do they select a set of figures, or do they create a rectangle?

• Mouse events are forwarded to the editor’s tool. By changing the tool I change how mouse events are interpreted.

The MVC is an architectural pattern because it defines a solution to the problem of structuring the ’large-scale’ / architectural challenge of building graphical user interface applications.

• The MVC is an architectural pattern because it defines a solution to the problem of structuring the ’large-scale’ / architectural challenge of building graphical user interface applications.

• But the ’engine behind the scene’ is a careful combination of state and observer...

• That again are example of using the 3-1-2 variability handling process.

Basic paradigm: Direct Manipulation

• Basic paradigm: Direct Manipulation

• [Demo: puzzle]

Mouse events do hit the JPanel, but MiniDraw simply delegate to its active tool...

• Mouse events do hit the JPanel, but MiniDraw simply delegate to its active tool...

Scenario: User drags image figure around.

• Scenario: User drags image figure around.

• Then a DragTracker is the active tool:

… is somewhat more complex as it involves a bit more delegation 

• … is somewhat more complex as it involves a bit more delegation 

• StandardDrawingView is-a JPanel.

• This view requests access to the editor’s current tool
• Aka: delegating the request to state.request()

MiniDraw has some simple tools defined

• MiniDraw has some simple tools defined

It is very simple to set a new tool:

• It is very simple to set a new tool:

• editor.setTool( t );

• where t is the tool you want to become active.

• NullTool is a Null Object: a tool that does nothing.

Static view

• Static view

But how does the view get repainted?

• But how does the view get repainted?

• Double observer chain
• Figure notifies drawing notifies drawing view.

Observer pattern has two roles

• Observer pattern has two roles

• Subject: Container of data
• Observer: Object to notify upon data changes

• Who are who here???

The View is rather simple

• The View is rather simple

• JPanel to couple MiniDraw to concrete Swing GUI implementation
• Listen to mouse events to forward them to tool/controller.

Note that this design combines two frameworks

• Note that this design combines two frameworks

• MiniDraw and Swing
• If DrawingView was not an interface then 

Most MiniDraw roles have default implementations:

• Most MiniDraw roles have default implementations:

• Interface X has default implementation StandardX
• Drawing -> StandardDrawing

• There are also some partial implementations:

• Interface X has partial implementation AbstractX
• Tool -> AbstractTool
• Figure -> AbstractFigure

Complex behaviour as a result of combining simple behaviour...

• Complex behaviour as a result of combining simple behaviour...

• Example:

• StandardDrawing
• Responsibilities

Proposal 1:

• Proposal 1:

• implement ahead...

• Proposal 2:

• encapsulate major responsibilities in separate objects and compose behaviour

Examples:

• Examples:

Implementing a custom Drawing

• Implementing a custom Drawing

• In which the figure collection works differently…
• but I can reuse the selection and drawing-change handler behaviour directly!

Images

• Images

• By putting GIF images in the right folder and use them through ImageFigures

• Tools

• Implement Tool and invoke editor.setTool(t)

• Figures

• You may make any new type you wish

• Drawing

• Own collection of figures (e.g. observe a game instance)

• Observer Figure changes

• Make semantic constraints

• Views

• Special purpose rendering

MiniDraw is

• MiniDraw is

• A framework: A skeleton application that can be tailored for a specific purpose
• A demonstration:
• of MVC, Observer, State, Abstract Factory, Null Object, Strategy, ...
• of compositional design: Make complex behaviour by combining simpler behaviours
• A basis: for the mandatory project GUI.