This is a really good place to start for some intermediate Java topics and we will cover:

• Inheritance
• Collections
• Double buffering
• Polymorphism

So before we get going here is a little disclaimer; the following code is an example of how to go about implementing the requirements. It is not the only way or the right way. Second, I am not a Java guru, expert, oracle etc. I just like to tinker with stuff and thought I would share my findings to help others.

So lets begin, first up we need some form of specification. What do we actually want the program to do? I want the user to be able to select a type of shape (Circle or Square) and be able to click on the window of the application and draw the specified shape. I also want everything that the user draws to remain on the window when the window is moved or minimized. The window should be of a specific size and the user should not be able to maximize the window.

Did you get all that? so the fist task might be to dig all of the program features out of this brief paragraph. One thing that quickly becomes apparent however is the large amount of stuff that is not specified. This is a real pain when trying to design a program as the person that list the requirements will usually have a good idea of what they want it to do and will focus on that. This leaves a load of small decisions that still need to be made. In this example there are a few, take the shapes for example. The different types have been specified (square and circle), but the size, color and border are anyones guess. Also the method that the user has to select a specific shape is not specified.

As you can see even with a relatively small program the requirements can be large. For the sake of this little tutorial though I will finish with the specification as I want to focus on the way Java works and how to go about implementing this in Java. You will see how the specification is fulfilled and any other requirements decided further into the post.

As this is part 1 I am only going to implement a limited set of features. I have decided to split it as there are a number of things to take in and it would turn into the longest post in the world and become very boring and hard to follow if I crammed everything into one post. So in this post I will cover setting up a frame and a canvas, mouse interaction with the canvas, and drawing onto the canvas. I will then put this all together and produce a program that can draw a square.

The Frame

The following code is taken from here and is adapted for this example. The class MainFrame creates a window on the screen. This is the window that everything else will happen within. This is an important part of the application because it interacts with the underlying operating system and handles all the displaying stuff so we don’t have to worry about it.

