Object-Oriented Programming with Java, part II

Writing to a File

In section 15, we learnt that reading from a file happened with the help of the classes Scanner and File. The class FileWriter provides the functionality to write to a file. The FileWriter constructor is given as parameter a String illustrating the file location.

FileWriter writer = new FileWriter("file.txt");
writer.write("Hi file!\n"); // the line break has to be written, too!
writer.write("Adding text\n");
writer.write("And more");
writer.close(); // the call closes the file and makes sure the written text goes to the file

In the example we write the string "Hi file!" to the file "file.txt"; that is followed by a line break, and by more text. Note that when you use the write method, it does not produce line breaks, but they have to be added later manually.

Both the FileWriter constructor and the write method may throw an exception, which has to be either handled or the responsibility has to be delegated to the calling method. The method which is given as parameter the file name and the text to write into it can look like the following.

public class FileHandler {

    public void writeToFile(String fileName, String text) throws Exception {
        FileWriter writer = new FileWriter(fileName);
        writer.write(text);
        writer.close();
    }
}

In the above writeToFile method, we first create a FileWriter object, which writes into the fileName file stored at the location specified as parameter. After this, we write into the file using the write method. The exception the constructor and write method can possibly throw has to be handled either with the help of a try-catch block or delegating the responsibility. In the method writeToFile the responsibility was delegated.

Let's create a main method where we call the writeToFile method of a FileHandler object. The exception does not have to be handled in the main method either, but the method can declare to throw possibly an exception throw the definition throws Exception.

    public static void main(String[] args) throws Exception {
        FileHandler handler = new FileHandler();
        handler.writeToFile("diary.txt", "Dear Diary, today was a nice day.");
    }

When we call the method above, we create the file "diary.txt", where we write the text "Dear Diary, today was a nice day.". If the file exists already, the old content is erased and the new one is written. FileWriter allows us to add text at the end of the already existing file by providing additional parameter boolean append, without erasing the existing text. Let's add the method appendToFile() to the class FileHandler; the method appends the text received as parameter to the end of the file.

public class FileHandler {
    public void writeToFile(String fileName, String text) throws Exception {
        FileWriter writer = new FileWriter(fileName);
        writer.write(text);
        writer.close();
    }

    public void appendToFile(String fileName, String text) throws Exception {
        FileWriter writer = new FileWriter(fileName, true);
        writer.write(text);
        writer.close();
    }
}

In most of the cases, instead of writing text at the end of a file with the method append, it is easier to write all the file again.

    public static void main(String[] args) throws FileNotFoundException, IOException {
        FileManager f = new FileManager();

        for (String line : f.read("src/testinput1.txt")) {
            System.out.println(line);
        }
    }

first
second

MindfulDictionary dict = new MindfulDictionary();
dict.add("apina", "monkey");
dict.add("banaani", "banana");
dict.add("apina", "apfe");

System.out.println( dict.translate("apina") );
System.out.println( dict.translate("monkey") );
System.out.println( dict.translate("programming") );
System.out.println( dict.translate("banana") );

monkey
apina
null
banaani

MindfulDictionary dict = new MindfulDictionary();
dict.add("apina", "monkey");
dict.add("banaani", "banana");
dict.add("ohjelmointi", "programming");
dict.remove("apina");
dict.remove("banana");

System.out.println( dict.translate("apina") );
System.out.println( dict.translate("monkey") );
System.out.println( dict.translate("banana") );
System.out.println( dict.translate("banaani") );
System.out.println( dict.translate("ohjelmointi") );

null
null
null
null
programming

apina:monkey
alla oleva:below
olut:beer

Scanner fileReader = new ...
while ( fileReader.hasNextLine() ){
    String line = fileReader.nextLine();
    String[] parts = line.split(":");   // the line is split at :

    System.out.println( parts[0] );     // the part of the line before :
    System.out.println( parts[1] );     // the part of the line after :
}

MindfulDictionary dict = new MindfulDictionary("src/words.txt");
dict.load();

System.out.println( dict.translate("apina") );
System.out.println( dict.translate("ohjelmointi") );
System.out.println( dict.translate("alla oleva") );

monkey
null
below

tietokone:computer

computer:tietokone

MindfulDictionary dict = new MindfulDictionary("src/words.txt");
dict.load();

// using the dictionary

dict.save();

User Interfaces

Attention! A part of the user interface tests opens a user interface and uses your mouse to click on the user interface components. When you are executing user interface tests, do not use your mouse!

So far, our programs have only been composed of application logic and text user interface which made use of application logic. In a couple of exercises we have also got a graphical user interface, but they had usually been created for us. Next, we see how we can create graphical user interfaces in Java.

