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
Top Related