Easy-Bake GUIs for 2D Array Assignments

1. The Grid Package:Easy-Bake GUIsfor 2D Array Assignments Alyce Brady Chapman University November 13, 2004

2. Goals for this talk… • Provide some background on theGrid Package. • Show examples, including code. • Empower you to develop new assignments with (hopefully) a little extra fun factor.

3. Background: MBS Case Study • Teacher requests for reusable classes • RandNumGenerator • Environment and environment objects • Great GUI (Julie Zelenski of Stanford) (but not completely generic)

4. Background: Jazz Up Classics • “Graphics make assignments more fun, but I don’t want to teach graphics.” • “Graphics make assignments more fun, but I don’t know how to program Java graphics (or don’t have time).” • “My students want to create graphical applications, but it’s not a major focus.” • “My students want to look at ‘real’ graphics code."

5. Goals • Provide • a library of classes to support easy development of graphical user interfaces for a specialized, yet common, set of classic programs / assignments for CS 1 and CS 2 (i.e., APCS A and AB). • Build on the MBS GUI code • high quality (thanks, Julie!) • familiar to AP teachers

6. Background: Grid Package • Started as a refactoring of MBS GUI • Evolved into a new package; no longer compatible with MBS • Grid ≠ Environment • GridObject ≠ Locatable • Location = Location; Direction = Direction • GUI is different in major ways • Display is different in minor ways

7. GridObject • class GridObject - like Fish • grid, location, changeLocation (protected) • Does not have to be in a grid; can move from one grid to another (addToGrid, removeFromGrid, isInAGrid) • Convenient built-in subclasses • ColorBlock (and ColorBlockDisplay) • PictureBlock (and PictureBlockDisplay) • TextCell (and TextCellDisplay)

8. Grid • Specification is VERY similar to Environment (although implementation is very different) • getDirection, getNeighbor, neighborsOf • allObjects, objectAt, add, remove • Differences • remove(Location), removeAll • no recordMove !

9. Modeling Objects in a Grid Grid grid = new BoundedGrid(3,3); new TextCell(“A”, grid, new Location(0, 0)); new ColorBlock(Color.RED, grid, new Location(2, 2));

10. OR… New! Grid grid = new BoundedGrid(3,3); grid.add(new TextCell(“A”), new Location(0, 0)); grid.add(new ColorBlock(Color.RED), newLocation(2, 2));

11. Grid Package Display Classes • Similar to MBS • Displaying GridObject objects • ColorBlockDisplay, TextCellDisplay • Default Display • ScaledImageDisplay • etc. • Displaying the grid as a whole • ScrollableGridDisplay (displays grid)

12. Grid Package GUI • Supports 5 Types of Application • Model with passive, static display • Animated display controlled by code(speed may be controlled by user) • Animated display controlled by user • Control buttons • Specialized Step/Run control buttons • Mouse clicks in grid cells

13. Passive, Static Display

14. A Complete Program GridAppFrame gui = new GridAppFrame(); gui.constructWindowContents(“Trivial Example”, Color.WHITE, 120, 120, 20); DisplayMap.associate("ColorBlock", new ColorBlockDisplay()); DisplayMap.associate("TextCell", new TextCellDisplay()); Grid grid = new BoundedGrid(3, 3); grid.add(new TextCell(“A”),new Location(0, 0)); grid.add(new ColorBlock(Color.RED), new Location(2, 2)); gui.showGrid();

15. Example: • Histogram Programming Project

16. Program controlled by code

17. Complete Program GridAppFrame gui = new GridAppFrame(); gui.includeMenu(new MinimalFileMenu()); gui.includeSpeedSlider(); gui.constructWindowContents(“Animated Example”, Color.WHITE, 600, 600,20); DisplayMap.associate("ColorBlock", new ColorBlockDisplay()); gui.showGrid(); for (int row=0; row<grid.numRows(); row++) { for (int col=0; col<grid.numCols(); col++) { grid.add(new ColorBlock(Color.RED), new Location(row, col)); gui.showGrid(); } }

18. Example: • NQueens

19. Program controlled by buttons

