Java Swing Reference: 1.Swing: A Beginner’s Guide by Herbt Schildt, TMH Edition.

transcript

Java Swing

Reference:1.Swing: A Beginner’s Guide by Herbt Schildt, TMH Edition

What is Java Swing?

• Swing is a collection of classes and interface that define the Java GUI.

• It is built upon the foundation of the AWT.

• AWT(Abstract Window Toolkit) defines a basic set of controls, windows, and dialog boxes that support a usable, but limited GUI.

• It is Part of the Oracle’s Java Foundation Classes (JFC)- an API for providing a GUI for Java programs

• Offers a rich set of GUI components such as buttons, text fields, scroll bars, check boxes and so on…

Swing vs AWT• AWT is Java’s original set of classes for building GUIs

– Translates its visual components into their corresponding , platform specific equivalents, or peers

– Not truly portable: looks different and lays out inconsistently on different OSs

• Due to OS’s underlying display management system

• Swing is designed to solve AWT’s problems – Lightweight components, entirely written in Java and do not

rely on platform-specific peers• Uses AWTs components

– Window, frame, dialog

– Lays out consistently on all OSs– Uses AWT event handling mechanism

Swing features

GUI components like button, checkbox, and so on… Java 2D API: images, figures, animation Pluggable look and feel(PLAF): use samples (metal, Windows

and Motif) or create your own Data Transfer: cut, copy, paste, drag & drop Internationalization: supports different input language Accessibility API: for people with disabilities Undo Framework API: supports unlimited numbers of actions to

undo and redo Flexible Deployment: run within a browser as an applet or Java

Application

Components and Containers

• A Swing GUI consists of components and containers• A component is an object (an independent visual control)that

represents an element on the screen– e.g. label, text area, text field

• A container is a component that holds other components– Can nest containers inside each other– e.g. windows, frames, dialogs, and panels

Components and Containers

• Swing defines two types of top-level containers: 1) Heavyweight containers: JFrame, JApplet, JWindow, and JDialog

- do not inherit JComponent class but inherit AWT classes.

2) Lightweight containers: Jpanel, JRootPane - do inherit JComponent class

• In general, we create one or more components and add them to a container to display them on the screen

– JFrame consists of multiple containers (panes)

JFrame

- Each top-level container define a set of panes

The Initial Swing GUIContainment Hierarchy

File EditUndoRedoCut

Frame / Dialog / Applet

Root Pane

Layered Pane

Content Pane

Glass Pane

a 3D model enables menus to pop up above the content pane

allows for interception of mouse events and painting across GUI components

Root pane•Created by Swing on realizing frame and‘Invisibly’ attached to top-level container (e.g. JFrame)

•The root pane manages the other panes and the (optional) menu bar. The panes that comprise the root pane are glass pane, the content pane, and the layered pane.

Glass pane•It is the top level pane. It sits above and completely covers all other panes

•By default, it is a transparent instance of Jpanel

•It enables you to manage mouse events that affect the entire container

Layered pane•Provided by root pane, It is an instance of JLayeredPane.

•The layered pane allows components to be given a depth value.

•It holds the content pane and the (optional) menu bar.

Content pane•It is an instance of JPanel

•This is the pane to which you will add visual components

GUI Program Design

• The GUI provides a view of the program, it is clearly not the program

• Making the GUI code as independent of the program code is a good strategy– Changes in the program do not necessarily change the GUI

– Different GUIs can be developed for the same program

– Debugging and maintaining both the GUI and the program code is easier

Model-View-Controller(MVC)

• Design pattern often used in Swing • Breaks a GUI component down into three parts

– “Model” corresponds to the state information associated with a component

– “View” determines how the component looks when rendered on the screen

– “Controller” interprets user input, commanding the model and view to change as necessary

Model View

Controller

The model passes its data to the view for rendering

The view determines which eventsAre passed to the controller

The controller updates the modelBased on the events received

MVC in Swing

• Swing often merges the View and Controller together into one object called the UI delegate.

• The UI delegate interprets the user’s interactions and updates the model. It also handles the display.

• Swing’s approach is called the Model-Delegate architecture.

• Because the view(look) and controller(feel) are separate from the model, the look and feel can be changed without affecting how the component is used within a program.(PLAF)

MVC in Swing

Controller

Delegate

Program Logic

The Application

The MVC Power• One of the best examples of MVC/Delegates in Swing is the

pluggable look and feel (PLAF)• PLAF enables the entire UI look to be changed by simply

switching PLAF’s• A simple matter of switching the delegate which draws

buttons, lists, etc.• Replaces AWT’s heavyweight OS-look with a controllable,

lightweight one.

Building a GUI• A GUI is built in layers.• Bottom most layer is the window (Container) - usually a JFrame

(for an application), or a JApplet– Contains all other components– Can provide basic features like maximise/minimise buttons, title bar, menu bar, etc