User interfaces are windows which contain different types of buttons, text boxes, and menus. When we program user interfaces we use Java's Swing component library, which provides us with classes to create and handle user interfaces.

The basic element of a user interface is the class JFrame, and we create the user interface components in its component section. Orthodox user interfaces implement the interface Runnable, and they are started in the main program. In this course, we use the following user interface body:

import java.awt.Container;
import java.awt.Dimension;
import javax.swing.JFrame;
import javax.swing.WindowConstants;

public class UserInterface implements Runnable {

    private JFrame frame;

    public UserInterface() {
    }

    @Override
    public void run() {
        frame = new JFrame("Title");
        frame.setPreferredSize(new Dimension(200, 100));

        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        createComponents(frame.getContentPane());

        frame.pack();
        frame.setVisible(true);
    }

    private void createComponents(Container container) {
    }

    public JFrame getFrame() {
        return frame;
    }
}

Let's have a closer look the the user interface code above.

public class UserInterface implements Runnable {

The class UserInterface implements Java's Runnable interface, which allows us to execute a threaded program. Executing a threaded program means that we execute different parts of the program at the same time. We do not dig deeper into threads, but a further information on threads is provided by the course Operating Systems.

    private JFrame frame;

The user interface contains a JFrame object as variable, which is the basic element of a visible user interface. All user interface components are added to the JFrame object component container. Note that object variables cannot be initiated outside the methods. For instance, an initialisation of the object variable JFrame with the class definition "private JFrame frame = new JFrame()" would evade user interface thread execution order, and it can lead to a breakdown.

    @Override
    public void run() {
        frame = new JFrame("Title");
        frame.setPreferredSize(new Dimension(200, 100));

        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        createComponents(frame.getContentPane());

        frame.pack();
        frame.setVisible(true);
    }

The interface Runnable defines the method public void run(), which has to be implemented by all classes which implement the interface. With the method public void run(), we first create a new JFrame whose title is "Title". After this, we define the frame size whose width is 200 pixels and height is 100 pixels. The statement frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); tells to the JFrame object that the user interface has to close when the user presses the cross icon.

Afterwards, we call the method createComponents which is defined lower down in the class. The method is given JFrame's Container object as parameter, where we can add user interface components.

Finally, we call the method frame.pack() which packs the JFrame object as defined before and sorts the user interface components of the Container object contained by JFrame. At the end, we call the method frame.setVisible(true), to show the user interface to the user.

    private void createComponents(Container container) {
    }

In the method createComponents we add user interface components to the JFrame's container. In our example there is no UI component in addition to our JFrame window. The class UserInterface has also the method getFrame which we can use to retrieve the JFrame object which is encapsulated in the class.

Swing user interfaces are started through the method invokeLater, which is provided by the class SwingUtilities. invokeLater receives as parameter an object which implements the interface Runnable. The method adds the Runnable object to the execution queue and calls it as soon as possible. With the classSwingUtilities, we can start new threads when we need them.

import javax.swing.SwingUtilities;

public class Main {

    public static void main(String[] args) {
        UserInterface ui = new UserInterface();
        SwingUtilities.invokeLater(ui);
    }
}

When we execute the main method above, the user interface we have defined in the class UserInterface appears in our screen.

UI Components

User Interfaces are composed of a background window (JFrame) and a component Container, as well as the UI components which are set into the container. UI components are different kinds of buttons, texts, and other items. Every component has its own class. It's useful to get accustomed to Oracle visual sequence of components at the address http://docs.oracle.com/javase/tutorial/uiswing/components/index.html.

Text

Text can be displayed with the help of the class JLabel. JLabel provides a UI component which can be assigned text and whose text can be modified. The text is assigned either in the constructor, or separately, with the setText method.

Let's modify our UI container to display text. We create a new JLabel text component within the method createComponents. Then we retrieve the Container object from our JFrame object, and we add JLabel to Container using its add method.

    private void createComponents(Container container) {
        JLabel text = new JLabel("Text field!");
        container.add(text);
    }

As you see from the code above, JLabel shall display the text "Text field!". When we execute the user interface, we see the following window.

Buttons

You can add buttons to your user interface using the class JButton. Adding a JButton object to your user interface is similar to adding a JLabel object.

    private void createComponents(Container container) {
        JButton button = new JButton("Click!");
        container.add(button);
    }

Next, we try to add both text and a button to our user interface.

    private void createComponents(Container container) {
        JButton button = new JButton("Click!");
        container.add(button);
        JLabel text = new JLabel("Text.");
        container.add(text);
    }

