GUI – Programming with Java

JFRAME

Creating Windows

• Windows

– javax.swing.JFrame – Empty window

• By default, JFrame is not visible

– setVisible(true)!

• Java Look And Feel (Metal) by default

Creating JFrame

import javax.swing.JFrame;

class Testing {

public static void main(String [] args) {

JFrame mywin = new JFrame();

mywin.setVisible(true);

}

}

Inheritance

import javax.swing.JFrame;

class MyJFrame extends JFrame {

public MyJFrame() {

setTitle("My Window!");

}

}

class Testing {

public static void main(String [] args) {

MyJFrame mywin = new MyJFrame();

mywin.setVisible(true);

}

}

GUI

AWT vs. Swing

• AWT = Abstract Window Toolkit– java.awt.*;

– Old class library for Java

– Uses native GUI - components

• Swing– javax.swing.*;

– From Java 1.2 ->

– Extends AWT

– GUI – components 100% Java

– Pluggable look and feel

Layouts

• UI is build on top of layouts• Layout determinates where UI-elements are

layed.• You can add a layout to Jframe• Layouts

– FlowLayout– GridLayout– BorderLayout– GridBagLAyout– CardLayout

Layout and Components

import javax.swing.*;

import java.awt.*;

class MyJFrame extends JFrame {

public MyJFrame() {

setTitle("My Window!");

JButton clickMe = new JButton("Click me!");

FlowLayout layout = new FlowLayout();

setLayout(layout);

add(clickMe);

}

}

class Testing {

public static void main(String [] args) {

MyJFrame mywin = new MyJFrame();

mywin.setVisible(true);

}

}

FlowLayout

GridLayout

BorderLayout

• Five cells

– north

– south

– east

– west

– center

Other layouts

BoxLayout- Components in row or column

CardLayout-Window holds "cards", which can hold other components

GridBagLayout- Lot of possibilities, hard to use

JPanel

• It's possible to combine layouts using JPanel

• JPanel can have it's own layout. JPanel may hold other components

• JFrame can hold JPanels, that hold components..

Combining LayoutsJPanel left = new JPanel();

left.setLayout(new GridLayout(2,1));

JPanel right = new JPanel();

right.setLayout(new GridLayout(3,1));

left right

MyJFrame

setLayout(new Gridlayout(1,2));

add(left);

add(right);

Combining Layouts

public MyJFrame(){

setLayout(new GridLayout(1,2));

JPanel left = new JPanel();

left.setLayout(new GridLayout(2,1));

left.add(new JButton("1"));

left.add(new JButton("2"));

JPanel right = new JPanel();

right.setLayout(new GridLayout(3,1));

right.add(new JButton("3"));

right.add(new JButton("4"));

right.add(new JButton("5"));

add(left);

add(right);

}

COMPONENTS

Components

• UI – components can be added to window (JFrame) using the add() – method

• All components derive from JComponent• UI – components?

– JButton– JLabel– JMenuItem– JTable– JTextArea– JTextField...

JComponent

• Some component's common methods

– setVisible(boolean)

– setFont(Font)

– setEnabled(boolean)

– ... See JComponent API

• http://java.sun.com/javase/6/docs/api/javax/swing/JComponent.html

Components

• JButton

– JButton mybutton = new JButton("Click!");

• JLabel

– JLabel mylabel = new JLabel("Some text");

• JTextField

– JTextField myfield = new JTextField();

– String text = myfield.getText();

• JTextArea...

EVENT HANDLING

Delegation Event Handling

• Delegation Event Model:– Simple and easy to learn

– Support a clean separation between application and GUI code

– Facilitate the creation of robust event handling code which is less error-prone (strong compile-time checking)

– Flexible enough to enable varied application models for event flow and propagation

– For visual tool builders, enable run-time discovery of both events that a component generates as well as the events it may observe

– Support backward binary compatibility with the old model

Separation of GUI and BL

Source ListenerRegistration

Concepts: Event Source

• Event source is usually some component that can raise events

• Examples of event source

– JButton (button is clicked)

– JMenuItem

– JTextField

Listener

• Any class that can handle the events

• => Any class that implements some interface

Separation of GUI and BL

Source ListenerRegistration

Recap on Polymorphism

interface AbleToMove {

public void start();

public void stop();

}

class Car implements AbleToMove {

public void start() {

// do something

}

public void stop() {

// do something

}

}

Recap on Polymorphism

class Test {

public static void main(String [] args) {

Airplane a = new Airplane();

someMethod(a);

}

public static void someMethod(AbleToMove x) {

x.start();

}

} You can pass whateverobject you desire as long asthe object implements AbleToMoveinterface!

Example

• JButton is a event source.

– JButton source = new JButton();

• When the button is clicked we want that something happens

• We need a class that listens to the button.

• We register the source and the listener with each other!

Separation of GUI and BL

JButton ListenerRegistration

Registration

• JButton holds a method addActionListener– public void addActionListener(ActionListener l)

• So you can call it like– JButton source = new JButton("Click!");

– source.addActionListener(...);

• Parameter ActionListener? What is it?

• It's an interface!

• This means that you can pass whatever object as long as the object implements the interface!

ActionListener

• So the listener can be what ever object as long as it implements the ActionListener.

• ActionListener:interface ActionListener {

public void actionPerformed(ActionEvent e);

}

Listener

• Some class that implements the ActionListener

class MyListener implements ActionListener {

public void actionPerformed(ActionEvent e) {

// do something

}

}

Separation of GUI and BL

JButton MyListeneraddActionListener

ActionListener

Example Usage

// Create the source

JButton button = new JButton("click me");

// Create the listener

MyListener listener = new MyListener();

// Registration

button.addActionListener(listener);

Registration

• Different sources have different methods and interfaces for the registration.

• Registration:

– addXXXListener

• Examples

– addMouseMotionListener(...)

– addMouseListener(...)

– addKeyListener(...)

Example: Listening to Mouse in Window

• // Source

• JFrame a = new JFrame();

• // Listener

• SomeClass listener = new SomeClass();

• // Registration

• a.addMouseMotionListener(listener);

BL and GUI in the same class

• In small programs it is usual that the GUI - and the application code is implemented in the same class.

• No the listener is the same class:

– class MyJFrame extends JFrame implements

ActionListener

• And registration:

– source.addActionListener(this);

MENUS

MenuBar

• JFrame can contain MenuBar

• Needed classes

– JMenuBar

– JMenu

– JMenuItem

• Event handling the same as in JButton (addActionListener)

Creating MenuBar

edit.add(pref);

menubar.add(edit);

setJMenuBar(menubar);

JMenuBar menubar = new JMenuBar();

JMenu edit = new JMenu("Edit");

JMenuItem pref = new JMenu("Preferen..

DIALOGS

About Dialogs

• JFrame is used for windows, JDialog for dialogs.

– You can inherit the JDialog.

• Every dialog needs to know who the host window is

– dialog belongs to the window

Standard Dialogs

• Really easy way to create dialogs is use standard dialogs

• JOptionPane

• JFileChooser

• JColorChooser

• ...

JOptionPane

• With one line of code, you can pop up a dialog

– JOptionPane.showMessageDialog(hostframe, "Hello!");

• Also available

– showConfirmDialog

• yes/no/cancel

– showInputDialog

• prompt user

JFileChooser

JFileChooser chooser = new JFileChooser();

int returnVal = chooser.showOpenDialog(parent);

if(returnVal == JFileChooser.APPROVE_OPTION)

String file =

chooser.getSelectedFile().getName();