Simple Graphical User Interface 1

This tutorial shows how to create a basic user interface in Java and have it control your jMusic score creation.

The GUI will look similar to this:

Here is the source code.

Let's have a closer look.

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

These lines import useful packages that we need to use in the program. The first import statement gets a standard Java class used for error messages. The java.awt package contains the GUI objects such as Frame. The java.awt.event packages has classes for handling user events such as detecting when a button has been clicked.

public class SimpleGUI extends Frame implements ActionListener, JMC{
	//Any class which creates a GUI will usually extend the Frame class!!	 
	
	//This variablehow many times is the button pressed? class variable         
	private int musicNumber = 0;
 	
	// declare the button as a class variable so it can         
	// be used by any method in this class         
	private Button composeBtn;
	
 	// simple main method called when the class in run         
	public static void main(String[] args) {
                  new SimpleGUI();
        }

            

The first line declares the class. because we are going to show a Graphical User interface we need to extend the Frame class. The Frame class is part of the AWT and handles lots of graphical windowing stuff for us.

This class can save multiple MIDI files of the score, so each is numbered. The musicNumber variable is used to keep track of how many MIDI files have been created. It is a field (class variables are static) so that all the methods can use it.

The main() method follows. it is very short and just calls the SimpleGUI constructor. This architecture with a constructor and main methods allows this class to be run directly - which uses the main method which runs the constructor - or called from another class - which runs the constructor directly.

        // constructor         
	public SimpleGUI() {
		//give the window a name                  
		super("A simple GUI interface for jMusic");
	       
		//add the button                  
		composeBtn = new Button("Compose");
        	composeBtn.addActionListener(this);
               	this.add(composeBtn);
	       
		//display the window                  
		this.pack();                                                  
                this.show();
        }
            

The constructor passes a window title to the Frame class. the Frame class is the 'super class' of SimpleGUI because we 'extended' the Frame class when declaring the SimpleGUI class. Handling the window and it's title is one of the things the Frame class does for us.

This class simply adds one button to the frame. This is done in these next four lines. A button is declared, and is registered with an 'actionListener' so it can deal with clicks on it (more on this below). Finally, the button is added to the frame.

The pack() statement makes all components as small as possible. The last lines in this code segment is required in order to display the frame. (Otherwise you won't see it!)

       	// Deal with the button click        
	public void actionPerformed(ActionEvent ae){
        	if (ae.getSource() == composeBtn) {
                	makeMusic();
 			//update the counter of button presses                
			musicNumber++;
                	System.out.println("The button has been pressed " 
                     			   + musicNumber + " times");
        	}
       	}
            

When the button is clicked this method is executed automatically by the actionListener. We first check that the action was generated by the appropriate button object (in case there were more than one). Then, if true, the makeMusic() method is called and the musicMaker counter is incremented.

        public void makeMusic() {
		// rest of code here....                  
		// see the source for the full music making method                  
		// it is not important to the aim of this tutorial                  
		//.....   
               
		//write a MIDI file to disk                  
		//.....         
	}
            

The makeMusic() method creates a jMusic score (that you define) and saves it as a MIDI file.