When we execute the program we see the following user interface.

Only the last component we have added is visible, and our program does not work as we would expect. What is the problem, in fact?

Setting up UI Components

All UI components have got their own location in the user interface. The component location is defined by the UI Layout Manager. Before, when we tried to add many different components to our Container object, only one component became visible. Every Container object has a default UI layout manager: BorderLayout.

BorderLayout places the UI components to five areas: the user interface centre and the four compass points. When we use the Container's add method, we can give it another parameter, clarifying where we would like to place the component. the BorderLayout class has five class variables available for use: BorderLayout.NORTH, BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, ja BorderLayout.CENTER.

The UI layout manager we want to use is assigned to the Container object in the parameter of the method setLauout. In addition to the UI component, the method add can also be assigned the location wehere the component should be placed. In the example below, we assign a component to every BorderLayout location.

    private void createComponents(Container container) {
        // the following line is not essential in this case, because BorderLayout is default in JFrame
        container.setLayout(new BorderLayout());

        container.add(new JButton("North"), BorderLayout.NORTH);
        container.add(new JButton("East"), BorderLayout.EAST);
        container.add(new JButton("South"), BorderLayout.SOUTH);
        container.add(new JButton("West"), BorderLayout.WEST);
        container.add(new JButton("Center"), BorderLayout.CENTER);

        container.add(new JButton("Default (Center)"));
    }

Notice that the button "Center" is not visible in our user interface because the button "Default (Center)" is assigned to its place by default. A container with the code above will look like the following after increasing its size manually.

As for UI components, there are also many UI layout managers. Oracle has a visual guide to learn more about UI layout managers at http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html. Below, we introduce the layout manager BoxLayout.

BoxLayout

When we use BoxLayout, UI components are added into the user interface either horizontally or vertically. The BoxLayout constructor is given a Container object as parameter -- where we have been adding the UI components -- and the layout direction of the UI components. The layout direction can be either BoxLayout.X_AXIS, i.e. components are set up horizontally, or BoxLayout.Y_AXIS, i.e. the componets are set up vertically. Differently than BorderLayout, BoxLayout does not have a limited number of places. In other words, you can add to your Container as many components as you want.

Arranging the user interface with BoxLayout works as using BorderLayout. We first create the layout manager and we assign it to the Container object using its method setLayout. After this, we can add components to the Container object using the add method. We don't need a further parameter specifying the location. Below, you find an example of components placed in horizontal order.

    private void createComponents(Container container) {
        BoxLayout layout = new BoxLayout(container, BoxLayout.X_AXIS);
        container.setLayout(layout);

        container.add(new JLabel("First!"));
        container.add(new JLabel("Second!"));
        container.add(new JLabel("Third!"));
    }

Setting up the components vertically does not require major changes. We modify the direction parameter of the BoxLayout constructor: BoxLayout.Y_AXIS.

    private void createComponents(Container container) {
        BoxLayout layout = new BoxLayout(container, BoxLayout.Y_AXIS);
        container.setLayout(layout);

        container.add(new JLabel("First!"));
        container.add(new JLabel("Second!"));
        container.add(new JLabel("Third!"));
    }

Using the different layout managers, we can create user interfaces where the components are set up appropriately. Below, there is an example of user interface where the components are placed vertically. First there is some text, and then an optional selection. You can create a multiple-exclusion scope for a set of buttons -- meaning that turning "on" one of those buttons turns off all the others in the group -- using ButtonGroup and JRadioButton.

    private void createComponents(Container container) {
        BoxLayout layout = new BoxLayout(container, BoxLayout.Y_AXIS);
        container.setLayout(layout);

        container.add(new JLabel("Choose meat or fish:"));

        JRadioButton meat = new JRadioButton("Meat");
        JRadioButton fish = new JRadioButton("Fish");

        ButtonGroup buttonGroup = new ButtonGroup();
        buttonGroup.add(meat);
        buttonGroup.add(fish);

        container.add(meat);
        container.add(fish);
    }

Once the UI is launched, and Meat is selected, the UI looks as follows.

Managing Action Events

So far, even though our user interfaces are beautiful, they are quite boring: they do not react in any way according to the actions done on the interfaces. Such unresponsiveness does not depend on our user interface components, but on the fact we haven't provided them with any way to listen to action events.

Action event listeners listen the UI components they are assigned to. Always when we perform an action on our UI components -- pressing a button, for instance -- the UI component calls a particular method of all the action event listeners assigned to it. Action event listeners are classes which implement a particular interface, and whose instances can be assigned to UI components. When an action event happens, the UI component goes through all its action event listeners, and calls the method defined by the interface.

