1 / 32

The Grid Package: Easy-Bake GUIs for 2D Array Assignments

The Grid Package: Easy-Bake GUIs for 2D Array Assignments. Alyce Brady Chapman University November 13, 2004. Goals for this talk…. Provide some background on the Grid Package. Show examples, including code. Empower you to develop new assignments with (hopefully) a little extra fun factor.

trista
Download Presentation

The Grid Package: Easy-Bake GUIs for 2D Array Assignments

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related