• On top of this, components are layered (Component)– Components, e.g. buttons, text fields– or intermediate containers, e.g. panels

• Arrangement of components in a container is handled by a layout manager– Its job is to instruct components on how to arrange themselves so the GUI

is drawn correctly. Write some Listeners and attach them to your Components

Interacting with a Component causes an Event to occur A Listener gets a message when an interesting event occurs, and executes some

code to deal with it

Display your window

Steps to build a GUI

• There are 5 steps to creating a Java based GUI:1. import the GUI packages

2. declare the widgets to be used in the GUI

3. add the widgets to a container

4. implement any event handling

5. show the GUI

Build from bottom up

• Create:• Frame

• Panel

• Components

• Listeners

• Add: (bottom up)• listeners into components

• components into panel

• panel into frame

JPanel

JButton

Listener

JFrame

JLabel

Using a GUI Component

1. Create it• Instantiate object: b = new JButton(“press me”);

2. Configure it• Properties: b.text = “press me”; [avoided in java]

• Methods: b.setText(“press me”);

3. Add it• panel.add(b);

4. Listen to it• Events: Listeners

JButton

A Simple Framed Window

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

public class SwingTest {

public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(new Dimension(300,200)); frame.setLocation(100,100); frame.setVisible(true); }

Notes on the Example

• setSize and setLocation require java.awt.*; the rest require javax.swing.*

• The JFrame constructor argument is used as a title

• The Dimension constructor takes an integer width and height, respectively

• The setLocation method takes a pair of integer coordinates (x,y) where (0,0) is the upper left corner of the display

• The visibility of a JFrame is set to false by default

Changing Background Colorimport java.awt.*;import javax.swing.*;

public class SwingTest {

public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(new Dimension(300,200)); frame.setLocation(100,100); Container contentPane = frame.getContentPane(); contentPane.setBackground(Color.red); frame.setVisible(true); }

Content Panes

Q: Why not just: frame.setBackground(Color.red); ?

Ans: In order to be lightweight, Swing's top-level window objects must be built on top of a lightweight AWT Container object introduced in version 1.1

• This container is called a content pane

Swing Hello World

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

public class HelloWorld {public static void main(String[] args) {

JFrame frame = new JFrame("Hello World!");frame.setSize(220, 200);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Container contentPane = frame.getContentPane();contentPane.setLayout(null);

JButton button = new JButton("Hello World!");button.setLocation(30, 30);button.setSize(150, 100);contentPane.add(button);

frame.setVisible(true);}

JFrames

• A JFrame is a Window with a title and a border• A JFrame provides the basic building block for screen-

oriented applications.

JFrame win = new JFrame( “title” );

Creating a JFrame

import javax.swing.*;

public class SwingFrame { public static void main( String args[] ) {

JFrame win = new JFrame( "My First GUI Program" );

win.setVisible(true); //win.show(); }} // SwingFrame

Creating a JFrame

win.setSize( 250, 150 );win.setVisible(true); //win.show();

}} // SwingFrame

JLabels

• Jlabel is a component that you can put text into.• When creating a label you can specify the initial value

and the alignment you wish to use within the label.

lbl = new JLabel( ”text", JLabel.RIGHT ) ;

Hello World

// operation to do when the window is closed. frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

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

win.getContentPane().add( label );

win.pack(); // set frame sizewin.setVisible(true); //win.show();

}} // SwingFrame

JButtons

• JButton extends Component , displays a string and delivers an ActionEvent for each mouse click.

• Normally buttons are displayed with a border• In addition to text, JButtons can also display icons

button = new JButton( ”text“ ) ;

Buttons

JButton button = new JButton( "Click Me!!" );

win.getContentPane().add( button );

win.pack();win.setVisible(true); //win.show();

}} // SwingFrame

Layout Manager• Layout Manager

– An interface that defines methods for positioning and sizing objects within a container. Java defines several default implementations of LayoutManager.

• Layouts allow you to format components on the screen in a platform independent way

• The standard JDK provides five classes that implement the LayoutManager interface: – FlowLayout – GridLayout – BorderLayout – CardLayout – GridBagLayout

• Layout managers are defined in the AWT package

Changing the Layout

• To change the layout used in a container you first need to create the layout.

• Then the setLayout() method is invoked on the container is used to use the new layout.

• The layout manager should be established before any components are added to the container

JPanel p = new JPanel() ;p.setLayout( new FlowLayout() );

Layout Manager Heuristics

Left to right,Top to bottom

FlowLayout GridLayout

BorderLayout

none, programmer sets x,y,w,h

One at a time

CardLayout GridBagLayout

JButton

Code: null layoutJFrame f = new JFrame(“title”);

JPanel p = new JPanel( );

JButton b = new JButton(“press me”);

b.setBounds(new Rectangle(10,10, 100,50));

p.setLayout(null); // x,y layout

p.add(b);

f.setContentPane(p);

press me