The most used action event listener interface with Swing user interfaces is ActionListener. The interface ActionListener defines the method void actionPerformed(ActionEvent e), which receives an ActionEvent object as parameter.

Let's implement our first own action event listener, which has to print a message only when we press the relative button. The class MessageListener implements ActionListener and prints the message "Message received!" when the method actionPerformed is called.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class MessageListener implements ActionListener {

    @Override
    public void actionPerformed(ActionEvent ae) {
        System.out.println("Message received!");
    }
}

Next, we create the a JButton for our user interface, and we add a instance of MessageListener to it. The class JButton can be added an action event listener by using the method defined in its parent class AbstractButton: public void addActionListener(ActionListener actionListener).

    private void createComponents(Container container) {
        JButton button = new JButton("Send!");
        button.addActionListener(new MessageListener());

        container.add(button);
    }

When we press the button in our user interface we see the following message.

Message received!

Handling Objects in the Action Event Listeners

Often, we want that an action event listener modified the state of an object. In order to have access to the object in the action event listener, the action event listener constructor has to be assigned a reference to the obejct concerned. Action eventlisteners are exactly similar to other Java's class, and we can program their whole functionality.

Let's take the following user interface, which has two JTextAreas -- where the user can input text, and a JButton. The user interface makes use of GridLayout, which makes the user interface look like a coordinate system. In the GridLayout constructor, we defined one line and three columns.

    private void createComponents(Container container) {
        GridLayout layout = new GridLayout(1, 3);
        container.setLayout(layout);

        JTextArea textAreaLeft = new JTextArea("The Copier");
        JTextArea textAreaRight = new JTextArea();
        JButton copyButton = new JButton("Copy!");

        container.add(textAreaLeft);
        container.add(copyButton);
        container.add(textAreaRight);
    }

After a manual resize, the UI looks like the following.

We want to implement our user interface so that the text in the left area would be copied into the right area when we press the JButton. This is possible by implementing an action event listener. Let's create the class AreaCopier which implements ActionListener and copies the text from one to the other JTextArea.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JTextArea;

public class AreaCopier implements ActionListener {

    private JTextArea origin;
    private JTextArea destination;

    public AreaCopier(JTextArea origin, JTextArea destination) {
        this.origin = origin;
        this.destination = destination;
    }

    @Override
    public void actionPerformed(ActionEvent ae) {
        this.destination.setText(this.origin.getText());
    }
}

Adding the new action event listener to the JButton object is possible using the method addActionListener.

    private void createComponents(Container container) {
        GridLayout layout = new GridLayout(1, 3);
        container.setLayout(layout);

        JTextArea textAreaLeft = new JTextArea("The Copier");
        JTextArea textAreaRight = new JTextArea();
        JButton copyButton = new JButton("Copy!");

        AreaCopier copier = new AreaCopier(textAreaLeft, textAreaRight);
        copyButton.addActionListener(copier);

        container.add(textAreaLeft);
        container.add(copyButton);
        container.add(textAreaRight);
    }

When we press the button, the text in the left area is copied into the right one.

Separating Application and UI Logic

Mixing the application logic (the functionality to print or compute, for instance) and the user interface together in the same classes is usually a bad thing. It makes much more difficult to test and modify a program, and it makes the code much more difficult to read. As the single responsibility principle states: each class should have only one clear responsibility. Separating the application logic from the UI logic works smoothly planning your interfaces appropriately. Let's suppose, that we have got a the class PersonRecord, and we want to implement a user interface to record people.

public interface PersonRecord {
    void record(Person person);
    Person get(String id);

    void delete(Person person);
    void delete(String id);
    void deleteAll();

    Collection<Person> getAll();
}

UI Implementation

When we implement our user interface, a good start is adding the components to it. If we want to record people, we need fields for their name and their ID number, as well as a button to add the person. We use Java's JTextField to input text, and the class JButton to implement our button. In addition, we also create JLabel textual descriptions which tell the user what to do.

For our UI layout, we use GridLayout. There are three lines and two columns in our user interface. We add the action event listener later. The UI method createComponents looks like the following.

    private void createComponents(Container container) {
        GridLayout layout = new GridLayout(3, 2);
        container.setLayout(layout);

        JLabel textName = new JLabel("Name: ");
        JTextField nameField = new JTextField();
        JLabel textID = new JLabel("ID: ");
        JTextField idField = new JTextField();

        JButton addButton = new JButton("Add!");
        // event listener

        container.add(textName);
        container.add(nameField);
        container.add(textID);
        container.add(idField);
        container.add(new JLabel(""));
        container.add(addButton);
    }

