Libraries and GUIs

COMP 103 L2
Lecture Program:
• Bridging lecture – 102 to 103
transition.

• Course Overview

• Programming with libraries

• GUI Programs

• Collections (Needed for

CrowdRenderer)
COMP103 2006/T3 2
Overview of Course:
• Part 0: Programming with Libraries & GUIs

• Part 1: Programming with Linear collections

• Part 2: Programming with Hierarchical collections

• Recurring themes:
• Testing: Does it work right?
• Complexity How fast is it?
How much memory does it take?
Analysis and benchmarking.
• Good Design How do you get it right first time?

COMP103 2006/T3 3
Programming with libraries
Programming with Libraries
• Java libraries to build GUI programs (Graphical User
Interface)
• Programs with buttons
• Drawing graphics on the screen (DrawingCanvas)
• Outputting text to screen
• Responding to the mouse
• Other useful libraries
• Let user select files and choose colours.
• Reading data from files or standard input
• The Java Collections library
• New and improved in Java 1.5
• Easier to manipulate large collections of data
• Iterators, and the new “for each” loop
COMP103 2006/T3 4
Programming with linear collections

• Kinds of collections:
• Lists, Sets, Bags, Maps, Stacks, Queues, Priority Queues

• Using Linear collections

• Programming with collections,
• Sorting Data
• Implementing linear collections
• Sorting algorithms
• Algorithm design
• Algorithm analysis
• Linked data structures and “pointers”

COMP103 2006/T3 5
Programming with hierarchical collections

• Kinds of collections:
• Trees, binary trees, general trees, [? graphs]

• Using tree structured collections

• Building tree structures
• Traversing tree structures

• Implementing tree structured collections

• Implementing linear collections
• with binary search trees
• with hash tables
• With partially ordered trees

COMP103 2006/T3 6
GUI Programs
Doit Save Open Quit
• GUI programs are:
• easier to use, and
• visually pleasing.
• user interface design = COMP
311
• We will use a “basic” design Debugging messages here

• Single frame with: Read Count Plot Quit

• Buttons at the top Word 345
Sentence 330
• A debugging message area at Phrase
Noun
250
101
the bottom Verb
Adjective
87
22
Preposition 14
• A drawing canvas or a text area Particle 10
Determiner 8
in the middle, or a drawing
canvas side by side with a text Debugging messages here
area
COMP103 2006/T3 7
Programming with Libraries
• Modern programs (especially GUI and network) are too big
to build from scratch.
⇒ Have to reuse code written by other people
• Libraries are collections of code designed for reuse.

• Java has a huge collection of standard libraries….

• Packages, which are collections of
• Classes

• Learning to use these libraries is essential.

• There are lots of ‘semi’ and ‘non’-standard libraries that

provide functionalities such as encryption, numerical
solutions (Lagrange interpolation, polynomial manipulation)
etc.

COMP103 2006/T3 8
Libraries for COMP 103

• java.util Collection classes

Other utility classes
• comp100 DrawingCanvas and FileDialog
• java.io Classes for input and output
• javax.swing Large library of GUI classes
java.awt

We will use these libraries in almost every

programming assignment
COMP103 2006/T3 9
 Using Libraries
            

• Read the documentation to pick useful library

(java API)
• import the package or file into your program
• Read the documentation to identify how to use
• Constructors for making instances
• methods that you can call
• Interfaces that you can implement

4. Use the classes as if they were part of your

program

COMP103 2006/T3 10
 The “Question” Program
            

• What does this program do?

• Full program on back page
• Draw your guess of what this program will do
(work with your neighbour)

/* Code for COMP 103 2006

 * Name: daniel*/

import comp100.*;
import java.util.*;
import javax.swing.*;
import java.awt.event.*;
import java.awt.BorderLayout;
import java.awt.Color;
import java.io.*;

/** What does it do? */

