Download ProjectDrawing

CSCI2014 Software Construction with Java
Project Drawing Package
Project Drawing Package
Introduction
This project shows how a basic drawing package can be implemented in Java. The functional requirements of the
system are:

To create a drawing specified by a text data file.

To interactively create line drawings composed of straight lines, and simple shapes…

…and store the data in a text file.

To animate a sequence of drawing.
An incremental development methodology is used. Partial systems are built in the form of prototypes, and
gradually more functionality is added. This may involve some redesign of the software. Some parallel directed
exercises (see other exercise sheets) will help to develop the programming techniques needed to build the
prototypes. This case study illustrates the application of a number of software design patterns, which can be reused in other applications.
Programming requirements
Prototype 1 – GUI Component
To display a drawing that is defined in a
data file.
Prototype 2 – The drawing data model.
The Drawable interface, and its classes.
A Picture as a collection of Drawables.
Prototype 3 – Integration of 1and 2.
Familiarity with drawing graphics objects:
java.awt.Graphics2D, java.awt.Shape.
Reading data from a text file. Parsing.
Polymorphism using an interface type.
“Composite” Design Patterns.
Software design issues.
Creating a “Picture” from a data file and
displaying it on a GUI component.
Prototype 4 – Interactive drawing.
Handling mouse events.
Creating a picture using a mouse.
Generating a data file.
Prototype 5 –Enhancements: e.g.
Animation.
Creating and using Toolbox
Program design
Threads. Using javax.swing.Timer class.
“State” Design Pattern
“Observer” Design Pattern:
Take hard copies of the program listings, tests and outcomes at each stage. File them in your portfolio as you go
along. Each stage does not have to be 'perfect'. What matters is that the main programming objective has been
achieved.
lz/csci2014/ProjectDrawing.doc/novt03
Page 1 of 5
CSCI2014 Software Construction with Java
Project Drawing Package
Prototype 1 – GUI component to host a drawing.
1
Create a GUI component that draws a list of shapes. The component should have an ArrayList of Shapes as
an attribute. Initially you can populate the list directly in the constructor. E.g.
shapelist = new ArrayList();
shapelist.add ( new Line2D.Float (25, 50, 100, 100) );
etc.
The paintComponent()method should iterate through the list and draw each shape in turn.
JComponent
+ paintComponent(Graphics)
java.awt.Shape
<<interface>>
ShapeListComponent
*
- shapelist: ArrayList
+ setList (List)
+ paintComponent(Graphics)
2
Design a text data file where each line has the data for a simple graphics object, e.g.
LINE 25 50 100 100
CIRCLE 50 100 75
Etc.
- a line with end points (25,50) and (100, 100)
- a circle with centre at x=50, y=100 and radius=75.
Using a BufferedReader, StringTokenizer, and the parseInt() method, interpret each line of the data file to
create a Shape object, and place this object in an ArrayList. Check that the list has been created correctly.
3
Once you have parts 1.1 and 1.2 working, combine the programs so that the shapes defined in the data file
are displayed on the GUI. You can simply extend program 2 to additionally create the GUI and use the
setList() method to pass in the list of shapes. Note, include a call to repaint() at the end of the
setList() method.
4
Test your program with several data files. Note: validation of the data files is not required. Use correct data
files only.
lz/csci2014/ProjectDrawing.doc/novt03
Page 2 of 5
CSCI2014 Software Construction with Java
Project Drawing Package
Prototype 2 – The Drawing Data Model
In this prototype we introduce our own interface to tag drawable objects. Drawables can be basic objects, (e.g.
Line, Circle, Rectangle), or composite objects which are made up of a collection of other Drawables. Figure 1
shows the Composite Design Pattern applied to Drawable objects.
5
Below is the definition of the interface Drawable. The only requirement of a Drawable object is that it has
a method to draw itself relative to some anchor point (ax,ay) on a Graphics context, g.
import java.awt.Graphics2D;
/* An object that implements the Drawable interface can draw
* itself on a Graphics2D context. If the object does not specify
* its own colours then the current Graphics colour is used.
* The object has a default anchor point of (0,0). The draw
* method gives the actual point (ax, ay) where the object should
* be anchored. The object is drawn relative to this point.
*/
interface Drawable {
/* Draw this object at (ax,ay) on a Graphics context, g. */
public void draw(Graphics2D g, int ax, int ay);
}
<<interface>>
Drawable
+ draw(Graphics2D, int, int)
*
Line
Picture
- int dx
- int dy
PictureComponent
*
+ addDrawable(d,x,y)
- Drawable d
- int x
- int y
Rectangle
- int width
- int height
Circle
draw( Graphics2D g, int ax, int ay) {
for each PictureComponent, c, in the picture
Drawable d = c.getDrawable();
d.draw(g, ax+c.getX(), ay+c.getY());
}
- int radius
Figure 1
A Picture is a collection of Drawable objects. The Picture itself is also Drawable. The draw method of a
picture iterates through each of its PictureComponents and draws them relative to its own anchor point.
This is an example of the Composite Design Pattern.
lz/csci2014/ProjectDrawing.doc/novt03
Page 3 of 5
CSCI2014 Software Construction with Java
6
Project Drawing Package
Write some simple classes that implement Drawable. In each case clearly document what the anchor point
is. Also provide the usual toString() method for each object. Suggestions are:



