Graphical User Interfaces - Stage 2

Now that we have covered the basics of creating a window frame and putting single component in it. This demo will add a text field in which the name of the MIDI file can be typed. This will allow you to create several versions of the class output in the one launch of the program, then compare the results afterward.

A reminder that this GUI code makes use of the AWT libraries in Java 1.1 and beyond. Make sure you have an appropriate Java version.

The two components (Text field and button) will be placed on an AWT Panel

This basic GUI simply creates a window with a button in it. When the button is clicked the music is computed and saved as both a MIDI and jMusic files.

Click here to view source ..

The GUI will look similar to this.

Let's have a closer look.

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

Import the AWT and jm packages that are required.

public class SimpleGUI2 extends Frame implements ActionListener, JMC{
	// Attributes shared within the class
	private TextField fileNameBox;
	private Button composeBtn;
 
	// simple main method called when the class in run
	public static void main(String[] args) {
		new SimpleGUI2();
	}

The class declaration extends the Frame class AND implements the ActionListener. The ActionListener interface helps us 'hear' and handle the users actions, such as clicking on the buttons.

The main() method simply calls the constructor method. This structure enables us to run the program or to call it from another.

	// constructor
	public SimpleGUI2() {
		//give the window a name
		super("Simple GUI 2");
 
		//create a panel to put objects on 
		Panel p = new Panel();
		
		//add the text field
		fileNameBox = new TextField("Simple_GUI2.mid",24);
		p.add(fileNameBox);
		
		//add the button
		composeBtn = new Button("Compose");
		composeBtn.addActionListener(this);
		p.add(composeBtn);
		
		//put the panel in the frame
		this.add(p);
		
		//display the window
		this.pack();							
		this.show();
	}

The constructor method here is similar to the SimpleGUI_1 application but adds features to create and use a Panel. A panel is a java AWT object designed to 'intelligently' hold other components such as buttons.

In this code segment an new panel called 'p' is declared. As the TextField and Button are created they are added to the Panel.

Notice that the TextField does not need to be registered with the actionListener, we are not concerned at what time the text is changed, the code grabs the text from the textField when it requires it. It can be changed at any time.

The panel, which now contains a TextField and a Button is added to the Frame.

	public void actionPerformed(ActionEvent ae){
		if (ae.getSource() == composeBtn) {
			String fn = fileNameBox.getText();
				if (fn != null) {
					makeMusic(fn);
				} else makeMusic("SimpleGUI_2.mid");
		}
	}

When the button is clicked this actionPerformed() method is invoked. After checking that the button is the correct one, the text from the TextField is retrieved into the variable 'fn'. Then makeMusic() method is called and passed the string 'fn' which is used by makeMusic() as the MIDI file name.

	public void makeMusic(String fileName) {
		//.... code to create a jMusic score
 
		//write a MIDI file to disk
		Write.midi(score, fileName);

The details of the makeMusic() method are not included here (see the source code), but suffice to say a jMusic score is created and saved as a MIDI file each time the 'Compose' button is clicked. Notice that the fileName argument in the method is passed to the writeMIDI method as the SMF filename.

 

jMusic Tutorial Index