CSE logo University of Washington Computer Science & Engineering
 CSE 331 Homework 6 - Winter 2012
  CSE Home   About Us    Search    Contact Info 

   

Homework 6: Designing a GUI

Due: Thursday, Mar. 8 at 11pm

In this assignment, you will write a graphical user interface (GUI) for your route-finder application. You will learn to work with the Java Swing library and event-driven programming generally. You will also get more practice with the MVC design pattern and code reuse.


Errata

None yet...


Introduction

Recall that in the previous assignment, UW Marketing commissioned you to write a route finder tool. They are pleased with your initial results, but now they've asked for a graphical interface that visually draws routes on a map. Using the MVC framework minimizes the amount of new code you need to write, as you can reuse your data and business logic classes.

You will build your GUI using the Java's Swing and Abstract Windowing Toolkit (AWT) libraries. There are no new starter files for this project.


Required Features

The specific appearance of your GUI is up to you, but your application must be able to:

  • Load the map data from campus_buildings.txt and campus_paths.txt on startup. (This should be in your model, not your GUI code.)
  • Display the map of campus provided in campus_map.jpg
  • Allow the user to select two buildings for finding a route (the sample solution uses dropdown menus, but this is only a suggestion)
  • Mark the selected buildings on the map. Ideally your map should resize to show the route, but this is not required.
  • Draw the route between the selected buildings on the map
  • Allow the user to reset the GUI - clear any markings on the map and other controls, setting the GUI back to its initial state
  • Be robust. No matter what the user does, your program should never allow an exception message to bubble up to the console window, and your GUI should never crash or reach a buggy/invalid state.

We have provided a runnable sample solution to give you an idea of where to start. You are not required to match the appearance of the sample solution. We encourage you to get creative with your design, but get a basic GUI working and save a backup copy before you delve into extra features! This includes the optional map resizing logic. Swing can be finicky, and seemingly simple UI improvements often become big time sinks.

We are not grading on aesthetics, but we reserve the right to deduct points for genuinely confusing or unusable designs - for example, if we can't figure out how to select the two buildings, or if we can't see the whole route because the GUI won't fit on a standard-sized (14"-15") laptop screen. If needed, you can include brief directions in a JLabel or other component.


Grading

Your grade will be based on:

  • Whether your GUI provides the required features
  • Whether your GUI is reasonably easy to use. (Hint: make sure it fits on a standard full-size laptop screen (14" or 15") and that your friend/roommate/sister can figure out how to use it without directions from you.)
  • General code style and organization. For example, your GUI constructor will likely be long enough that it should be split into helper methods.

Additionally, your program should be responsive and not take unusually long times to find paths and display them.


Hints and Notes

  • Swing can be finicky, and spending an hour struggling with an arbitrary technical detail doesn't have much educational value. You are therefore encouraged to share tips and help your classmates with questions on the mechanics of how to use swing/awt components and event listeners. Questions should focus on specific technical problems and general how-to-do-it GUI issues, but not how to use them for particular situations related to this assignment. An appropriate question is, "My map image disappears when I resize the window - has anyone else encountered this?" An inappropriate question is, "What code do I write to draw the map image on the GUI?"
  • Some IDEs, such as Netbeans, let you specify the appearance and behavior of your GUI and automatically generate the code for you. You may not use these tools; you must write your GUI from scratch.
  • Use the resources under "Useful Links" (top-right corner) to get started with Swing. In the Java API, refer to the javax.swing and java.awt packages especially.
  • To display the map and routes, you will want to write a custom component and override paintComponent(). You will use Graphics and/or Graphics2D to do the rendering. We will look at an example in this Thursday's section, and the slides and demo are posted under "Useful Links" if you want to get started early.
  • Your model classes from HW5 should be mostly usable as-is. You might need to add a public method or two, but otherwise they should require very minor changes, if any. The model should not be tailored to the new view or significantly rewritten, and any changes should require few, if any, changes to the original text UI to get that running again. If your text UI does break, you are not required to fix it.
  • Abstraction functions, representation invariants, and checkRep() are not required for GUI classes because they generally do not represent ADTs.
  • Remember to call pack() on your JFrame before making it visible. This resizes the window properly to hold all of the components added to it.

Additional Features (optional)

If you want an extra challenge, you are welcome to add extra features to your application. Small amounts of extra credit may be awarded for interesting or useful functionality that shows considerable effort. Extra credit will not be awarded for pure "eye candy," such as changing the font and color of buttons or adding a border. A few examples of extra-credit features include:

  • As the window is resized, make the map shrink or grow to fit the window
  • Maintaining the proportions of the map so that it zooms in on a route without becoming distorted
  • Placing the map in a ScrollPane so it can be displayed full-size. When displaying a route or buildings, jump to that spot on the map and resize if needed. (Hint: you probably need to override getPreferredSize() in your "canvas" class for scrolling to work.)
  • Allow the user to select the endpoints of a path by clicking the mouse on the map
  • Allow the user to drag the map with the mouse to change the portion that is shown, instead of or in addition to scroll bars
  • Add zoom buttons, possibly with a way to recenter the image for zooming if a hand is not available to drag it (e.g. mouse double click)

Be sure to complete all basic requirements before attempting additional features. If you implement any extras, please include an answers_hw6.txt file in the top level of your project stating what you added.


Turnin

As before, turnin consists of adding your new and updated files to your repository before the deadline. If you are unsure whether you have added and committed everything, you can check out a second copy of your repo in a project with a different name and verify that it contains everything you expect.

The only new files you need are your GUI classes. If you implemented extra features, also include answer_hw6.txt.

LATE DAYS: As usual, you may use up to two late days on this assignment. We will check out your repository as of the deadline for grading, which means we will assume you have have NOT used late days unless we hear otherwise. Please email the course staff if you are using a late day, and we will check out your repository 24 or 48 hours after the deadline.


CSE logo Computer Science & Engineering
Box 352350, University of Washington
Seattle, WA  98195-2350
(206) 543-1695
[comments to Hal Perkins]
Privacy policy and terms of use