The Grid Package: EasyBake GUIs for 2D Array Assignments

1
The Grid PackageEasy-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 dont
  want to teach graphics.
• Graphics make assignments more fun, but I dont
  know how to program Java graphics (or dont have
  time).
• My students want to create graphical
  applications, but its 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

• Grid grid new BoundedGrid(3,3)
• grid.add(new TextCell(A),
• new Location(0, 0))
• grid.add(new ColorBlock(Color.RED),
• newLocation(2, 2))

New!
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 row0 rowltgrid.numRows() row)
• for (int col0 colltgrid.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 row0 rowltgrid.numRows() row)
• for (int col0 colltgrid.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_WAITIN
  G)

25
Step/Run/Stop buttons
26
Setting up the GUI

• int NEEDS_GRIDEDS.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 extendsSteppedGridAppC
  ontroller
• 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