After adding the information, our user interface looks like the following.

The action event listener has to know about the recording functionality (PersonRecord interface), as well as the fields it uses. Let's create the class PersonRecordListener which implements ActionListener. As constructor parameter, the class is assigned an object which implements the interface PersonRecord, as well as two JTextField objects which stand for the name and ID fields. In the method actionPerformed we create a new Person object and we record it using the record method of our PersonRecord object.

public class PersonRecordListener implements ActionListener {

    private PersonRecord personRecord;
    private JTextField nameField;
    private JTextField idField;

    public PersonRecordListener(PersonRecord personRecord, JTextField nameField, JTextField idField) {
        this.personRecord = personRecord;
        this.nameField = nameField;
        this.idField = idField;
    }

    @Override
    public void actionPerformed(ActionEvent ae) {
        Person person = new Person(nameField.getText(), idField.getText());
        this.personRecord.record(person);
    }
}

In order to retrieve a PersonRecord reference to PersonRecordListener, the user interface must have access to it. Let's add to our user interface the object variable private PersonRecord personRecord which is set up in the constructor. We also modify the constructor of the class UserInterface, which is assigned a class which implements the interface PersonRecord.

public class UserInteface implements Runnable {

    private JFrame frame;
    private PersonRecord personRecord;

    public UserInteface(PersonRecord personRecord) {
        this.personRecord = personRecord;
    }
    // ...

Now we can create the action event listener PersonRecordListener, which is given both a PersonRecord reference and the fields.

    private void createComponents(Container container) {
        GridLayout layout = new GridLayout(3, 2);
        container.setLayout(layout);

        JLabel nameText = new JLabel("Name: ");
        JTextField nameField = new JTextField();
        JLabel idText = new JLabel("ID: ");
        JTextField idField = new JTextField();

        JButton addButton = new JButton("Add!");
        PersonRecordListener listener = new PersonRecordListener(personRecord, nameField, idField);
        addButton.addActionListener(listener);

        container.add(nameText);
        container.add(nameField);
        container.add(idText);
        container.add(idField);
        container.add(new JLabel(""));
        container.add(addButton);
    }

        Calculator calc = new PersonalCalculator();
        System.out.println("Value: " + calc.giveValue());
        calc.increase();
        System.out.println("Value: " + calc.giveValue());
        calc.increase();
        System.out.println("Value: " + calc.giveValue());

Value: 0
Value: 1
Value: 2

Nested Container Objects

Sometimes we end up in a situation, where the Container object provided by JFrame is not suitable enough for our UI layout. We may want our user interface to look different or to group up UI components according to their use. For instance, building a user interface like the one below would not be so easy, using only the Container object provided by the class JFrame.

We can place Container objects inside each other. The class JPanel (see also How to Use Panels) allows for nested Container objects. It is possible to add UI components to a JPanel instance in the same way we add components to the Container instance of JFrame class. Moreover, it is possible to add an instance of JPanel to a Container object. This makes possible to use many Container objects to develop one user interface.

Creating a user interface like the one above is easier with JPanel. Let's create a user interface with three buttons -- Execute, Test, and Send -- plus a text field. The buttons are a group on its own, and we assign them to a JPanel object which is placed in the lower part of the Container object which we have got from JFrame class.

    private void createComponents(Container container) {
        container.add(new JTextArea());
        container.add(createPanel(), BorderLayout.SOUTH);
    }

    private JPanel createPanel() {
        JPanel panel = new JPanel(new GridLayout(1, 3));
        panel.add(new JButton("Execute"));
        panel.add(new JButton("Test"));
        panel.add(new JButton("Send"));
        return panel;
    }

The JPanel class is given as constructor parameter the layout style to use. If in its constructor the layout style requires a reference to the Container object used, the JPanel class also has the method setLayout.

If our user interface has clear, separate, groups of components we can also inherit the JPanel class. For instance, the panel above could be implemented in the following way, too.

import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JPanel;

public class MenuPanel extends JPanel {

    public MenuPanel() {
        super(new GridLayout(1, 3));
        createComponents();
    }

    private void createComponents() {
        add(new JButton("Execute"));
        add(new JButton("Test"));
        add(new JButton("Send"));
    }
}

Now we can create a MenuPanel instance in our user interface class.

