COMP 310
Fall 2010

HW01: Simple GUI Program with Polymorphism

Home  Info  Owlspace  Resources

In this assignment we will get used to working with the Eclipse environment, it's various plug-in tools and refresh our skills with polymorphic objects.   This is a warm-up assignment to get you used to the tools and restart your programming minds and thus,  is not indicative of the skills required for and complexity of future assignments!

Using Resources

The directions in this assignment (and subsequent assignments) are deliberately vague in places.   The goal is for you to develop your skills in finding, assembling and utilizing information that is spread across multiple resources.  Here is a non-exhaustive list of resources to get you started:


The Development Process

Software development is an iterative process of refinement, so we will make our total application piece by piece, sometimes going back and modifying or perhaps even deleting previous code in order to accommodate the new features as we add them in.   

Never Stray Far From Working Code!

It is a lot easier to find problems in and fix your work when it is only a small difference from operational code. 


Before you start be sure you have Java, Eclipse and the Jigloo, Green UML and Subclipse plug-ins installed!


Make committing to the SVN source control a regular part of your development process.    This has many benefits, including:

Before you start, get Eclipse connected to your Comp310 SVN repository by following the directions on the Subclipse web page to

  1.  Open a SVN Perspective
  2. Add a New SVN Repository to View in Subclipse


You are expected to fully comment all of your code.  For more information, see the resources page on Commenting in Java.

Make a simple GUI application

In this part of the assignment we will construct a simple Java GUI application.

Read the following primer and tutorial FIRST, before starting this part of the assignment!

Never modify code inside of the auto-generated  initGUI() method unless explicitly instructed to do so.   Even then, limit yourself to only the indicated changes at the indicated locations!    Modifying code you do not understand is a sure-fire way to break your application!

  1. Create a new Java Project
  2. Create a package called "view".
  3. Create a new frame in the view package:
    1. Right-click the view package and select New/Other...
    2. In the dialog box that appears, select GUI Forms/Swing/JFrame and click Next
    3. Rename the class to an appropriately meaningful name.    The "Add main method" box should be checked  (we will refactor the main() method to a more appropriate location later).
  4. Click the green Run button at the top of Eclipse.
  5. This would be a good time to do your first commit to SVN:
  6. Fix the class "does not declare a static final serialVersionUID field of type long..." warning.   See the web page about this.
  7. Make sure that you can see the graphical representation of your frame in the Jigloo GUI Builder and place two JPanels ont the frame.  Be sure to give the panels meaningful names (i.e. not the default names!):
  8. Drop a JLabel and a JButton onto the North panel.   As always, give them meaningful names.  
  9. Add an <anonymous> ActionListener to the button by going to its GUI Properties tab and setting the Value of its ActionListener event.
  10. Add a JTextField to the North panel and modify your button click event code to set the label's text to whatever text has been typed into the text field.   Test your code.
  11. Override the paintComponent() method of the center panel to perform some custom painting.
    1. Click on the center panel on the GUI designer.   This should take you to the line of code where the panel is instantiated.
    2. Change the instantiation of the JPanel to an anonymous inner class instance which overrides the paintComponent().  The overridden method will paint a filled colored oval at a fixed location on the panel:
      ... = new JPanel() {
      	* Overridden paintComponent method to paint a shape in the panel.
      	* @param g The Graphics object to paint on.
      	public void paintComponent(Graphics g) {
      	    super.paintComponent(g);   // Do everything normally done first, e.g. clear the screen.
      	    g.setColor(Color.RED);  // Set the color to use when drawing
      	    g.fillOval(75, 100, 20, 40);  // paint a filled 20x40 red ellipse whose upper left corner is at (75, 100)
    3.  You may need to import java.awt.* to get the Graphics and Color class references.
    4. Fix the class "does not declare a static final serialVersionUID field of type long..." warning.   See the web page about this.



Polymorphic Shapes

In this part of the assignment we will construct a Union Design Pattern abstract class hierarchy to represent shapes that are capable of polymorphically drawing themselves onto the screen.   We will be adding this capability to the simple GUI application developed above.

Read the following primer and tutorial FIRST, before starting this part of the assignment!

Comment the code as you create it!   Fill out the comment boxes when Green UML presents them to you!

The directions here are deliberately more vague than above because you should be better versed with the tools plus the emphasis is on expressing your own ideas about the design and implementation of the shapes.

  1. Create a shape package in your project.
  2. Creat a new, empty UML diagram
  3. Use Green UML to create an abstract AShape superclass in the shape package:
  4. Add any private fields you think that an abstract shape should have.
  5. Add the following abstract method:   public abstract void paint(Graphics g, int x, int y)  which will paint the shape at the location given by (x, y).
  6. Create ONE concrete sub-class of AShape whose paint() method draws a specific shape.
  7. Modify the paintComponent() method of the center panel of your GUI so that it ALSO paints an AShape at a given location.  
  8. Add a panel on the East, West or South side of the GUI.
  9. Create at least 2 more concrete shape sub-classes.
  10. Create buttons on the new panel that set the value of the AShape field to a specific instance of a shape sub-class and then call the center panel's repaint() method.
  11. Create a Composite Design Pattern shape that contains two AShapes and whose paint method delegates to each composee.
  12. Add buttons to demonstrate that you can now draw compound shapes of arbitrary complexity.


Grading Critieria  (100 pts total)

© 2010 by Stephen Wong and Scott Rixner