CS 242 Spring 2012 : Assignment 1.2

This page last changed on Feb 06, 2012 by cemeyer2.

Assignment 1.2 – Adding a GUI

Reading

The readings are due before lecture as usual, on Monday, February 13th.

Tutorial

The tutorial is due before lecture as usual, on Monday, February 13th.

Coding

This part of the assignment will be due on February 16th, 2012 at 08:00 AM CST in SVN. This assignment will be an extension of the chess puzzle solver application you have been working on the past 2 weeks. Specifically, it will create a GUI interface for your existing code. Please commit your assignment to a directory called Assignment1.2 in SVN. Please match this spelling exactly.

Your GUI must allow for the following features:

  • It must be able to switch between the puzzles you have coded already
  • It must be able to solve the puzzles and graphically display the solution(s) (number of solutions limited within reason)
  • It must be able to allow the puzzles to be animated (show the steps of the solver as it solves)
  • It must be able to click on a piece and graphically display the spots on the board that that piece dominates
  • It must have a simple help, preferably via a popup window launched from a menu

MVC

For this assignment we will be building a Graphical User Interface (GUI) for the chess puzzle solving applications we have developed. As a method of creating this GUI, we’ll be turning to the model-view-controller (MVC) software architecture. In an MVC architecture there are three components that comprise all the pieces of a GUI. The Model is used to hold data related to an application. In the context of this assignment, this might be the board representation(s), state of the solution(s), etc. The View component contains what the user will see. A view would have all buttons, labels, frames, pictures, and other graphical elements. The Controller handles communication between the user and the application. It will contain the functions to handle button clicks, for example.

The following link is an excellent description of the MVC design paradigm (this is the one shown in lecture): http://www.cs.rice.edu/~cork/newBook/node89.html.

To aid you in understanding how to use MVC, take a look at a set of slides that a former TA put together:


You need flash player installed to preview ppt and pdf files

Get Adobe Flash player




pdf download

User Interface Design Patterns


You need flash player installed to preview ppt and pdf files

Get Adobe Flash player




pdf download

UI Patterns you can choose from for this assignment:

  • Two-Panel/Multi-Panel Selector
  • One-Window Drill-down
  • Wizard
  • Extras On Demand
  • Center Stage
  • Card Stack
  • Closable Panels
  • Movable Panels

README

Please include a short README.txt plain text file with your submission. In it please describe your architecture, how you employed the MVC architectural pattern, and which UI pattern(s) you used and how you used them.

Netbeans/Eclipse/IntelliJ Warning!

If you decide to use the UI builder in Netbeans, IntelliJ, or Eclipse for this assignment, be very careful. Although the UI builder quickly generates Java GUIs, it produces very ugly code that will not meet the requirements for this assignment without modification. Most noticeably, it tightly couples the view with the controller, so significant refactoring of the auto-generated code will be required. In the staff’s opinion, it is more work to generate a UI automatically and refactor it properly than to build one from scratch.

Hand written code

Netbeans autogenerated code

SimpleGuiDriver.java
SimpleGuiModel.java
SimpleGuiController.java
SimpleGuiView.java
GUIExampleView.java

How do I test a GUI?

We expect you to write junit unit tests for all of your controller code. The controller functions should be able to be invoked without the view present if needed. For testing the view, there are tools out there that will let you write automated UI functional tests, such as SWTBot and Rational Functional Tester, but we do not expect you to use them for this assignment. Rather, we ask that you create a manual test plan. A manual test plan is a document that contains the steps that a user would need to manually do with your application along with screenshots of it at each step so that the user can verify that the test is progressing as expected. We expect you to write an entry in your manual test plan for each of the main features of your application.

Resources

GUI programming can be a potentially daunting experience. Below are some external resources to help get you going.

  • MVC Wikipedia Article – The Wikipedia article on Model-view-controller architecture.
  • Sun JAVA GUI Tutorial – Sun’s tutorial on Java GUI programming. This is a great resource since it is straight from the source.
  • Model/View/Controller GUI – An introduction to the model view controller design scheme. Includes a Java GUI example. Especially relevant is section 3.1.2.0.1 Warning.
  • Crash Course in Java GUI – An introduction to Java GUI programming. The links on this site are actually powerpoint presentations.
  • Java GUI Examples – A number of examples using JFrame and JButton.

Grading

We will use the standard Grading rubric for this assignment.

  • It must be able to switch between the puzzles you have coded already
  • It must be able to solve the puzzles and graphically display the solution(s) (number of solutions limited within reason)
  • It must be able to allow the puzzles to be animated (show the steps of the solver as it solves)
  • It must be able to click on a piece and graphically display the spots on the board that that piece dominates
  • It must have a simple help, preferably via a popup window launched from a menu
Category Weight Notes
Basic Preparation 3 Ready to go at the start of section
Code Submission 6 Submitted on time and to the correct location in the repository
Decomposition 6  
Documentation 6 Comments for each class and each function listing a brief summary, its parameters, and its return value
Effort 3  
Naming 3  
Overall Design 6 Use of MVC
Participation 6  
Presentation 6  
Requirements Satisfaction 6 Animation
Requirements Satisfaction 3 Display the solutions
Requirements Satisfaction 3 Domination
Requirements Satisfaction 3 Help
Requirements Satisfaction 3 Incorporation of UI pattern(s)
Requirements Satisfaction 3 Puzzle Switch
Requirements Satisfaction 3 README.txt
Testing 9 Unit tests written for all controller code, manual test plan for views

netbeans_gui.png (image/png)

CS242_UIPatterns.pdf (application/pdf)

fa10lecture3.pdf (application/pdf)

hand_written_gui.png (image/png)
Document generated by Confluence on Mar 29, 2012 02:55

  1. No comments yet.

  1. No trackbacks yet.