Toolkits

• Console I/O Vs Toolkits

• Containers and Components

• Event Listeners

• Toolkit Classes– Frames– Panel– TextField– Buttons– BorderLayout

Console Vs Graphical User Interface

• Hand-crafted hierarchical Vs Automatic Linear Window

• Graphics and Text Vs Text-Only

• Editing Vs Transcript

• User-Driven Vs Program Driven

• Point and Click Vs Typing

Implementing Graphical UI

• Create the window

• React to user input

• Display output

Creating Hierarchical Window

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

Container

Component

AWT Classes

Component

Container TextField

PanelFrame

Button

Creating Hierarchical Structure

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

Frame frame = new Frame("Points Plotter");

Panel control = new Panel();

frame.add( new Panel());

control.add( new Button(“New Point”));

control.add(new Button(“Quit”);

control.add(new TextField(“0”));

frame.add(control);

control.add(new TextField(“0”)); frame.setSize ( FRAME_WIDTH, FRAME_HEIGHT)frame.setVisible ( true)

Hierarchical Structure Vs Layout

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

Hierarchical Structure Vs Layout

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

Layout Managers

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

BorderLayout

GridLayout

North

East

South

West CenterCenter

BorderLayout

EastWest

North

South

frame.setLayout(new BorderLayout());

frame.add( new Panel(), BorderLayout.CENTER);

frame.add( new Panel(), BorderLayout.WEST);

frame.add( new Panel(), BorderLayout.EAST);

frame.add( new Panel(), BorderLayout.NORTH); frame.add( new Panel(), BorderLayout.SOUTH);

GridLayout

controller.setLayout(new GridLayout(2,3));

controller.add(new TextField());

controller.add(new TextField());

controller.add(new TextField());

controller.add(new TextField());

Laying out Hierarchical Structure

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

Frame frame = new Frame("Points Plotter");

Panel control = new Panel();

Frame.add( new Panel());

control.add( new Button(“New Point”));

control.add(new Button(“Quit”));

control.add(new TextField(“0”));

Frame.add(control);

control.add(new TextField(“0”));

control.setLayout( new GridLayout(4, 1 ));

frame.setLayout(new BorderLayout());

frame.add(control, BorderLayout.WEST);

frame.add( new Panel(), BorderLayout.CENTER);

frame.setSize ( FRAME_WIDTH, FRAME_HEIGHT);frame.setVisible ( true);

Default

Will use subclasses

Implementing Graphical UI

• Create the window

• React to user input

• Display output

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

addElement()PointHistoryModel

Reacting to New Point ClickListenable

New PointButton

Listener

addActionListener()

NewPoint Listener

actionPerformed()

Button Clicked

newPointButton.addActionListener(newPointListener);

Action Listener Code// import declarations…. public class ANewPointActionListener implements ActionListener {

PointHistory pointHistory; TextField xField;TextField yField;public ANewPointActionListener (PointHistory thePointHistory,

TextField theXField, TextField theYField) {pointHistory = thePointHistory;xField = theXField;yField = theYField;

} // Called when the New Point button is pressed. public void actionPerformed(ActionEvent ae) {

pointHistory.addElement( Integer.parseInt(xField.getText()),

Integer.parseInt(yField.getText())); }}

Implementing Graphical UI

• Create the window

• React to user input

• Display output

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

paint(Graphics g)

paint(Graphics g)

Displaying Output

Panel

Panel Resized

Panel Uncovered

Invoke Graphics Operations

View Panel

extends

repaint()

Graphics Operations

• drawLine( int x1, int y1, int x2, int y2 )

• drawString( String s, int x, int y )

• drawRect( int x, int y, int width, int height )

• drawOval( int x, int y, int width, int height )

• fillOval( int x, int y, int width, int height )

• setColor(Color newColor)

Drawing Bars public void paint(Graphics g) {

drawBars(g);

}

void drawBars (Graphics g) {

if (pointHistory == null) return;

final int BAR_WIDTH = 6;

Rectangle myBounds = getBounds();

for (int i = 0; i < pointHistory.size(); i++) {

PointModel nextPoint = (PointModel) pointHistory.elementAt(i);

g.setColor(java.awt.Color.darkGray);

g.fillRect(nextPoint.getX() - BAR_WIDTH, myBounds.height -

nextPoint.getY(), BAR_WIDTH, nextPoint.getY());

}

}

Implementing Graphical UI

• Create the window– Use Frames, LayoutManagers, Panels, Buttons,

TextFields

• React to user input– Define Listeners that call methods in Model

• Display output– Override paint() method– Call graphics operations

Displaying Points