    private void createComponents(Container container) {
        container.add(new JTextArea());
        container.add(new MenuPanel(), BorderLayout.SOUTH);
    }

Note that in case you need an action event listener, the class MenuPanel must be given all the objects its need as parameter.

Drawing

Its Container functionality is not the only reason why we use the class JPanel: it is also used as drawing board, and the user inherits the JPanel class and overrides the method protected void paintComponent(Graphics graphics). The user interface calls the method paintComponent whenever we want to draw again the UI component contents. The parameter of the method paintComponent receives from the user interface an object which implements the abstract class Graphics. Let's create the class DrawingBoard JPanel which inherits from JPanel and which overrides the paintComponent method.

public class DrawingBoard extends JPanel {

    public DrawingBoard() {
        super.setBackground(Color.WHITE);
    }

    @Override
    protected void paintComponent(Graphics graphics) {
        super.paintComponent(graphics);
    }
}

The drawing board above does not contain concrete drawing functionality. In the constructor, we can define the colour of our drawing board to be white by calling its superclass' method setBackground. The method setBackGround receives an instance of the class Color as parameter. The class Color contains the most common colours as class variables; for instance, you get the white colour using the class variable Color.WHITE.

The overridden paintComponent method calls the superclass' paintComponent method, and it does not do anything else. Let's add the drawing board to the createComponents method of class UserInterface. We use the user interface which was defined at the beginning of the section 58. User Interfaces.

    private void createComponents(Container container) {
        container.add(new DrawingBoard());
    }

When we start our user interface we see an empty screen, whose background colour is white. The size of the user interface below is set to 300x300 through the method setPreferredSize, and its title is "Drawing Board".

Drawing on the board is possible using the methods provides by the Graphics object. Let's modify the method paintComponent of DrawingBoard and let's draw two rectangles using the method fillRect of the Graphics object.

    @Override
    protected void paintComponent(Graphics graphics) {
        super.paintComponent(graphics);

        graphics.fillRect(50, 80, 100, 50);
        graphics.fillRect(200, 20, 50, 200);
    }

The method fillRect receives as parameter the x and y coordinates of a rectangle, plus the rectangle width and height. In fact, above we first draw a rectangle which starts with pixel whose coordinates are (50, 80), which is 100 pixels long, and 50 pixels high. Afterwards, we draw a 50-pixel long, 100-pixel high rectangle which begins at (200, 20).

As you notice from the picture, the coordinate system does not work as we are accustomed to.

Java's Graphics object (and most of other programming language libraries) expects the value of the y axis to grow downwards. The coordinate system origin, i.e. the point (0,0) is in the upper left corner: the Graphics object always knows the UI component where we draw, and it is able to define the location of the point to draw based on it. The location of the UI origin can become clear with the help of the following program. First we draw a green 10-pixel long, 200-pixel high rectangle which starts from the point (0,0). Then we draw a black 200-pixel long, 10-pixel high rectangle which starts from the point (0,0). The drawing colour is defined by the method setColor of our Graphics object.

    @Override
    protected void paintComponent(Graphics graphics) {
        super.paintComponent(graphics);

        graphics.setColor(Color.GREEN);
        graphics.fillRect(0, 0, 10, 200);
        graphics.setColor(Color.BLACK);
        graphics.fillRect(0, 0, 200, 10);
    }

Such coordinate system reversibility depends on the way user interface size is modified. When we modify the size of a user interface, this is reduced or increased by "dragging the bottom right corner"; in this way, the drawing on the screan would move while we change the UI size. Because the grid starts from the upper left corner, the drawing position is always the same, but the visible part changes.

Let's extend our previous example and draw an independent avatar-object in our user interface. Let's create the class Avatar; it has the coordinates of the point where it appears, and it is a circle with a 10-pixel diameter. The location of the avatar can be changed by calling its move method.

import java.awt.Graphics;

public class Avatar {

    private int x;
    private int y;

    public Avatar(int x, int y) {
        this.x = x;
        this.y = y;
    }

    public int getX() {
        return x;
    }

    public int getY() {
        return y;
    }

    public void move(int movingX, int movingY) {
        this.x += movingX;
        this.y += movingY;
    }

    public void draw(Graphics graphics) {
        graphics.fillOval(x, y, 10, 10);
    }
}

Let's modify our drawing board, giving it an instance of our Avatar as constructor parameter. The method paintComponent of DrawingBoard does not draw the character itself, but it delegates the responsibility to the instance of the class Avatar.

import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JPanel;

public class DrawingBoard extends JPanel {

    private Avatar avatar;

    public DrawingBoard(Avatar avatar) {
        super.setBackground(Color.WHITE);
        this.avatar = avatar;
    }

