Java Power Tools:A Foundation for Interactive

GUI Exploration

Viera K. Proulx, Richard Rasala, Jeff RaabHCI 2001 Conference

New Orleans, LAAugust 10, 2001

www.ccs.neu.edu/teaching/EdGroup/JPTNSF DUE CCLI-EMD 995-0829

GUI Design Requirements

Easy installation of GUI components Recursive behavior (enable, save contents…) Robust input processing Easy creation of action control gadgets Simple yet robust graphics support Easy extraction of information from views Easy setting of the view contents from the

program

Benefits of easy-to-build GUIs

Programming courses– Focus stays on algorithmics and OO design

GUI design process– Focus is on user’s needs and expectations

Learning and exploration– Easy to provide multiple views of data– Easy to provide persistent display of current state– Easy to install controls for exploration

Building GUI with JPT Toolkit

GUI building (single statement each): Create GUI object Install GUI object in the display Extract information Display information

JPT (Java Power Tools)

String as communication medium

Model encodes/decodes String

View extracts/displays String

Action button linked to action

The Stringable Interface

This interface applies to data models Data is Stringable if one can encapsulate its

state in a String All data built in layers from the basic types is

Stringable The data in image or sound files is

Stringable since one need only capture the file name not the detailed data

Stringable is naturally recursive

The Displayable Interface

This interface applies to views A view is Displayable if its user input can be

encapsulated into a String All views that use widgets whose user data

can be expressed as String’s can recursively be interpreted as Displayable

Note that Displayable captures only the user input state not the full state of the view

Example 1: Simple Adder

5 TextFieldViews 2 Actions

– Add– Clear

Model– 4 int inputs: x, y, z, w– 1 int output: sum

Example 1: Simple Adder

TextFieldView

– Construct xTFV

– Install in GUI with annotation “X:”

– int x = xTFV.demandInt();

– xTFV.setViewState(x + “”);

Example 1: Simple Adder

action

– Construct add action object

– Define function add();

– Install add action as a button in GUI

ActionsPanel (with given label)

– Link from button to action is automatic

Key Issues:

Recursion is the king

– Combine simple Displayable GUI

components into larger Displayable GUI

components …

– Combine simpler Stringable models into

a larger Stringable model…

requestObject() … setViewState(…)

Example 2: Polygon Painter

Example 2: Polygon Painter

BufferedPanelPoint2DView

Point2DView

ArrayPanelof Point2DViews

and more

ActionsPanel

Example 2: Polygon Painter

private void paintPoly(){ // get the graphics context to draw the polygon Graphics2D G = window.getBufferGraphics(); Polygon mypoly =

(Polygon)polygonView.demandObject(); // set paint color to user color choice G.setPaint(color.getColor()); mypoly.paintPolygon(G); repaint(); }

PushDown Automata Explorer

Language: { aibjck where i = j or i = k for i > 0 }

PushDown Automata Explorer

Turtle Class Explorer

myTurtle.setPaint(0, 0, 255);

myTurtle.step(50.0);

myTurtle.turn(60.0);

myTurtle.setPaint(255, 0, 255);

myTurtle.step(50.0);

myTurtle.turn(60.0);

myTurtle.setPaint(255, 0, 0);

myTurtle.step(50.0);

myTurtle.turn(60.0);

Race: Process Priorities

Race: Process Priorities