COMP 303SWING Tutorial

(For a GUI in Java)

Sokhom PhengMcGill UniversityJanuary 22, 2004

More info can be found on the java.sun website:http://java.sun.com/docs/books/tutorial/uiswing/index.html

Important Things to Know

• AWT vs SWING– Both are GUI tools– A lot of the SWING components are from AWT– How to differentiate them?

• All SWING components starts with ‘J’Eg. JButton, JLabel, etc.

– It’s preferable to use SWING whenever possible

• NEVER ever mix them together– Eg. JButton with Button, etc.

JFrame vs JPanel

• Both are windows of an application.• JFrame have taskbar and window border

– Can only have one frame in a window• JPanel have invisible window border

– Can have many of them in a frame– They can be part of another panel

• Your application MUST have a frame

JFrame

JPanels

How to Create a JFrameimport javax.swing.*;

public class MyFrame extends JFrame {

public MyFrame() {

super("A frame"); // frame title

Jlabel label = new Jlabel(“Hello World!”);

getContentPane().add(label);

setSize(200,200);

setVisible(true);

}

public static void main(String[] args) {

MyFrame myFrame = new MyFrame();

}

}

How to Create a JPanel

class MyPanel extends JPanel {

public MyPanel() {

JLabel label = new JLabel("Hello World!");

add(label);

}

}

Add JPanel to JFrameimport javax.swing.*;

public class MyFrame extends JFrame {

public MyFrame() {

super("A frame"); // frame title

JPanel panel = new MyPanel();

getContentPane().add(panel);

setSize(200,200);

setVisible(true);

}

public static void main(String[] args) {

MyFrame myFrame = new MyFrame();

}

}

Some Useful Components

• Basic Components– JButton, JLabel, JTextArea, JTextField, JTable

• Other Panels– JSplitPane, JScrollPane, JTabbedPane

Layout Manager (AWT)

• BorderLayout (default in JFrame)• BoxLayout• CardLayout• FlowLayout (default in JPanel)• GridBagLayout• GridLayout

BorderLayoutNORTH

SOUTH

EASTWEST CENTER

JLabel label = new JLabel(“Hello World!”);setLayout(new BorderLayout());add(label, BorderLayout.NORTH);

In FramegetContentPane.setLayout(new BorderLayout());getContentPane.add(label, BorderLayout.NORTH);

BoxLayout

setLayout(new BoxLayout());

In FramegetContentPane().setLayout(

new BoxLayout());- Can be aligned along

an axis

CardLayout

• Area that displays different components at different time– Eg. Tabbed windows

• Depending on the choice, the appropriate panel will be displayed

setLayout(new CardLayout());

In FramegetContentPane().setLayout(new CardLayout());

FlowLayout

setLayout(new FlowLayout());

In FramegetContentPane().setLayout(new FlowLayout());

GridBagLayout

setLayout(new GridBagLayout());

In FramegetContentPane().setLayout(new GridBagLayout());

GridLayout

setLayout(new GridLayout());

In FramegetContentPane().setLayout(new GridLayout());

Event Handling

• This is where the code to react to an action is done• Listener type

– ActionListener• Button presses, choosing menu item, etc.

– WindowListener• Closing, minimizing, resizing a window, etc.

– MouseListener• Pressing a mouse button

How to Implementan Event Handler (1)

public class MyClass implements ActionListener {

...

//where initialization occurs:

button.addActionListener(this);

...

public void actionPerformed(ActionEvent e) {

...//Do something...

}

}

Impl. Event Handler (2)public class MyClass {

...//where initialization occurs:button1.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent e) {...//Do something...

}});

button2.addActionListener(new ActionListener() {public void actionPerformed(ActionEvent e) {

...//Do something...}

});}

Impl. Event Handler (3)public class MyClass implements ActionListener {

...//where initialization occurs:button1.addActionListener(this);button2.addActionListener(new MyListener());...public void actionPerformed(ActionEvent e) {

...//Do something...}

}

class MyListener implements ActionListener {...public void actionPerformed(ActionEvent e) {

...//Do something...}

}

Painting

• Override the paintComponent method of JPanel

• Use repaint() to refresh image

public void paintComponent(Graphics g) {

// use super method to paint background

super.paintComponent(g);

// now paint on top of what has already been painted...

}

Animation

• Set a timer that calls repaint() in a fixed time interval

Timer timer;

public MyClass() {...timer = new Timer(10, new ActionListener() {

public void actionPerformed(ActionEvent e) {repaint(); //repaint every 10ms

}});timer.start(); //start the timer

}

Code Example