COMP 310
Fall 2014

HW01: Simple GUI Program with Polymorphism

Home  Info  Owlspace   Java Resources  Eclipse Resources  Piazza

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!

You MUST name your homework folders (= Eclipse project folders) properly. e.g. "HW01", "HW02", etc.!   It is strongly recommended that you create a folder called "Comp310" and place all your homework folders inside of that folder.  For detailed information on how to set up your homework folders and use Eclipse+Subclipse to turn in your work, please see Using Eclipse and Subclipse for Assignment Turn-In.

Failure to properly name your homework folders WILL result in scoring deductions on your 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 UML Lab 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 the auto-generated code inside of your  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 WindowBuilder/Swing Designer/JFrame and click Next
    3. Type in an appropriately meaningful name for the class.    The "Use advanced template for generate JFrame" box should be checked  (we will refactor the main() method to a more appropriate location later). 
    4. Click "Finish".
  4. Click the green Run button at the top of Eclipse.
  5. Fix WindowBuilder's bad auto-generated code now!
    1. (Only necessary if WindowBuilder preferences were not set yet!) Separate the construction of the frame from its initialization:
      1. Move the auto-generated code out of the constructor into a new "initGUI()" method.
      2. Add a call to initGUI() from inside the constructor.
    2. Encapsulate the start-up process of the frame and separate it away from the start-up process of the application:
      1. Move the call to "setVisible(true)" from inside of main() to inside of a new "start()" method.
      2. Replace the old call to setVisible(true) with a call to start().
  6. Click on the green "Run" button again to make sure your frame still works.
  7. This would be a good time to do your first commit to SVN:
  8. Fix the class "does not declare a static final serialVersionUID field of type long..." warning.   See the web page about this.
  9. Make sure that you can see the graphical representation of your frame in the WindowBuilder design mode and place two JPanels onto the frame.  Be sure to give the panels meaningful names (i.e. not the default names!):
  10. Drop a JLabel and a JButton onto the North panel.   As always, give them meaningful names.  
  11. Add an <anonymous> ActionListener to the button by simply double-clicking the button (same as right-clicking the button and selecting "add event handler/action/actionPerformed" or going to the events panel view in the component's Properties tab, expanding "action" and double-clicking "performed".) 
  12. 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.
  13. 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.


Adding tool tips (required for all components):

In the WindowBuilder designer, a tool tip (a description about the component and how it is used that pops up when the mouse is held over the component) can easily be made by filling out the toolTipText property of any component.


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 UML Lab 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. Create the abstract share superclass:
  3. Add any private fields you think that an abstract shape should have.
  4. Add the following abstract method:   public abstract void paint(???)  ( the input parameters to be determined by you) which will paint the shape at a given, specific location.
  5. Create ONE concrete sub-class of AShape whose paint() method draws a specific shape.
  6. Modify the paintComponent() method of the center panel of your GUI so that it ALSO paints an AShape at a given location.  
  7. Add a panel on the East, West or South side of the GUI.
  8. Create at least 2 more concrete shape sub-classes.
  9. 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.
  10. Create a Composite Design Pattern shape that contains two AShapes and whose paint method delegates to each composee.
  11. Add buttons to demonstrate that you can now draw compound shapes of arbitrary complexity.  That is, when you click the button, a pre-determined shape made by composing multiple other shapes is drawn on the screen, e.g. a house made of triangle and square shapes.  There should NOT be a "HouseShape" class!   Create the composition when the button is clicked.

You should have created a UML diagram showing the entire shape hierarchy  (do not include the GUI components).

Grading Critieria  (100 pts total)

© 2014 by Stephen Wong