|
|
|
|
||
|
|
Graphical User Interfaces (GUI’s) |
|
||
|
|
Introduction One of the principle driving forces behind the move to object oriented programming was the development of graphical user interfaces (GUI”s and often pronounced “gooeys”). The developers of Java built a variety of classes that make it relatively easy to construct user interfaces (although you may question this “ease”). Keep in mind that to do these same tasks for Windows using C++ can often be daunting. We are going to build a relatively simple application. To build this application we will need three classes. The first will be a class that creates an object called a frame. A frame is basically a window. The JFrame class is a class within the Java awt library (Abstract Window Toolkit) and is part of the “swing” components. You will find that Swing components are preceded by a “J” and then the name of the component, e.g. JButton, JCheckBox, JFrame, JPanel, etc. The awt library also contains component classes which do not have a class name preceded by “J”. It is not a good idea to mix these two components. In our work we are going to use the Swing class components. The code below provides the main method for the application, instantiates the class that will build the frame and then sets the frame to visible. |
|
||
|
|
/* * ChangeBkgdFrame.java * A simple frame * WDS * Version 1.00 */ import CS02.ChangeBkgdFrame; public class ChangeBkgd { public static
void main(String[] args) { // Create
application frame. ChangeBkgdFrame frame = new ChangeBkgdFrame(); // Show
frame frame.setVisible(true); } }// end class |
|
||
|
|
The second class will be a class that contains the code related to a panel that contains the buttons to the frame and controlling the frame when the “X” box in the upper right hand corner of the window is clicked on by a mouse. This action allows the frame to be closed and the application to be exited. Notice that the code is largely implemented through a call to the constructor of the class. Also notice that the class extends JFrame. This means that through inheritance, all the methods of the JFrame class are now available to the ChangeBkgdFrame class. |
|
||
|
|
/** * ChangeBkgdFrame.java * A simple frame * WDS * Version 1.00 */ package CS02; import CS02.BkgdButtons; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class ChangeBkgdFrame
extends JFrame { //constructor public ChangeBkgdFrame() { setTitle("Change Background"); setSize(new
Dimension(400, 400)); //places
container in frame Container contentPane = getContentPane(); //adds panel
to container contentPane.add(new BkgdButtons
() ); // Add
window listener this.addWindowListener ( new WindowAdapter() {
public void windowClosing(WindowEvent e) { ChangeBkgdFrame.this.windowClosed(); } } ); }//end method //close window
and shut down application protected void windowClosed() { // Exit application. System.exit(0); } } |
|
||
|
|
The last class will be a class that contains a panel (JPanel is Swing component – it acts as a container to hold other components as well as surface on which you can perform graphics). Notice that again we create a class that extends the parent class JPanel. Also in this class we are going to implement ActionListener. ActionListener is an interface that contains the code that “listens” for the mouse click and then performs the specified action. In this case the specified action is changing the background color of the panel. |
|
||
|
|
/** * BkgdButtons.java * A simple panel with buttons * WDS * Version 1.00 */ package CS02; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class BkgdButtons extends
JPanel implements ActionListener { //constructor public BkgdButtons() { //instantiate
buttons JButton yellowButton = new JButton("Yellow"); JButton blueButton = new JButton("Blue"); JButton redButton = new JButton("Red"); JButton greenButton = new JButton("Green"); //add
buttons to panel add(yellowButton); add(blueButton); add(redButton); add(greenButton); //register
buttons withActionListener yellowButton.addActionListener(this); blueButton.addActionListener(this); redButton.addActionListener(this); greenButton.addActionListener(this); }//end ButtonPanel method public void actionPerformed(ActionEvent evt) { //Object
source = evt.getSource(); String
command = evt.getActionCommand(); Color color = getBackground(); if (command.equals("Yellow")) color = Color.yellow; else if (command.equals("Blue")) color = Color.blue; else if (command.equals("Red")) color = Color.red; else if (command.equals("Green")) color = Color.green; setBackground(color); repaint(); }//end actionPerformed method }//end class |
|
||
|
|
Procedure A. Experimenting with GUI’s 1. Start a new application using the above code. 2. Modify the code to test the order with which things are placed on the screen as well as what happens when objects are placed outside the window boundaries. 3. Modify the colors to see what happens. A. Using Other Components 1. Change the buttons to radio buttons if you can. Note that the interface call will change. Check your textbook for details. 2. Add some graphics elements that change as each button is pressed. |
|
||
|
|
Programming Assignment Write a program similar to the one above except that the buttons control a “smiley face”. Make one smiley face happy, one sad and one of your choice. Use the graphics components to place the face on the panel when a button is clicked. Label the buttons appropriately. There are a variety of ways that this program can be implemented any of which would be considered acceptable as long as the program uses buttons to implement the changes. Turn in a program listing your source code. Source code should use proper formatting. Also turn in a copy of your output as in previous assignments. This can be obtained by running the program and then using AltPrintScreen to copy the window of the output onto the clipboard. Then paste the contents of the clipboard into WordPad and print out the document. In addition to the source code, the output, also turn in the answer to the questions listed below. |
|
||
|
|
|
|