GUI For the 8-Puzzle

1. GUI For the 8-Puzzle A minimal layout: All background colors and fonts are specified in a resource file.

2. How It Was Laid Out • Tiles are xmDrawnButtons: • Have drawing areas on their face • Appearance of “pushing in” is disabled by default • Tile container is an xmBulletinBoard • Options are xmPushButtons • Option container is a vertical xmRowColumn • Move count is an xmLabel • Everything is contained in an xmForm

3. Parallel Representations Keep two "parallel" representations: Internal representation that you have already created Visual representation that mirrors the internal one This requires that the two representations be kept "in step". It also requires you to think about what the GUI needs from the other classes.

4. Class Relationships Since the Solver knows about everything, associate the GUI with the Solver: Interface Problem Solver Queue ActionList Action Item PriorityQueue FrontQueue RearQueue State MaxPriorityQueue MinPriorityQueue

5. Previous Top-Level Program int main(...) { ... Problem p = new PuzzleProblemInfo(...); MinPriorityQueue q = new MinPriorityQueueInfo(qsize); Solver s = new SolverInfo(p, q); s->solve(); }

6. New Top-Level Program int main(...) { ... Problem p = new PuzzleProblemInfo(...); MinPriorityQueue q = new MinPriorityQueueInfo(qsize); Solver s = new SolverInfo(p, q); Interface i = new InterfaceInfo(s); } The InterfaceInfo constructor can create the widgets and callbacks, realize the widgets, and enter the main loop.

7. Determining Which Tile is Clicked • Recall that every callback provides the widget w as its first argument • Use XtVaGetValues to retrieve the widget's resource values: • XtVaGetValues(<widget>, {<resource>, <value>,}* NULL) • XtVaGetValues(w, XmNx, &x, XmNy, &y, NULL) • x and y must be of type Position, which is a built-in X window system type that behaves like an Integer or int • Now (x,y) is the pixel location of the clicked widget • Use (x,y) to translate to the internal representation of the board and check if it is adjacent to the space

8. Moving the Tile • Once you've determined the tile and the direction it is to move: • Compute a new target (x,y) location for the widget • Set the new location resources using XtVaSetValues • To simulate slow tile motion, move the widget one pixel at a time within a loop • If motion still seems too fast, add a waiting loop, within the outer loop, that does nothing but count to some appropriate number

9. Handling a Solve Request • Since the InterfaceInfo object contains a SolverInfo object, the Solve button callback can directly solve the current puzzle • Since the solution is only a (reversed) list of items, you need to process the list 2 8 3 2 8 3 2 3 2 3 1 2 3 1 2 3 1 6 4 1 4 1 8 4 1 8 4 8 4 8 4 7 5 7 6 5 7 6 5 7 6 5 7 6 5 7 6 5 Determine which tile moved between each pair of states. Tell that widget to move itself (can reuse tile motion code).