public class Question implements ActionListener{
  // Fields
  private JFrame frame;
  private DrawingCanvas canvas;
  private JTextArea messageArea;

COMP103 2006/T3 11
Structure of a GUI program
• Comment, including name
• List of libraries to import
• Javadoc comment describing the Class
• Class header
• public class Xxxx implements ActionListener,
MouseListener
5. Fields of the class, including the main GUI components
• frame, canvas, messageArea, [ textArea ]
6. The constructor
• Creates the frame, the drawing canvas, the message
area
• Creates the panel for the buttons and the buttons
7. Methods to respond to buttons and mouse
8. Other methods to do all the work
9. The main
COMP103 2006/T3method, 12
The DemoGraphics Program
/* Code for Assignment 1, Nov 2005*/
import java.util.*;
import comp100.*;
import javax.swing.*;
import java.awt.event.*;
import java.awt.BorderLayout;
import java.awt.Color;
import java.io.*;

/** This program is an example of a graphical user

interface with buttons
    and an output text area. */

public class DemoGraphics implements ActionListener,

MouseListener {
// Fields
  private DrawingCanvas canvas;
  private JFrame frame;
  private
COMP103 JTextArea messageArea;
2006/T3 13
Content panes
• Usually use a JPanel
• Contains everything except menu bar
for most Swing applications
• Can be explicitly, or
implicitly created,
• see (simplified) code

//Create a panel and add components to it.

JPanel contentPane = new JPanel();
contentPane.add(someComponent);
contentPane.add(anotherComponet);

COMP103 2006/T3 14
The DemoGraphics Program
/** Constructs a DemoFiles object and sets up the user
interface */
public DemoGraphics() {
    frame = new JFrame("Drawing shapes");
    frame.setSize(600, 400);

//The graphics area.  Make it listen to the mouse

    canvas = new DrawingCanvas();
    canvas.addMouseListener(this);
    frame.getContentPane().add(canvas, BorderLayout.CENTER);

//The message area, mainly for debugging.

    messageArea = new JTextArea(1, 80);     //one line text for
messages.
    frame.getContentPane().add(messageArea, BorderLayout.SOUTH);

//The buttons
    JPanel buttonPanel = new JPanel();
    frame.getContentPane().add(buttonPanel,
COMP103 2006/T3 BorderLayout.NORTH);
15
Listeners & Events
Yes No
• User
clicks/presses/releases/drags/
types.….on some GUI object
(window, button, panel,
canvas…) button1 Button 2 canvas1

• JVM looks at the GUI object to

see if it has any “listener” Listeners

objects
Object 15
• If so, it calls the xxxxPerformed mousePressed
method on the listener object, Object 10 mouseReleased
:
passing information about the actionPerformed
event. :
:

• The listener method specifies

COMP103 2006/T3 16
what to do.
The DemoGraphics Program
JButton rectButton = new JButton("Draw Rectangle");
    rectButton.addActionListener(this);
    buttonPanel.add(rectButton);

    JButton faceButton = new JButton("Draw Faces");

    faceButton.addActionListener(this);
    buttonPanel.add(faceButton);

    JButton clearButton = new JButton("Clear");

    clearButton.addActionListener(this);
    buttonPanel.add(clearButton);

    JButton quitButton = new JButton("Quit");

    quitButton.addActionListener(this);
    buttonPanel.add(quitButton);

    frame.setVisible(true);
 }
COMP103 2006/T3 17
Listeners
The listener object must:
2. implement the ActionListener or MouseListener interface
3. Define the appropriate methods that the JVM can call.

• ActionListener must define

• public void actionPerformed(ActionEvent e){ …

• MouseListener must define all of

• public void mousePressed(MouseEvent e){ …
public void mouseReleased(MouseEvent e) { …
public void mouseEntered(MouseEvent e) { …
public void mouseClicked(MouseEvent e) { …
public void mouseExited(MouseEvent e) { …
Even if it doesn’t do anything in response to some
of those actions!

COMP103 2006/T3 18
The DemoGraphics Program
/** Respond to button presses */
  public void actionPerformed(ActionEvent e) {

    messageArea.setText("Button: " + e.getActionCommand());

    if (e.getActionCommand().equals("Draw Rectangle"))
      drawRectangle();

    if (e.getActionCommand().equals("Draw Faces"))
      drawFaces();

    else if (e.getActionCommand().equals("Clear"))
      canvas.clear();

    else if (e.getActionCommand().equals("Quit"))
      frame.dispose();
 }
COMP103 2006/T3 19
The DemoGraphics Program
/** Draw a green rectangle on the screen */
public void drawRectangle() {
    messageArea.setText("drawRectangle: 100x50 rect at (10,20)");
    canvas.setForeground(Color.green); .
    canvas.fillRect(10, 20, 100, 50);
 }

/** Draw two faces with a red hat on the screen */

public void drawFaces() {
    messageArea.setText("drawFaces: drawing two faces");
Face face1 = new Face("Face 100 50 60 120 red"); .
    face1.render(canvas);
    canvas.display();
    Face face2 = new Face(300, 50, 80, 120, Color.blue); .
    face2.render(canvas);
    canvas.display();
 }

COMP103 2006/T3 20
The DemoGraphics Program

/** Releasing the mouse should leave a blue circle at the

point
*/
public void mouseReleased(MouseEvent e) {
    messageArea.setText("Released at (" + e.getX() + " " +
e.getY() + ")");
    canvas.setForeground(Color.blue);
    canvas.fillOval(e.getX(), e.getY(), 10, 10);
 }

/** Pressing the mouse doesn't do anything

* (except put a debugging message at the bottom of the
window) */
  public void mousePressed(MouseEvent e) {
    messageArea.setText("Pressed at (" +
COMP103 2006/T3 e.getX() + “, " + e.getY() + ")"); 21
Writing GUI programs
• Follow the standard template
• Use the provided programs models
• Copy and modify is an excellent way of programming
when you are learning.
• Think carefully about what should happen when
• The user presses a button
• The user presses the mouse at a position (x,y)
• The user releases the mouse at a position (x,y)
• Look at the behaviour of the demo programs
carefully.
• Write methods for each different action

COMP103 2006/T3 22
CrowdRenderer

• MakeCrowd
• Java API – ArrayList, List
// Construct new ArrayList
private List<Face> crowd = new ArrayList<Face>();

// Adding new Face to List

Face face = new Face( ... );
crowd.add(face);

// Retrieving face from ArrayList

Face face = crowd.get(i);

// Number of faces in ArrayList

int number = crowd.size();
COMP103 2006/T3 23