The Grid Package: Easy-Bake GUIs for 2D Array Assignments Alyce Brady Chapman University November...

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