1. Java Power Tools: A Foundation for Interactive GUI Exploration Viera K. Proulx, Richard Rasala, Jeff Raab HCI 2001 Conference New Orleans, LA August 10, 2001 www.ccs.neu.edu/teaching/EdGroup/JPT NSF DUE CCLI-EMD 995-0829

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

3. Benefits of easy-to-build GUIs l Programming courses –Focus stays on algorithmics and OO design l GUI design process –Focus is on user’s needs and expectations l Learning and exploration –Easy to provide multiple views of data –Easy to provide persistent display of current state –Easy to install controls for exploration

4. Building GUI with JPT Toolkit GUI building (single statement each): l Create GUI object l Install GUI object in the display l Extract information l Display information

5. JPT (Java Power Tools) l String as communication medium l Model encodes/decodes String l View extracts/displays String l Action button linked to action

6. The Stringable Interface l This interface applies to data models l Data is Stringable if one can encapsulate its state in a String l All data built in layers from the basic types is Stringable l The data in image or sound files is Stringable since one need only capture the file name not the detailed data l Stringable is naturally recursive

7. The Displayable Interface l This interface applies to views l A view is Displayable if its user input can be encapsulated into a String l All views that use widgets whose user data can be expressed as String’s can recursively be interpreted as Displayable l Note that Displayable captures only the user input state not the full state of the view

8. Example 1: Simple Adder l 5 TextFieldViews l 2 Actions –Add –Clear l Model –4 int inputs: x, y, z, w –1 int output: sum

9. Example 1: Simple Adder l TextFieldView –Construct xTFV –Install in GUI with annotation “X:” –int x = xTFV.demandInt(); –xTFV.setViewState(x + “”);

10. Example 1: Simple Adder l 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

11. Key Issues: l Recursion is the king –Combine simple Displayable GUI components into larger Displayable GUI components … –Combine simpler Stringable models into a larger Stringable model… l requestObject() … setViewState(…)

12. Example 2: Polygon Painter

13. BufferedPanel Point2DView ArrayPanel of Point2DViews and more ActionsPanel

14. 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(); }

15. PushDown Automata Explorer Language: { a i b j c k where i = j or i = k for i > 0 }

16. PushDown Automata Explorer

17. 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);

18. Race: Process Priorities