The main method is used to get everything up and running by calling the createAndShowGUI() method which contains all the code to specify how we want our frame to look and behave.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class MainFrame {

    private static void createAndShowGUI() {

        // Create and set up the window.
        JFrame frame = new JFrame("A Frame");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // Set frame size
        frame.setSize ( 300, 350 );
        // prevent frame from maximising
        frame.setResizable (false);
        // center the frame on the screen
        frame.setLocationRelativeTo (null);
        // display it
        frame.setVisible(true);
    }

    public static void main(String[] args) {

        // Schedule a job for the event-dispatching thread:
        // creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}

Compiling and running this code should give you an empty window in the center of your screen like the one pictured below.

For a bit more info on what is going on in the main method check out this forum post.

The Canvas

As well as the JFrame class Java Swing also provides a JPanel class. The JPanel is described as a lightweight container panel. Basically this means you can use it to contain other controls or other objects. What we are going to use it for in this example is the canvas which the user paints on. This will be where the majority of our applications logic will be held as the canvas will be responsible for listening for user input and the dealing with it should the users perform an action.

In order the get a picture of what this is imagine that the JFrame created in the previous example is a blank table and the JPanel is a clean piece of paper we are going to lay on top of it to draw on. The image below shows are frame with a JPanel covering the JFrames content pane. The content pane is the part of the JFrame that we are going to put are JPanel in. In the picture the JPanel has been colored white as by default its transparent.

Because we need the JPanel to react to user input and we will also want to override a few of its method (you will just have to trust me on this for now). I am going to create a sub class of JPanel called CanvasPanel. This is were all are code will go.

In order to detect the user clicking onto the CanvasPanel we need to add a MouseAdapter and a MouseMotionAdapter to the CanvasPanel. This can be done in the constructor. A small demo version of the CanvasPanel class is shown below.

import java.awt.Color;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import javax.swing.JPanel;

class CanvasPanel extends JPanel {

    public CanvasPanel () {

        this.setBackground ( Color.WHITE );

        // add the input listners
        addMouseListener ( new MouseAdapter () {
            public void mousePressed ( MouseEvent e ) {
                System.out.println ("Mouse Pressed: X = " +
                    e.getX () + ", Y = " + e.getY () );
            }
        });

        addMouseMotionListener ( new MouseMotionAdapter () {
            public void mouseDragged ( MouseEvent e ) {
                System.out.println ("Mouse Dragged: X = " +
                    e.getX () + ", Y = " + e.getY () );
            }
        });
    }
}

As you can see its pretty simple at the moment. All we have is a constructor that sets the background color to white and then adds are mouse input listners. Within these two listners I have stuck a couple of rudimenty console output lines to test that its all working. In order to get our MainFrame object using this fancy new CanvasPanel we need to update the createAndShowGUI method to this:

private static void createAndShowGUI () {
    // Create and set up the window.
    JFrame frame = new JFrame ( "A Frame" );
    frame.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE );

    /*
     here is the new line
    */
    frame.getContentPane().add(new CanvasPanel());

    // Display the window.
    frame.setSize ( 300, 350 );
    // prevent frame from maximising
    frame.setResizable ( false );
    // center the frame on the screen
    frame.setLocationRelativeTo ( null );
    frame.setVisible ( true );
}

So as discussed previously we a telling our MainFrame object to use our CanvasPanel by adding a new CanvasPanel object to the MainFrame’s ContentPane. Running this should display a frame that looks the same as before but when you click on it the X and Y coordinates are printed to the console.

The Shapes

So you want to add a shape? Well yes of course you do or you would not have bothered to read this far. A shape is an interesting thing in Java and I advise you to have dig around in the libraries to see what is already available. To cut a long story short Java already has a pretty good shape class hierarchy in the standard library. I know is a favorite topic for lecturers to use when talking about inheritance and its all in the Java library. The majority of objects that Java specifies for representing shapes impliment the Shape interface. In this iteration of the example we want to focus on the Rectangle class.

Before we can start painting however we need to understand a few other things about the CanvasPanel object we created earler. What we need is to override the paintComponent within CanvasPanel. This method is called every time something is updated or changed like the location of the frame on the screen or another application’s window passes in front of our window. The paintComponent method is passed a Graphics object. A quick look at the documentation for this and we find a number of very usefull sounding methods like drawRect() and drawOval(). The Graphics object is the thing we need. Everything we want to display we draw on this object.

Now before we get going with our rectangle I need to talk about a few things. What I want to happen is that when a user clicks on the CanvasPanel a new square is drawn. If the user drags the mouse over the panel then a line of squares should be drawn. This raises a few questions. How do I remeber where all the squares are meant to be and how do I triger the paintComponent method myself?

First up I think we need a Square object to see what we are talking about:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Rectangle;

public class Square extends Rectangle {
    int SIZE = 20;
    Color squareColor = Color.RED;

    public Square ( int x, int y ) {
        super();
        this.x = x;
        this.y = y;
        this.height = SIZE;
        this.width = SIZE;
    }

    public void paintMe ( Graphics g ) {
        g.setColor ( squareColor );
        g.fillRect ( x, y, width, height );
    }
}

I have extended the Java Rectangle class and have added a special method called paintMe to my Square which takes a Graphics objects and draws a square onto it. We now have to add a little bit to the CanvasPanel in order for it to be able to store the Square objects and pass a Graphics object to them. First off I need an array to hold all of the Square objects that are created by the user. Initially you may be thinking easy, declare an Array, no problem. Thinking about it though this is not a good idea mainly because we do not know how big the array needs to be. The user may draw 1 Square or 1000 so we need a container object that can handle this. Introducing the ArrayList. With an array list we don’t need do declare a size as it has the ability to shrink and grow depending on what is added or removed from it.

So every time we detect mouse activity on the CanvasPanel we create a new shape and add it to the ArrayList. Then we call the repaint() method which trigers the repainting of the Canvas and draws the new shape. This is done by overriding the paintComponent() method and looping through the ArrayList and calling the paintMe() method of each shape. All of these modifications are shown in the updated version of the CanvasPanel class below:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import java.util.ArrayList;
import javax.swing.JPanel;

class CanvasPanel extends JPanel {

    // declare arraylist to store shapes
    ArrayList<Square> s = new ArrayList<Square>();

    public CanvasPanel () {

        this.setBackground ( Color.WHITE );

        // add the input listners
        addMouseListener ( new MouseAdapter () {
            public void mousePressed ( MouseEvent e ) {
                newSquare ( e.getX (), e.getY () );
            }
        } );

        addMouseMotionListener ( new MouseMotionAdapter () {
            public void mouseDragged ( MouseEvent e ) {
                newSquare ( e.getX (), e.getY () );
            }
        } );
    }

    private void newSquare ( int x, int y ) {

        // add new square to list
        s.add(new Square( x, y ));

        // repaint screen
        repaint ();
    }

    public void paintComponent ( Graphics g ) {
        super.paintComponent ( g );

        // loop through each square
        for(Square tmp:s)
            // paint it
            tmp.paintMe(g);
    }
}

As you can see every time input is detected a call to newSquare() is made with the X and Y of the input. A new Square is created and added to the ArrayList and then a call to repaint() is made. This invokes the paintComponent() method which loops through all the shapes and passes them the Graphics object for each Square to paint its self onto.

Tidy up

If you run the program now you should be able to draw squares onto the canvas, but there is one small issue in that the square is drawn from top left corner. I want the mouse pointer to be in the middle of the square when it is drawn. To do this we simple change the way the Square object interprets the X and Y values that it’s given by offsetting them by half of the squares length so that the constructer now looks like this:

public Square ( int x, int y ) {
    super();
    this.x = x - (SIZE/2);
    this.y = y - (SIZE/2);
    this.height = SIZE;
    this.width = SIZE;
}

Now run the program and the squares are nicely centered on the pointer.

Thats a wrap

That’s it for part 1. In the next part I will cover double buffering.

Resources

You can download the source files for part 1 here.

Here are some of the books and web pages that I found really useful in trying to understand this topic:

Books

• Core Java (newer version available)
• Head First Java
• Killer Game Programming in Java

Web Pages

• Painting in AWT and Swing
• Performing Custom Painting
• Using Swing Components

I thought it might help someone if I show how to get round the issue.

In order to illustrate this problem we first need a basic (very basic) class:

class Person {

    Person(int year, int month, int day) {
        GregorianCalendar calendar = new GregorianCalendar(year, month, day);
        this.dateOfBirth = calendar.getTime();
    }

    public Date getDateOfBirth() {
        return dateOfBirth;
    }

    private Date dateOfBirth;
}

So apart form its limited functionality what is wrong with this class? It has a private class field and an accessor method for it so in theory it is nice and safe encapsulated in the class right? Wrong!

The class field is a references to an object. When the accessor method is called it returns a copy of the reference to that object. Now the class and the code that called the accessor method both have a reference to the same object. This means that the code that called the accessor method can change the object and the Person class can do nothing about it.

Here is a little example, first a Person object is created:

Person aPerson = new Person(1958, 1, 5);

A call to getDateOfBirth() would return a reference to a Date object with a year of 1958. All good so far.

Now for the mayhem; The code below creates a new Date object called newDateOfBirth. It is a copy of the Person’s dateOfBirth object reference. 10 years in milliseconds is calculated and added to newDateOfBirth in effect bringing the newDateOfBirth forward 10 years.

Date newDateOfBirth = aPerson.getDateOfBirth();

double tenYearsInMilliSeconds = 10 * 365.25 * 24 * 60 * 60 * 1000;

newDateOfBirth.setTime(newDateOfBirth.getTime() + (long) tenYearsInMilliSeconds);

Because newDateOfBirth is a new variable it is reasonable to think that it is a new object on its own and has nothing to do with the Person object. The problem here though is because a reference was passed to it newDateOfBirth and aPerson.dateOfBirth are both looking at the same object. Any change made to newDateOfBirth will effect aPerson.dateOfBirth. The following code proves this:

System.out.println(aPerson.getDateOfBirth());

This will give the year 1968 not 1958.

A simple way to fix this problem is to return a reference to a copy of the object instead of the reference itself. This is a simple change to the getDateOfBirth method:

public Date getDateOfBirth() {
    return (Date) imutabledateOfBirth.clone();
}

By using the clone method this problem is fixed, smily faces all round.

First, here are 5 different reverse methods:

The good old for loop version

public static String reverse_loop (String in) {
    String out = "";
    for (int i=0; i<in.length(); i++) {
        out += String.valueOf(in.charAt((in.length()-1)-i));
    }
    return out;
}

A string buffer with an extra variable version

public static String reverse_buffer_var (String in) {
    StringBuffer sb = new StringBuffer(in).reverse();
    return sb.toString();
}

A string buffer without an extra variable version

public static String reverse_buffer (String in) {
    return new StringBuffer(in).reverse().toString();
}

A Recursive version from here

public static String reverse_recur (String in) {
    if (in.length() <= 1) {
        return in;
    }
    return reverse5(in.substring(1)) + in.charAt(0);
}

A tail recursive version from here

public static String reverse_tail_recur(String str) {
    if (str.length()  <= 1) {
        return str;
    }
    return reverse_tail_recur(str, "");
}

private static String reverse_tail_recur(String str, String acc) {
    if (str.length() == 0) {
        return acc;
    } else {
        return reverse_tail_recur(str.substring(1), str.charAt(0) + acc);
    }
}

So I created a string and passed it to each of these methods. Using NetBean's performance tools I recorded the amount of time it took for each method to reverse the string and the results are as follows:

1. reverse_buffer 0.077ms
2. reverse_buffer_var 0.408ms
3. reverse_recur 8.17ms
4. reverse_tail_recur 10.76ms
5. reverse_loop 73.2ms

So from this it is easy to see that the loop method is the slowest. It is also a good argument for using the JDK methods where available as using a StringBuffer and its reverse method was by far the quickest

Update

Found this post which reiterates that using a native method is probably the best course of action.

Java

First off just in case you are not sure, a palindrome is a string that reads the same forwards as it does backwards. e.g madam

So to solve this I guess we need a method called pallindrome()

public static boolean isPalindrome (String word) {
    if (word.equalsIgnoreCase(reverse(word))) { return true; }
    else { return false; }
}

So here we have a method called isPalindrome that takes a string and returns true or false depending on the success of the if statement. The line that performs the test is:

word.equalsIgnoreCase(reverse(word))

This uses the Java String method equalsIgnoreCase to test if word is equal to the result of reverse(word). If true then it is a palindrome.

So what is missing from this code? the implementation of the reverse method. There are many ways to reverse a String, below is my first attempt

public static String reverse (String in) {
    String out = "";
    for (int i=0; i<in.length(); i++) {
        out += String.valueOf(in.charAt((in.length()-1)-i));
    }
    return out;
}

This is a typical loop through the characters in a string in reverse and build up another string with these characters and then return this new string. All fine and good, then I googled a bit and found out that the Java StringBuffer object has a native reverse method so I can rewrite the method as follows:

public static String reverse (String in) {
    StringBuffer sb = new StringBuffer(in).reverse();
    return sb.toString();
}

As well as being fewer lines of code this is far more clear than a the for loop method.

Things to take note of

The reason I split the palindrome method and reverse method instead of having them as one was to improve the testability of the code. It also increases the chances of reuse as it is forceable that I may want the reverse method at a later date on it own without the palindrome stuff.

This is not a perfect implementation. The second to you stick more than one word into isPalindrome it will fall down because at the moment it will not ignore space characters so a palindrome such as ‘nurses run’ will return false

It may not be totally perfect but I enjoyed the exorcise and feel it must be better than the version I came up with 6 years ago on my introduction to programming course.

Ruby

Yes yes, I know another Ruby version of perfectly good code, but the main reason I include it is that its really cool (well for me anyway). This is because the Ruby String object has a reverse method already and because of the open nature of Ruby classes you can add a palindrome method to Ruby’s String without any inheritance stuff. Take a look:

class String
 def palindrome?
   self == self.reverse
 end
end

"madam".palindrome? # returns true

I really like this method, but of course with great power comes great responsibility and open classes are not always a good idea.

Update

So reading more into this it appears that the Java string buffer method might be faster and more efficient than the loop method. The reason for this is that when Java converts the loop method into byte code it substitutes the string concatenation operator for a string buffer and uses the append method. It does this for every concat operation and uses the default buffer size of 16 characters.

Some other factors to take into consideration are that if a null string, empty string or a single character are passed in. A null string will cause a NullPointerException so it is important that it is dealt with. If an empty or one character string is entered they should be returned strait away and no string buffer object created because they are already a reverse of them selves. This means a slight change to the method:

public static String reverse (String str) {
    if (str == null) {
        // kick out an error
        throw new NullPointerException( "reverse passed null String" );
    } else if (str.length() <= 1) {
        // string is already revesed
       return str;
    }
    // use the StringBuffer to reverse str
    return new StringBuffer(str).reverse().toString();
}

Here are some good resources on this topic. I really love the way that you can google something and it turns up a load of stuff that can really help in how you approach a problem and give advice on the merits of different solutions. It really helps improve you.

• StringBuffer versus String
• Optimizing string operations
• NullPointerExceptions
• A great blog on reversing strings with java

Lastly I tried a few different Java methods for reversing a String. You can find the results here.