20. Main Program boolean REDISPLAY = true; GridAppFrame gui = new GridAppFrame(); ControlButton newGridButton = new NewBoundedGridButton(gui, "New Grid"), fillButton = new FillGridButton (gui), clearButton = new ClearGridButton(gui, "Empty Grid", REDISPLAY); gui.includeControlComponent(newGridButton, EnabledDisabledStates.NEEDS_APP_WAITING); gui.includeControlComponent(fillButton, EnabledDisabledStates.NEEDS_GRID_AND_APP_WAITING); gui.includeControlComponent(clearButton, EnabledDisabledStates.NEEDS_GRID_AND_APP_WAITING); gui.constructWindowContents(“Button Example”, Color.WHITE, 600, 600,20);

21. Implementing a Control Button public class FillGridButton extends ControlButton { private boolean DISPLAY_AFTER_STEP = true; public FillGridButton (GridAppFrame gui) { super(gui, ”Fill Grid", DISPLAY_AFTER_ STEP); } public void act() { Grid grid = getGUI().getGrid(); for (int row=0; row<grid.numRows(); row++) { for (int col=0; col<grid.numCols(); col++) { grid.add(…)); gui.showGrid(); } } } }

22. Examples: • Example 3: Using Control Components • GridPlotter

23. Getting Buttons Automagically

24. The code in the GUI // Include a color chooser component for color blocks. ColorChoiceMenu colorChooser = new ColorChoiceMenu(""); includeControlComponent(colorChooser , EnabledDisabledStates.NEEDS_APP_WAITING); // Generate control buttons from the methods of the target // GridPlotter object; include them in the user interface. // The target object needs to know when a new grid is // created, so register it as a grid change listener. GridPlotter plotter = new GridPlotter(this, colorBlockColorChooser); addGridChangeListener(plotter); GeneratedButtonList generatedButtonList = new GeneratedButtonList(this, plotter, INCLUDE_ONLY_ON_BUTTONCLICK_METHODS, DISPLAY_GRID_AFTER_BUTTON_PRESSES); includeControlComponents(generatedButtonList, EnabledDisabledStates.NEEDS_GRID_AND_APP_WAITING);

25. Step/Run/Stop buttons

26. Setting up the GUI int NEEDS_GRID=EDS.NEEDS_GRID_AND_APP_WAITING; boolean DISPLAY_AFTER = true; QueenAnimation qAnim = new QueenAnimation(); SteppedGridAppFrame gui = new SteppedGridAppFrame(qAnim, DISPLAY_AFTER); gui.includeStepOnceButton(); gui.includeRunButton(); gui.includeStopButton(DISPLAY_AFTER); gui.includeSetResetButton("Restart", NEEDS_GRID, DISPLAY_AFTER); // Include New Grid button and speed slider. DisplayMap.associate("GridObject", new ScaledImageDisplay("GoldCrown.gif")); gui.constructWindowContents(“Nqueens Example”, Color.WHITE, 600, 600,20);

27. QueenAnimation Class public class QueenAnimation extendsSteppedGridAppController { private Location currentLoc; public void init() { getGrid().remove(currentLoc); currentLoc = new Location(0, 0); getGrid().add(new GridObject(), currentLoc); } public void step() { getGrid().remove(currentLoc); int newRowCol = (currentLoc.row()+1) % getGrid().numRows(); currentLoc = new Location(newRowCol, newRowCol); getGrid().add(new GridObject(), currentLoc); } }

28. Examples • Chessie • Emergency Room • Mouse-in-a-Maze • Obstacle Course

29. Control by mouse clicks

30. Simpler Example public class MouseDrivenGUI extends GridAppFrame { private ColorChoiceMenu menu; public MouseDrivenGUI () { menu = new ColorChoiceMenu(“Pick color:”); includeControlComponent(menu, ENABLE_WHEN_WAITING); } protected void onMousePressOverDisplay (Location loc) { Color c = menu.currentColor(); if ( getGrid().isEmpty(loc) ) getGrid().add(new ColorBlock(c), loc); else getGrid().remove(loc); showGrid(); } }

31. Examples: • Archaeological Dig (aka MineSweeper) • Matching Game • Tic-tac-toe

32. Summary Goals: • To provide classes that make it easy for us (or our students) to implement a large set of classic 2D-Array programs with graphics and graphical user interfaces. • Support: • Passive displays • Code-driven animated displays • Programs driven by buttons (incl. Step/Run) • Programs driven by mouse clicks in the grid