MSc IT

Programming Methodology (2)

Which printer [a] LPT1 or [b] LPT2?:

How many copies do you wish to print?:

[P]rint now or [C]ancel?:

Print all pages (y/n)?:

a

2

y

C

Graphics and event-driven programs

Learning objectives

• identify and use some of the common components of the Java Swing package;

• program graphics components to handle mouse-click events;

• describe the role of layout managers;

• use the FlowLayout and BorderLayout managers;

• make use of compound containers.

Swing vs AWT

AWTSwing

heavyweight

lightweight

Swing Components..

The SmileyFace program…

public class RunSmileyFace{ public static void main(String[ ] args) { new SmileyFace(); }}

JFrame

SmileyFace is a kind of JFrame

JFrame

SmileyFace

SmileyFace( )

paint( )

public class SmileyFace

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

{ public SmileyFace() { // initialise the screen }

public void paint(Graphics g) { // draw onto the screen }}

extends JFrame

The SmileyFace constructor..

public SmileyFace()

{

setTitle("Smiley Face");

}

public SmileyFace()

{

setTitle("Smiley Face");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(250,220);

setLocation(300,300);

getContentPane().setBackground(Color.yellow);

}

public SmileyFace()

{

setTitle("Smiley Face");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(250,220);

setLocation(300,300);

getContentPane().setBackground(Color.yellow);

setVisible(true);

}

The paint method..

public void paint(Graphics g)

{

super.paint(g);

}

g.drawOval(85,75,75,75); g.setColor(Color.blue); g.drawOval(100,95,10,10); g.drawOval(135,95,10,10);

g.drawArc(102,115,40,25,0,-180); g.drawString("Smiley Face", 90,175);

g.setColor(Color.red);

Calls the paint method of the superclass - JFrame

public class RunSmileyFace{ public static void main(String[ ] args) { new SmileyFace(); }}

The ChangingFace class…

JButton JButton

boolean

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

public class ChangingFace extends JFrame {

public ChangingFace() { // code goes here }

public void paint(Graphics g) { // code goes here }

}

private JButton happyButton = new JButton("Smile");private JButton sadButton = new JButton("Frown");

private boolean isHappy = true;

The ChangingFace constructor..

public ChangingFace()

{

setTitle("Changing Face");

getContentPane().setBackground(Color.yellow);

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(250, 200);

setLocation(300,300);

setVisible(true);

}

setLayout(new FlowLayout());add(happyButton);

add(sadButton);

The paint method..

public void paint(Graphics g){ super.paint(g); g.setColor(Color.red); g.drawOval(85,45,75,75); g.setColor(Color.blue); g.drawOval(100,65,10,10); g.drawOval(135,65,10,10); g.drawString("Changing Face", 80,155);

}

if(isHappy == true){ g.drawArc(102,85,40,25,0,-180);}else{ g.drawArc(102,85,40,25,0,180);}

How do we get the program to monitor our buttons for mouse-click events ?

Give each button a listener!

public ChangingFace()

{

setTitle("Changing Face");

setLayout(new FlowLayout());

add(happyButton);

add(sadButton);

getContentPane().setBackground(Color.yellow);

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(250, 200);

setLocation(300,300);

setVisible(true);

}

happyButtonsadButton

.addActionListener( ); this.addActionListener( ); this

code for responding to mouse clicks is in this class

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

public class ChangingFace extends JFrame {

public ChangingFace() { // code goes here } public void paint(Graphics g) { // code goes here }

}

private JButton happyButton = new JButton("Smile");private JButton sadButton = new JButton("Frown");

private boolean isHappy = true;

public void actionPerformed(ActionEvent e){ // code goes here}

This method is where we write the code for responding to button clicks

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

public class ChangingFace extends JFrame {

public ChangingFace() { // code goes here } public void paint(Graphics g) { // code goes here }

}

private JButton happyButton = new JButton("Smile");private JButton sadButton = new JButton("Frown");

private boolean isHappy = true;

public void actionPerformed(ActionEvent e){ // code goes here}

implements ActionListener import java.awt.event.*;

This special kind of Class acts a bit like a contract.

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

public class ChangingFace extends JFrame {

public ChangingFace() { // code goes here } public void paint(Graphics g) { // code goes here }

}

private JButton happyButton = new JButton("Smile");private JButton sadButton = new JButton("Frown");

private boolean isHappy = true;

public void actionPerformed(ActionEvent e){ // code goes here}

implements ActionListener import java.awt.event.*;

This key word indicates that we have met that contract.

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

public class ChangingFace extends JFrame {

public ChangingFace() { // code goes here } public void paint(Graphics g) { // code goes here }

}

private JButton happyButton = new JButton("Smile");private JButton sadButton = new JButton("Frown");

private boolean isHappy = true;

public void actionPerformed(ActionEvent e){ // code goes here}

implements ActionListener import java.awt.event.*;

public void actionPerformed(ActionEvent e)

{

if(e.getSource() == happyButton)

{

isHappy = true;

repaint();

}

if(e.getSource() == sadButton)

{

isHappy = false;

repaint();

}

}

public class RunChangingFace

{

public static void main(String[] args)

{

new ChangingFace();

}

}

Running the application

Another interactive graphics class…………

JFrame

JTextField

JButton

JLabel

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

public class PushMe extends JFrame implements ActionListener{ private JTextField myTextField = new JTextField(15); private JButton myButton = new JButton("please push me"); private JLabel myLabel = new JLabel("Enter some text and push the button", JLabel.CENTER); public PushMe() { // code goes here }

public void actionPerformed(ActionEvent e) { // code goes here }}

public PushMe()

{

setTitle("Push Me");

setLayout(new FlowLayout());

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(220,120);

setLocation(400, 300);

add(myTextField);

add(myButton);

add(myLabel);

myButton.addActionListener(this);

setVisible(true);

}

public void actionPerformed(ActionEvent e){

}

String myText;myText = myTextField.getText();

myLabel.setText("You entered: " + myText);

myTextField

myLabel

A GUI for the Oblong class …

JTextArea

JButton

JLabel

JTextField JLabel JTextField

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class OblongGUI extends JFrame implements ActionListener

{

private Oblong myOblong = new Oblong(0,0);

private JLabel lengthLabel = new JLabel("Length");

private JTextField lengthField = new JTextField(5);

private JLabel heightLabel = new JLabel("Height");

private JTextField heightField = new JTextField(5);

private JButton calcButton = new JButton("Calculate");

private JTextArea displayArea = new JTextArea(2,20);

// methods go here

}

public OblongGUI(){ setTitle("Oblong GUI"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setLayout(new FlowLayout()); setSize(240, 135); setLocation(300,300);

add(lengthLabel); add(lengthField); add(heightLabel); add(heightField); add(calcButton); add(displayArea); calcButton.addActionListener(this); setVisible(true);}

public void actionPerformed(ActionEvent e){ String lengthEntered = lengthField.getText(); String heightEntered = heightField.getText(); if(lengthEntered.length() == 0 || heightEntered.length() == 0) { displayArea.setText("Length and height must be entered"); } else { myOblong.setLength( Double.parseDouble(lengthEntered) ); myOblong.setHeight( Double.parseDouble(heightEntered) ); displayArea.setText("The area of the oblong is " + myOblong.calculateArea() + "\n" + "The perimeter of the oblong is " + myOblong.calculatePerimeter()); } }}

A metric converter

JFrame

JPanel

JPanel

JPanel

inchCmPanel

mileKmPanel

poundKgPanel

Layout policies - FlowLayout

Layout policies - BorderLayout

Compound containers

JPanel

JPanel

inchCmPanel

inchCmButtons

inchCmButtons.setLayout(new BorderLayout()); inchCmButtons.add("North", cmToInchButton);inchCmButtons.add("South", inchToCmButton);inchCmPanel.add(cmText);inchCmPanel.add(cmLabel);inchCmPanel.add(inchCmButtons);inchCmPanel.add(inchText);inchCmPanel.add(inchLabel);

Practical Work

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

public class ChangingFace extends JFrame implements ActionListener{ private boolean isHappy = true; private JButton happyButton = new JButton("Smile"); private JButton sadButton = new JButton("Frown");

public ChangingFace() // code goes here

public void paint(Graphics g) // code goes here

public void actionPerformed (ActionEvent e) // code goes here}

Face now has three moods

declare an extra Jbutton

Add extra button and give it a listener

Check mood and paint frown, smile or thinkProcess three button clicks

So try changing to an int type (1 = happy, 2 = sad, 3 = frown?)