CIS 160 - GUI Notes I

• Use JOptionPane for input and output
• Create and use a JFrame
• Set layout managers
• Create Java Swing components
• Add components to Swing containers

GUIs seem difficult. Why?

Because they are difficult compared to using the command line. It is the nature of the beast. They could be made simpler by either using tools that do all the nasty bits for you, or by giving up much of the power available. For example, you can use JOptionPane to do your input and output. That simplifies things greatly, but also limits what your GUI looks like quite a bit.

Do programmers really create all the complex GUIs we see using these techniques?

Of course not. They get paid too much to spend all their time mucking about with GUI creation details. Developers of complex applications use tools that allow them to draw the GUI and they let the tool create the underlying code.

So why are we learning the details? Why don't we just use one of those tools?

Actually, that's a great question. I'm glad I asked it. Even developers that use the nice GUI design tools still have to know how the GUI is operating underneath and often have to tweak and/or debug the generated code. This means that they still have to know the details that we will be covering. If we have time available after covering all the other topics in the course, we could try out one of the free tools for GUI development. You probably installed one when you installed Java on your machine at the beginning of the semester.

How do you ever find the time to create all these great class lecture notes? I really find them useful.

Whenever I've been at the computer for hours and hours and grow weary while typing up these notes, I try to remember just how much you really love Java deep down inside and it gives me a renewed vigor. It's your burning desire for knowledge that keeps me going.

• import java.awt.*;
• import javax.swing.*;
• import java.awt.event.*;

• simple way to do basic GUI I/O (input and output)
• Need: import javax.swing.JOptionPane;
• input: JOptionPane.showInputDialog(String prompt)
• for input, a String is returned; you'll have to use one of the wrapper class parsing methods (such as Integer.parseInt) to turn the String into a number
• output: JOptionPane.showMessageDialog(null, String msg, String title, int type)
  • The first field will always be null in this class
  • msg is what will be displayed to the user by this JOptionPane
  • title is what will appear in the title bar of this JOptionPane
  • type determines what the dialog box default formatting will look like
    • JOptionPane.ERROR_MESSAGE
    • JOptionPane.INFORMATION_MESSAGE
    • JOptionPane.WARNING_MESSAGE
    • JOptionPane.QUESTION_MESSAGE
    • JOptionPane.PLAIN_MESSAGE
• There are many other variations and details for the methods listed above, but they are left out here to simplify this topic a bit

You need the following:

• somewhere to put your GUI components; in this class it will be either a JFrame, a JApplet, or a JPanel
• GUI components, which will be called widgets in this class; this includes JButton, JLabel, and JTextField
• a way of telling Java how the GUI components should be arranged; this is done using a layout manager; we will be using three of them: GridLayout, BorderLayout, and FlowLayout
• a way of interacting with the components (and therefore the user); this is done using event handlers

• import javax.swing.JFrame;
• A JFrame is basically what you think of as a Window, a rectangular area with a title bar, close button, minimize button, maximize button, and an area for content
• Two common ways of creating and using a JFrame are:
  • Make your class a JFrame by extending JFrame and then creating an object based on your class import javax.swing.*; public class MyApp extends JFrame { public static void main(String[] args) { MyApp app = new MyApp(); } public MyApp() { SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGUI(); } }); } private void createAndShowGUI() { setTitle("My Custom Title"); setSize(400, 500); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } }
  • Create a JFrame directly: import javax.swing.*; public class MyApp { public static void main(String[] args) { JFrame fra = new JFrame("My Custom Title"); fra.setSize(400, 500); fra.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fra.setVisible(true); } }
• Commonly used JFrame methods
  • setSize(int width, int height)
  • setTitle(String title)
  • setVisible(boolean visible)
  • setDefaultCloseOperation(int closeOperation)
  • addWindowListener(WindowListener listener)
• A WindowListener lets you write custom code for seven different window events such as minimizing and resizing the window. The most common one to use is for closing the window, and that's covered by the setDefaultCloseOperation method.

• JLabel: JLabel lbl = new JLabel("Gross pay:");
• JButton: JButton btnExit = new JButton("Exit");
• JTextField: JTextField txt = new JTextField("default text string");

• BorderLayout: creates five areas for components (north, east, south, west, and center)
• FlowLayout: adds components one after another, left to right, starting at the top of the container, and then going down a row when a row is filled; all rows have the components centered when finished
• GridLayout: adds components one row at a time; the constructor defines the number of rows and columns; all columns are the same width; all rows are the same height
• creating a new layout manager: BorderLayout layout = new BorderLayout();

• You add components to a Container. In a JFrame you have to get a reference to its ContentPane and add the components to that. You can add components directly to a JPanel.
• Creating and adding a JButton to a JFrame: JFrame fra = new JFrame(); Container c = fra.getContentPane(); c.setLayout(new BorderLayout()); JButton btn = new JButton("My Button"); c.add(btn, BorderLayout.SOUTH);
• Creating and adding a JButton to a JPanel: JPanel pnl = new JPanel(); pnl.setLayout(new BorderLayout()); JButton btn = new JButton("My Button"); c.add(btn, BorderLayout.SOUTH);

• David J. Eck: Introduction to GUI Programming