GUI Tutorial 1

A Bit of Philosophy on what to Teach There are numerous libraries, frameworks,

options Modern GUIs are often developed using XML

(e.g., Android, XAML, etc.) My goals for 306:

Understand event-driven programming in general Work with one object-oriented GUI library (Swing) Feel confident you can learn other toolkits as

needed Cover only the basics (e.g., there are many layout

managers, but I’ll only cover a couple)

Topics in GUI Tutorial 1 Event-driven programming Layout managers Text fields and labels Responding to buttons Simple dialogs

confirmation message simple input

JPanel Borders CheckBox and ComboBox

Event Programming GUIs are under control of the user, not the

program. This type of programming is referred to as event-driven.

Java programs react to a wide variety of user interface events – button pushes, mouse clicks, window manipulation, etc.

Program installs event listeners for events of interest

Need to know the event source – e.g., button, text box, window etc.

All listeners implement the particular interface for that type of event (e.g., button listeners must implement ActionListener)

FirstGUI

Covers JFrame, BorderLayout, JTextField, JLabel, JButton, ActionListeners

Basic Strategy – very simple GUI1. Create a JFrame (or JApplet) as the top-level

container. Normally only 1 JFrame per application.2. Define the components as instance variables (or

possibly local variables)3. In the constructor, allocate space for the

components, add them to the JFrame (may call helper methods)

4. Main is usually very short:1. call the constructor2. set visible true.

No events yet…

Create a JFramepublic class FirstGUI extends JFrame{

public static void main(String[] args) {FirstGUI gui = new FirstGUI();gui.setVisible(true);

}

}

GUI displays… barely!

Use the constructor to configure itpublic FirstGUI(){ // EXIT_ON_CLOSE is static intsetDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setTitle("My First GUI"); setSize(300, 100);} set functions are defined because FirstGUI is-a JFrame

What’s a layout? A layout manager determines how

components will be arranged (order and size) Layout managers enable programs to be more

portable The default layout manager for a JFrame is

BorderLayout The default layout manager for a JPanel

(covered soon) is FlowLayout Controlling the layout is not an important

topic for this class. Suggested reading:http://www.developer.com/java/ent/article.php/630651/Swing-from-A-to-Z-Minimum-Maximum-and-Preferred-Sizes.htm

BorderLayoutIn a BorderLayout, outer components (N/S/E/W) are

sized to their natural size, if possible. Any extra space is given to CENTER.

NORTH

SOUTH

CENTER EASTWEST

Now let’s add components JTextField – used to accept information, single line Our JTextField will be an instance variable –

because we want to access it from other methods later.

Our JLabel field will be local – only set up and add to GUI, don’t need to access or modify later

public class FirstGUI extends JFrame { private JTextField myName; private void createLayout() { JLabel nameLabel = new JLabel("Name");myName = new JTextField(20);add(nameLabel, BorderLayout.NORTH);add(myName, BorderLayout.CENTER);

}

call createLayout from ctor

only add 1 component/area

Basic Strategy – simple GUI w Events1. Create a JFrame (or JApplet) as the top-level

container. Normally only one JFrame per application.2. Define the components as instance variables (or

possibly local variables)3. In the constructor or an initialization function,

allocate space for the components, add them to the JFrame, do other JFrame set up (set default close operation, set size, etc.)

4. Write an event listener (can be anonymous or inner class)

5. Attach the event listener to the component6. In main, call the constructor, set visible true. Main

is usually very short.

Add a Button In createLayout, define a button, allocate

space, add to JFrameJButton nameButton = new JButton("OK");add(nameButton, BorderLayout.SOUTH);

It displays… but no action yet

Why is it OK for nameButton to be a local variable?

Create a listener A class that responds to events must

implement an interface named ActionListener Remember that an interface:

Specifies methods that must be defined Provides method signature (name, parameters) Interface does not provide a method body – like

pure virtual in C++. Method must be defined by implementing class.

By using an interface, Java knows what method to call Event

Listener

JButton

actionPerformed

Note on packages Just importing java.awt.* does not provide access to

java.awt.event.ActionEvent. You can think of it as a directory structure that doesn’t automatically include subdirectories. (that’s not really what happens…)

import java.awt.event.*;

Simple action listener class There are several syntax options for where the listener is defined. We’ll define an inner class.

This should be in your source file, between public ClassName and the final }.

For now, put it just above your main method. You can give the class any name, but it must implement

ActionListener and you must have a method definition for actionPerformed.

private class ButtonListener implements ActionListener{

public void actionPerformed(ActionEvent e){System.out.println("Button pressed");}

}COMMON ERRORS: misspelling actionPerformed, notmaking it public, not having ActionEvent as a parameter.

Run it now… still nothing happens!

Add the listener to a button Press the button…. nothing happens yet!

Need to “attach” the listener to the buton. Add the action listener to it (inside createLayout()).nameButton.addActionListener(new ButtonListener());

But system.out.println is not very exciting

JOptionPaneJOptionPane provides 3 quick options for

dialogs: Simple input Simple message Confirmation

Modifying the action listener We can access the value of the JTextField

because it’s an instance variable and our listener is an inner class

Put these lines in actionPerformed:String message = "Hello " + myName.getText();JOptionPane.showMessageDialog(null, message);

More JOptionPane optionsString numStr = JOptionPane.showInputDialog("Enter your age");int num = Integer.parseInt(numStr);int yearsLeft = 100 - num;JOptionPane.showMessageDialog(null, "You have " + yearsLeft + " years left");

NOTE: This example is just to show all JOptionPane options – for most applications you would probably add an age field to the JFrame.

Final JOptionPane example showConfirmDialog returns an enumerated type int ready = JOptionPane.showConfirmDialog(null, "Are you ready to continue?");

if (ready == JOptionPane.YES_OPTION)JOptionPane.showMessageDialog(null, "Here we go!");

elseJOptionPane.showMessageDialog(null, "OK, we'll wait");

JPanel JPanel is a container to hold other components A JPanel may be in its own class, or may be a

variable inside another class Which is best? Depends….

FlowLayout// default layout is flowJPanel panel = new JPanel();panel.add(component);

Items displayed in order added Fills horizontally, move to next line when not enough space for next field.

FIELD-1

FIELD-3

FLD-4

FIELD-2

FLD-5 FLD-6

Using a JPanel with FirstGUIprivate void createLayout() {

JLabel nameLabel = new JLabel("Name");myName = new JTextField(20);// Create a JPanelJPanel panel = new JPanel();// Add elements to the panelpanel.add(nameLabel);panel.add(myName);// Add the panel to the layoutadd(panel, BorderLayout.CENTER);JButton nameButton = new JButton("OK");add(nameButton, BorderLayout.SOUTH);nameButton.addActionListener(

new ButtonListener());}