    @Override
    protected void paintComponent(Graphics graphics) {
        super.paintComponent(graphics);
        avatar.draw(graphics);
    }
}

Let's also give our avatar as parameter to our user interface. Avatar is an independent object in the user interface, and we only want to draw it in the user interface. It is essential to change our UI constructor so that it received a Avatar object. Moreover, in the method createComponents we give an instance of the class Avatar as parameter to our DrawingBoard object.

public class UserInterface implements Runnable {

    private JFrame frame;
    private Avatar avatar;

    public UserInterface(Avatar avatar) {
        this.avatar = avatar;
    }

// ...

    private void createComponents(Container container) {
        DrawingBoard drawingBoard = new DrawingBoard(avatar);
        container.add(drawingBoard);
    }
// ...

Now, our user interface can be started giving it an Avatar object as constructor parameter.

        UserInterface ui = new UserInterface(new Avatar(30, 30));
        SwingUtilities.invokeLater(ui);

In the user interface above, we see a ball-like Avatar.

Let's now add the functionality to move the avatar. We want to move it using our keyboard. When the user presses the left arrow, the avatar should move left. Pressing the right arrow should move the avatar right. We need an action event listener, which would listen to our keyboard. The interface KeyListener defines the functionality needed to listener to a keyboard.

The interface KeyListener calls for implementing the methods keyPressed, keyReleased, and keyTyped. We are only interested to the case in which the keyboard is pressed, so we can leave empty the methods keyReleased and keyTyped. Let's create the class KeyboardListener, which implements the interface KeyListener. The class receives as parameter a Avatar object, and the action event manager has to shift it.

import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

public class KeyboardListener implements KeyListener {

    private Avatar avatar;

    public KeyboardListener(Avatar avatar) {
        this.avatar = avatar;
    }

    @Override
    public void keyPressed(KeyEvent e) {
        if (e.getKeyCode() == KeyEvent.VK_LEFT) {
            avatar.move(-5, 0);
        } else if (e.getKeyCode() == KeyEvent.VK_RIGHT) {
            avatar.move(5, 0);
        }
    }

    @Override
    public void keyReleased(KeyEvent e) {
    }

