JM-550 Drum Machine: Simple AWT GUI

This series of classes introduces a simple, but extendible, drum machine program. There are a series of jm-550 tutorials (influenced by the drum patterns of the Boss DR-550 drum machine) which show the development of a Java graphical user interface for a jMusic application. The first tutorial looked at the application without any GUI code, in this tutorial some simple start and stop buttons are displayed in a window frame, then in the next tutorial sliders are added to control tempo and volume, then a list of drum patterns is added. So here goes...

This tutorial introduces the AWT (Abstract Windowing Toolkit) classes. One of the strengths of Java programming is its platform independence. The awt classes allow you to specify a graphical user interface with windows, buttons, sliders, and so on and each of the Java implementaions takes care of applying those to the host platform. This means that GUIs written in awt take on the appearance of Microsoft Windows components when run under Windows, and on a Mac look like a native Mac application, and so on.

Here is the GUI generated by this program on a Mac:

There are two other classes required for this tutorial, the Basic_550 and EightBeat1 classes (download and compile if you don't already have them from the previous tutorial).

This tutorial concerns the class JM_550b.

Click here to view the source.

Lets have a closer look.

import jm.JMC;
import jm.music.data.*;
import jm.music.tools.*;
import jm.util.*;
import java.awt.*;
import java.awt.event.*;

In order to use the awt classes we need to import two packages- java.awt.*; and java.awt.event.*; The awt package has the classes for windows buttons and so on, and the awt.event package has classes for handling mouse clicks on the buttons, movement of the sliders, and so on.

public class JM550b extends Frame implements JMC, ActionListener {
    private static Button start, stop;
    
    public static void main(String[] args) {
        new JM550b();
        // pattern
        EightBeat1 pat = new EightBeat1();
        // play
        pat.playback();
    }

In the class declaration there are two important things to notice regarding the awt GUI. Firstly, the class extends the Frame class (java.awt.Frame) which allows this class to be a window. Secondly, it implements the ActionListener (java.awt.event.ActionListener) to capture and handle user interaction with the GUI.

After declaring the class two class variables are declared - two buttons which will be used to start and stop playback.

The main() method calls the constructor which draws the GUI (more about that below), then creates an instance of the EightBeat1 class which creates a drum pattern, and thridly the playback() method (which EightBeat1 inherited from Basic_550) is invoked, which does the obvious thing - hopefully starts playing the drum pattern over and over!

    public JM550b() {
        super("JM-550 Drum Machine");
        
        // create transport panel
        Panel transport = new Panel();
        
        start = new Button("Start");
        start.addActionListener(this);
        transport.add(start);
        
        stop = new Button("Stop");
        stop.addActionListener(this);
        transport.add(stop);
        
        this.add(transport);
      
        this.pack();
        this.setVisible(true);
    }

In the constructor all the GUI setup work is done.

super("JM-550 Drum Machine"); is a call to run the constructor of the Frame class, which is the super class of JM_550b because it extends it. It creates a framed window with the title "JM-550 Drum Machine".

A Panel is an awt class than is a blank area on which other componenrts can be put. A Panel instance called transport is created.

Two button objects are created. One is given the name and title "Start" and the other the name and title "Stop". Each is registered with the ActionListener by calling the button's addActionListener() method. The argument 'this' passed to that method indicates that the actions will be dealt with by a method in THIS class, i.e. the JM_550b class. (See below). Each button instance is added to the panel.

The panel (now with its buttons) is added to the framed window with the line.

this.add(transport);

The keyword 'this' again refers to THIS class, the JM_550b class - which as you know IS an instance of Frame, because it extends the Frame class thus inherting the ability to be a window.

Finally, this frame is packed (i.e. made as small as reasonable), and made visiable to the user.

    public void actionPerformed(ActionEvent ae) {
        if (ae.getSource() == start) 
	    if (!Play.cycleIsPlaying()) pat.playback();
        if (ae.getSource() == stop) pat.stopPlayback(); 
    }
}

To deal with clicks on the start and stop button we add functionality to the actionperformed() method. This method must be used whenever we implement the ActionListener interface.

The method is called automatically each time a user clicks on a button registered to the ActionListener - which our two buttons are.

When called we check to see which button was clicked and make appropriate calls our pat (which is an instance of EightBeat1, which in turn is an extension of Basic_550).  These buttons do the obvious thing: start and stop the drum loop from playing.  Note that to avoid multiple streams of play, when the play button is clicked the Play class is checked to make sure nothing is already playing.  If nothing is playing, the the playback method will be invoked. 

We now have a simple and somewhat groovy drum machine :)

Move on to the next tutorial which adds a graphical user interface to these classes:
JM-550 Drum Machine: AWT sliders