All four views displayed concurrently and kept in Sync.

MVC in a Graphical Application

Model:APointHistoryModel

Controller:AConsoleController

Controller:AnAWTController

Controller:AnAWTController

Controller:ASwingController

View:AConsoleView

View:ABarChartView

View:APlotterView

View:APlotterView

Composer:Single Main

Class

MVC in a Graphical Application

Model:APointHistoryModel

Controller:AnAWTController

View:ABarChartView

Composer:Single Main Class

frame

controlpanel

viewpanel

xTextField

QuitButton

yTextField

New PointButton

NewPoint Listener

Same asSame as

paint(Graphics g)

paint(Graphics g)

View Panel View

Panel

Panel Resized

Panel Uncovered

Invoke Graphics Operations

View Panel

extends

repaint()

MVC View

Model updatedpointHostoryUpdated()

View

import java.awt.Rectangle;import shapes.PointModel;public class APointHistoryBarChart extends Panel implements PointHistoryListener {

PointHistory pointHistory;public void pointHistoryUpdated(PointHistory thePointHistory) {

pointHistory = thePointHistory;repaint();

}// Called by repaint and other methods that refresh the view.

public void paint(Graphics g) {drawBars(g);

}

View (contd)

void drawBars (Graphics g) {if (pointHistory == null) return;final int BAR_WIDTH = 6;Rectangle myBounds = this.getBounds();for (int i = 0; i < pointHistory.size(); i++) {

PointModel nextPoint = (PointModel) pointHistory.elementAt(i);g.setColor(java.awt.Color.darkGray);g.fillRect(nextPoint.getX() - BAR_WIDTH,

myBounds.height - nextPoint.getY(), BAR_WIDTH, nextPoint.getY());

}}

}

Constructor

Panel Controller

Panel

•Create control components (text fields, buttons)

•Add components

•Create component listeners

•Register listeners with components.

MVC Controller

extends

Controllerimport java.awt.GridLayout;import java.awt.Button;import java.awt.TextField;import java.awt.event.ActionListener;public class APointHistoryAWTController extends Panel {

int numComponents = 0;PointHistory pointHistory ;public APointHistoryAWTController (PointHistory thePointHistory) {

pointHistory = thePointHistory;createComponents ();setLayout(new GridLayout(numComponents,1));

}void createComponents() {

TextField xField = createTextField(“0”);add(xField);TextField yField = createTextField(“0”);add(yField);add (createButton ("New Point", new

ANewPointActionListener(pointHistory, xField, yField)));add (createButton ("Quit", new AQuitActionListener()));

}

Controller (contd)

Button createButton(String name, ActionListener listener) { Button button = new Button(name); button.addActionListener(listener);

numComponents++; return button; } TextField createTextField(String text) {

TextField field = new TextField(text);field.setEditable(true);numComponents++;

return field; }}

Composer

Composer:Single Main Class

main()

•Create frame

•Set its layout manager

•Create model, view(s) and controller(s)

•Make views listener of model

•Add views and controllers to frame

•Set frame size

•Make frame visible

• Set frame location

2 Barchart Composerpublic class APointHistoryBarchartComposer {

static final int FRAME_WIDTH = 300;static final int FRAME_HEIGHT = 300;

public static void main (String args[]) {PointHistoryModel pointHistoryModel = new APointHistoryModel();createBarChartEditor(pointHistoryModel);createBarChartEditor(pointHistoryModel);

} public static void createBarChartEditor (PointHistoryModel pointHistoryModel) {

Frame frame = new Frame("Points Bar Chart");frame.add (createAWTController(pointHistoryModel),

BorderLayout.WEST); frame.add (createBarChart(pointHistoryModel),

BorderLayout.CENTER); // important to set this, default seems to be (0,0)frame.setSize (FRAME_WIDTH, FRAME_HEIGHT);setLocation (frame);// important to make frame visible, default is invisible

frame.setVisible(true); }

Barchart Composer (contd)

public static APointHistoryBarChart createBarChart(PointHistoryModel pointHistoryModel) {

APointHistoryBarChart pointHistoryView = new APointHistoryBarChart();

// make view an eavesdropper of modelpointHistoryModel.addListener(pointHistoryView);return pointHistoryView;

}

public static APointHistoryAWTControllercreateAWTController(PointHistory pointHistory) {return new APointHistoryAWTController(pointHistory);

}

Barchart Composer (contd)

static int curX = 0;static int curY = 0;static final int X_OFFSET = 100;static final int Y_OFFSET = 100;

static void setLocation (Frame frame) {frame.setLocation (curX, curY);curX += X_OFFSET;curY += Y_OFFSET;

}}