    @Override
    public void keyTyped(KeyEvent ke) {
    }
}

The method keyPressed receives as parameter an instance of KeyEvent from the user interface. The KeyEvent object knows the number related to the pressed key thanks to its method getKeycode(). Different keys have got different class variables in the KeyEvent class; for instance, the left arrow is KeyEvent.VK_LEFT.

We want to listen to the keystrokes directed to our user interface (we don't want to write to the text field, for instance), and therefore we assign our keyboard listener to the JFrame instance. Let's modify our user interface and add the keyboard listener to the JFrame object.

    private void createComponents(Container container) {
        DrawingBoard drawingBoard = new DrawingBoard(avatar);
        container.add(drawingBoard);

        frame.addKeyListener(new KeyboardListener(avatar));
    }

Our application now listens to keystrokes, and it leads them to the instance of the class KeyboardListener.

However, when we try out our user interface it does not work: the avatar does not move on the screen. What is the problem, in fact? We can check the keystrokes which are received by our KeyboardListener by adding a text printout to the beginning of our keyPressed method.

    @Override
    public void keyPressed(KeyEvent e) {
        System.out.println("Keystroke " + e.getKeyCode() +  " pressed.");

        // ...

If we start our program and press some keys we will notice the following output.

Keystroke 39 pressed.
Keystroke 37 pressed.
Keystroke 40 pressed.
Keystroke 38 pressed.

In fact, our keyboard listener works, but our drawing board does not update.

Drawing Board Repainting

User interface components usually have the functionality to repaint the component outer face, when needed. For instance, when we press the button, the instance of the class JButton is able to paint the button as if it was pressed, and to paint it normal again afterwards. The drawing board we have implemented does not have a pre-made update functionality; instead, we have to ask our drawing board to paint itself again when needed.

Each subclass of Component has the method public void repaint(), which repaints the component after it is called. We want that our DrawingBoard object would get repainted while the avatar moves. The avatar moves in the class KeyboardListener, and it is logic the repainting would happen there, too.

In order to be repainted, our keyboard listener needs a drawing board reference. Let's modify our class KeyboardListener, so that it would receive as parameter both an Avatar object and the Component object to repaint. We call the repaint method of the Component object after each keyPressed action event.

import java.awt.Component;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

public class KeyboardListener implements KeyListener {

    private Component component;
    private Avatar avatar;

    public KeyboardListener(Avatar avatar, Component component) {
        this.avatar = avatar;
        this.component = component;
    }

    @Override
    public void keyPressed(KeyEvent e) {
        if (e.getKeyCode() == KeyEvent.VK_LEFT) {
            avatar.move(-5, 0);
        } else if (e.getKeyCode() == KeyEvent.VK_RIGHT) {
            avatar.move(5, 0);
        }

        component.repaint();
    }

    @Override
    public void keyReleased(KeyEvent e) {
    }

    @Override
    public void keyTyped(KeyEvent ke) {
    }
}

Let's also modify the createComponents method of UserInterface and give an instance of DrawingBoard as parameter to our keyboard listener.

    private void createComponents(Container container) {
        DrawingBoard drawingBoard = new DrawingBoard(hahmo);
        container.add(drawingBoard);

        frame.addKeyListener(new KeyboardListener(avatar, drawingBoard));
    }

Now, our avatar's moves are visible also in the user interface. Whenever the user presses the keyboard, the user interface keyboard listener handles the call. At the end of each call, the repaint method of our drawing board is called, and the drawing board gets repainted.

        UserInterface ui = new UserInterface(new Circle(50, 50, 250));
        SwingUtilities.invokeLater(ui);

        UserInterface ui = new UserInterface(new Square(50, 50, 250));
        SwingUtilities.invokeLater(ui);

        UserInterface ui = new UserInterface(new Box(50, 50, 100, 300));
        SwingUtilities.invokeLater(ui);

        CompoundFigure truck = new CompoundFigure();

        truck.add(new Box(220, 110, 75, 100));
        truck.add(new Box(80, 120, 200, 100));
        truck.add(new Circle(100, 200, 50));
        truck.add(new Circle(220, 200, 50));

        UserInterface ui = new UserInterface(truck);
        SwingUtilities.invokeLater(ui);

Pre-made Application Frameworks

An application framework is a program which provides a baseline and a set of features to implement a particular application. One way to create an application framework is to create a class which provides pre-made features, so that classes can inherit it and build a particular application. Application frameworks are usually wide, and they are thought for a special purpose, for instance to program games or develop web-applications. Let's quickly get acquainted with a pre-made application library, by greating the application logic of a Game of Life.

import gameoflife.GameOfLifeBoard;

public class PersonalBoard extends GameOfLifeBoard {

    public PersonalBoard(int width, int height) {
        super(width, height);
    }

    // ..

boolean[][] values = new boolean[10][10];
System.out.println(values[3][1]);

boolean[][] board = getBoard();
System.out.println(board[x][y]);

boolean[][] board = getBoard();
board[x][y] = true;

getBoard()[x][y] = true;

package game;

public class Main {
    public static void main(String[] args) {
        PersonalBoard board = new PersonalBoard(7, 5);

        board.turnToLiving(2, 0);
        board.turnToLiving(4, 0);

        board.turnToLiving(3, 3);
        board.turnToLiving(3, 3);

        board.turnToLiving(0, 2);
        board.turnToLiving(1, 3);
        board.turnToLiving(2, 3);
        board.turnToLiving(3, 3);
        board.turnToLiving(4, 3);
        board.turnToLiving(5, 3);
        board.turnToLiving(6, 2);

        GameOfLifeTester tester = new GameOfLifeTester(board);
        tester.play();
    }
}

Press enter to continue, otherwise quit: <enter>

  X X

X     X
 XXXXX

Press enter to continue, otherwise quit: stop
Thanks!

        PersonalBoard board = new PersonalBoard(3, 3);
        board.initiateRandomCells(1.0);

        GameOfLifeTester tester = new GameOfLifeTester(board);
        tester.play();

Press enter to continue, otherwise quit: <enter>

XXX
XXX
XXX
Press enter to continue, otherwise quit: stop
Thanks!

PersonalBoard board = new PersonalBoard(7, 5);

board.turnToLiving(0, 1);
board.turnToLiving(1, 0);
board.turnToLiving(1, 2);
board.turnToLiving(2, 2);
board.turnToLiving(2, 1);

System.out.println("Neighbours alive (0,0): " + board.getNumberOfLivingNeighbours(0, 0));
System.out.println("Neighbours alive (1,1): " + board.getNumberOfLivingNeighbours(1, 1));

Neighbours alive (0,0): 2
Neighbours alive (1,1): 5

package game;

import gameoflife.Simulator;

public class Main {

    public static void main(String[] args) {
        PersonalBoard board = new PersonalBoard(100, 100);
        board.initiateRandomCells(0.7);

        Simulator simulator = new Simulator(board);
        simulator.simulate();
    }
}