class Line, anchor point (0,0), other end at (dx,dy) – see below.
class Circle with radius r. The anchor point (0,0) is the centre of the circle
class Rectangle with width w, and height h. The anchor point is the top left hand corner.
class Line implements Drawable{
private int dx;
//x displacement from the anchor point
private int dy;
//y displacement from the anchor point
public Line(int x, int y) { dx=x; dy=y; }
public void draw(Graphics2D g, int ax, int ay) {
g.draw(new Line2D.Float(ax, ay, ax+dx, ay+dy));
}
public String toString() {
return "Line: x-displacement=" + dx + " y-displacement=" + dy;
}
}
7
Test your shapes by drawing them on a Graphics Component. Suggestion: modify the program in No 1.1
8
(More Challenging) Create a class Picture that also implements the Drawable interface. A picture object is
made up of a collection of Drawable picture components and the coordinates of where each component
should be placed relative to the picture’s anchor point. One way of achieving this is to create a helper class
called PictureComponent which has three attributes: a Drawable object, and coordinates (x,y) giving
the position where the component should be anchored relative to the Picture's own anchor point.
Create a Picture object and add some Drawable objects to it. Test it out in your Graphics Component.
Prototype 3 – Integration of 1 and 2.
9
This stage is essentially a repeat of the first prototype, except that the data file needs to specify instances of
Drawable objects. The GUI should also be modified appropriately to hold a list of Drawables in place of
Shapes with corresponding changes to the paintComponent() method.
10 The list of Drawables in the GUI Component of part 9 could be a Picture!
Rename the ShapeListComponent as DrawableComponent. Replace the ArrayList attribute with a Drawable
attribute, and the setList() method with a setDrawable(). In a separate class create a Picture object and pass
this to the Component to display. Test your program with several picture data files.
Prototype 4 – Interactive Drawing
Specifying the picture in a data file is rather tedious. In this prototype, we experiment with creating a picture
dynamically by drawing directly on a graphics component. You will need to have practiced programming
MouseListeners before attempting this prototype.
11 Add a MouseListener object to your DrawableComponent. Test that mouse actions are detected.
12 Then create a Line on the component using a mouse. Typically a user can do this by dragging the mouse
from one point to another. The MouseListener can identify the start and end points in the mousePressed()
and mouseReleased() methods respectively. Note: you will need to define the line coordinates variables as
attributes of the listener class.
Demonstrate that you can produce a line with mouse acrtions by creating a Drawable line object, and adding
it to a Picture that is being displayed on the DrawableComponent. This can happen in the mouseReleased()
method by ensure that the GUI component is repainted to show the updated picture
lz/csci2014/ProjectDrawing.doc/novt03
Page 4 of 5
CSCI2014 Software Construction with Java
Project Drawing Package
13 Generate a text data file from the picture that is created interactively. The data file should have the same
form as specified in Prototype 3. Then you read it in again to display the result.
Prototype 5 – Enhancements
14 Implement one or more of these enhancements:

Create a toolbox so that when a user selects a tool (e.g. Line, Circle, Rectangle) the corresponding
Drawable is created. This is a good place to use the State Design Pattern.

Create a class that holds a sequence of pictures. Using a javax.swing.Timer, display each picture
in turn to make an animation.

In iteration 4.12 modify your model and view classes so that they implement the Observer Design
Pattern. I.e. if a change happens to the Picture model, then updates to the view are triggered
automatically. (See java.util.Observer and java.util.Observable.)

Your own idea:- as discussed and agreed with your lecturer.
Administrative Issues
Hand-in : End of Week 11 ( Friday 12th December 2003 )
For the assessment hand in the following documentation:
1. Class diagram of your final system.
2.
Listings of your classes, organized in a logical manner.
3.
Evidence of functionality:
4.

Test data files…

…and corresponding output.

Annotate the drawing output to show how it reflects the input data.
One side of typed A4 (font size 12), discussing aspects of your project. You should




discuss the design of the classes, and how they work together;
identify successful and unsuccessful outcomes of your code;
describe difficulties that you are unable to resolve satisfactorily;
suggest extensions and enhancements to the application.
Assessment Criteria
1.
Organisation of listings, test plans, documentation, discussion.
2.
Evidence and quality of test data, results, and observations.
3.
Design and implementation of Drawable classes.
4.
Ability to use text data files.
5.
Completeness and functionality of the programs.
6.
Structure of the program.
7.
Quality of discussion.
8.
Evidence of ownership, i.e. attendance record and observation of participation in lab classes.
9.
Viva (as necessary).
Additional Notes

This assignment is worth 35% of the module mark.

You can get a good mark by completing Prototype 3 well.
lz/csci2014/ProjectDrawing.doc/novt03
Page 5 of 5