CarpoolGUI

JPanel, FlowLayout, GridLayout, JComboBox, CheckBox, RadioButton, Font

Quick Intro: Panel Communication

CarpoolGUI Used to sign up for carpooling Will show lots of GUI components Creates a more complex layout using panels We’ll start today, finish next time

NOTE: Clue layout will probably not need so many separate JPanel classes

Panel Communication

Main panel

Control Panel

This is just a special case of message passing – common OO technique

GridLayoutJPanel buttonPanel = new JPanel();buttonPanel.setLayout(new GridLayout(4, 3));buttonPanel.add(button7);buttonPanel.add(button8); …

7 8 9

4 5 6

1 2 3

0 . CE

can set 1 of these to 0, will expand as needed

Nesting PanelsJPanel keypadPanel = new JPanel();keypadPanel.setLayout(new BorderLayout());JPanel buttonPanel = new JPanel();buttonPanel.setLayout(new GridLayout(4, 3));buttonPanel.add(button7);buttonPanel.add(button8); …keypadPanel.add(buttonPanel, BorderLayout.CENTER);JTextField display = new JTextField();keypadPanel.add(display, BorderLayout.NORTH);

7 8 94 5 61 2 30 . CE

Get started: normal items in JFramepublic class CarpoolGUI extends JFrame {

public CarpoolGUI() { setSize(new Dimension(400, 250)); setTitle("Let's carpool"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);}public static void main(String[] args) { CarpoolGUI gui = new CarpoolGUI(); gui.setVisible(true);}

}

Create panel with combo boxespublic class ToFromPanel extends JPanel { // JComboBox<String> requires Java 1.7 or higher

private JComboBox<String> toCity, fromCity;public ToFromPanel(){ toCity = createCityCombo(); fromCity = createCityCombo(); }private JComboBox<String> createCityCombo(){ JComboBox<String> combo = new JComboBox<String>(); combo.addItem("Golden"); combo.addItem("Boulder"); combo.addItem("Denver"); return combo;}

}

Don’t Repeat Yourself (DRY)We create a createCityCombo method to avoid repeating code.

Continue combo panel Add to ToFromPanel constructor:

JLabel fromLabel = new JLabel("From");JLabel toLabel = new JLabel("To");setLayout(new GridLayout(0, 2));add(fromLabel);add(toLabel);add(fromCity);add(toCity);

Add to CarpoolGUI constructor:ToFromPanel tfPanel = new ToFromPanel();add(tfPanel, BorderLayout.CENTER);

Create panel with radio buttonspublic class PreferencePanel extends JPanel {private JRadioButton smokeButton, noSmokeButton;public PreferencePanel(){// Create the buttons

smokeButton = new JRadioButton("Smokes"); noSmokeButton = new JRadioButton("No smoke"); // Set no smoke as the default noSmokeButton.setSelected(true); // Add the buttons to the panel add(smokeButton); add(noSmokeButton); }}

Add the panel to the JFrame In the JFrame constructor:PreferencePanel pPanel = new PreferencePanel();add(pPanel, BorderLayout.EAST);

But it’s possible to click both! Need a RadioGroup

Update Preference panelButtonGroup group = new ButtonGroup();group.add(smokeButton);group.add(noSmokeButton);setBorder(new TitledBorder (new EtchedBorder(), "Preferences"));

OK, but let’s get items in a column

We’ll use GridLayoutsetLayout(new GridLayout(2, 1));

Add a border Add to the ToFromPanel constructorsetBorder(new TitledBorder (new EtchedBorder(), "Location"));

CheckBox and Fontpublic class WillDrivePanel extends JPanel {private JTextField name;private JCheckBox willDriveCB;

public WillDrivePanel(){ JLabel label = new JLabel("Name"); name = new JTextField(20); name.setFont(new Font("SansSerif", Font.BOLD, 12)); add(label); add(name);}

} add to JFrame, of course (NORTH)

Add to JFrameWillDrivePanel wdPanel = new WillDrivePanel();

add(wdPanel, BorderLayout.NORTH);

Now the check boxwillDriveCB = new JCheckBox("Will drive");add(willDriveCB);