Code: FlowLayout

JFrame f = new JFrame(“title”);

JPanel p = new JPanel( );

FlowLayout L = new FlowLayout( );

JButton b1 = new JButton(“press me”);

JButton b2 = new JButton(“then me”);

p.setLayout(L);

p.add(b1);

p.add(b2);

f.setContentPane(p);

press me then me

FlowLayout

• When you add components to the screen, they flow left to right (centered) based on the order added and the width of the screen.

• If the screen is resized, the components' flow will change based on the new width and height

Flow Layout

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

win.getContentPane().setLayout( new FlowLayout() );

for ( int i = 0; i < 10; i++ ) win.getContentPane().add(

new JButton( String.valueOf( i ) ) );

win.pack();win.setVisible(true); //win.show();

}} // SwingFrame

FlowLayout

GridLayout

• Arranges components in rows and columns– If the number of rows is specified

• columns = number of components / rows

– If the number of columns is specified• Rows = number of components / columns

– The number of columns is ignored unless the number of rows is zero.

• The order in which you add components matters– Component 1 (0,0), Component 2 (0,1), …...

• Components are resized to fit the row-column area

GridLayout

gridLayout( 2, 4 )

gridLayout( 0, 4 ) gridLayout( 4, 4 ) gridLayout( 10, 10 )

BorderLayout

• BorderLayout provides 5 areas to hold components. These are named after the four different borders of the screen, North, South, East, West, and Center.

• When a Component is added to the layout, you must specify which area to place it in. The order in which components is not important.

• The center area will always be resized to be as large as possible

BorderLayout

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

JFrame win = new JFrame( "My First GUI Program" );Container content = win.getContentPane();

content.setLayout( new BorderLayout() );content.add( "North", new JButton( "North" ) );content.add( "South", new JButton( "South" ) );content.add( "East", new JButton( "East" ) );content.add( "West", new JButton( "West" ) );content.add( "South", new JButton( "South" ) );content.add( "Center", new JButton( "Center" ) );

win.pack(); win.setVisible(true); //win.show(); }} // SwingFrame

BorderLayout

Default Layout Managers

• The default layout manager for content panes is BorderLayout. Recall that the following Swing components have content panes:– JWindow– JFrame– JDialog– JApplet– JInternalFrame

• The other Swing container is the JPanel, whose default layout manager is FlowLayout.

Event Handling• The Delegation Event Model: Provides a standard mechanism for

a source to generate an event and send it to a set of listeners.

• In the delegation event model, there are three participants:1. Event: It is an object that describes a state change in a source.– Each time a user interacts with a component an event is generated,

e.g.:• A button is pressed• A menu item is selected• A window is resized• A key is pressed

– An event informs the program about the action that must be performed

2. Event source : It is an object whose state changes. It generates Events.

3. Event listener: It is an object that is notified when an event occurs.

• A listener receives event notifications

• A listener must:– Register with one or more sources for a specific

type of event

– Implement an interface to receive those events

– Unregister if those events are not needed any longer

Source

Listener

events

container

The Delegation Event Model

Event Handling

Event Handling• Handling:

– create a component• e.g., a JButton

– add it to the GUI• e.g., to a JPanel

– register a listener to be notified when the component generates an event

• e.g., interface ActionListener

– define the callback method• e.g., actionPerformed()

How to Implement an Event Handler

• Every event handler requires three pieces of code:1. declaration of the event handler class that

implements a listener interface or extends a class that implements a listener interfacepublic class MyClass implements ActionListener

2. registration of an instance of the event handler class as a listener

someComponent.addActionListener(instanceOfMyClass);

3. providing code that implements the methods in the listener interface in the event handler classpublic void actionPerformed(ActionEvent e) { ...//code that reacts to the action...}

A Simpler Event Example

public class ButtonClickExample extends JFrame implements ActionListener {

JButton b = new JButton("Click me!"); public ButtonClickExample() { b.addActionListener(this); getContentPane().add(b); pack(); setVisible(true); } public void actionPerformed(ActionEvent e) { b.setBackground(Color.CYAN); } public static void main(String[] args) { new ButtonClickExample(); }}

Event Example

public class SwingApplication extends JFrame { private static String labelPrefix = "Number of button clicks: "; private int numClicks = 0; JLabel label = new JLabel(labelPrefix + "0 "); public SwingApplication(String title) { super(title); JButton button = new JButton("I'm a Swing button!"); button.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { label.setText(labelPrefix + ++numClicks); } }); JPanel panel = new JPanel(); panel.add(button); panel.add(label); getContentPane().add(panel); pack(); setVisible(true); } public static void main(String[] args) { new SwingApplication("SwingApplication"); }}

Event Handling

• Options for implementing listeners:– anonymous inner classes– named inner classes– listener class

Java Swing Reference: 1.Swing: A Beginner’s Guide by Herbt Schildt, TMH Edition.

Documents