the grid package: easy-bake guis for 2d array assignments alyce brady chapman university november...
TRANSCRIPT
The Grid Package:Easy-Bake GUIsfor 2D Array Assignments
Alyce Brady
Chapman University
November 13, 2004
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.
Background: MBS Case Study
Teacher requests for reusable classes RandNumGenerator Environment and environment objects
Great GUI (Julie Zelenski of Stanford) (but not completely generic)
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."
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
Background: Grid PackageStarted 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
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)
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 !
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));
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));
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)
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 buttonsSpecialized Step/Run control buttonsMouse clicks in grid cells
Passive, Static Display
A Complete ProgramGridAppFrame 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();
Example:
Histogram Programming Project
Program controlled by code
Complete ProgramGridAppFrame 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(); }}
Example:
NQueens
Program controlled by buttons
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);
Main Program
Implementing a Control Buttonpublic 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(); } } }}
Examples:
Example 3: Using Control Components
GridPlotter
Getting Buttons Automagically
// 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);
The code in the GUI
Step/Run/Stop buttons
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);
Setting up the GUI
QueenAnimation Classpublic 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); }
}
Examples
Chessie
Emergency Room
Mouse-in-a-Maze
Obstacle Course
Control by mouse clicks
Simpler Examplepublic 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(); }}
Examples:
Archaeological Dig (aka MineSweeper)
Matching Game
Tic-tac-toe
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