A. Hornof -- 9/24/07
CIS 443/543, Fall 2007

Project #2
Hack a GUI: A Java Swing Exercise

Due: Sunday 10/7/07, 10 PM

The purpose of this assignment is for you to learn and practice the basics of how to build graphical user interfaces (GUIs) using Java Swing, including the following concepts: model-view, frames, listeners, layouts.

This is an individual project. You should not receive any assistance for this project other than from the professor, in-class discussions moderated by the professor, and published sources. Newsgroups and email are not published sources. You may not provide any assistance to other students. As well, you may not use automated code generation tools such as visual component editors for this project.

Two published sources that will be of great help to you are Sun's web sites Creating a GUI with JFC/Swing and the Java 2 API Specification, both of which are available directly via the on-line version of this document. You should spend a fair amount of time reading these pages, and you may find the search facility on the first set of these pages very helpful, too. You may use and modify source code from these and other published sources but you absolutely must cite your sources. Every source code file should list all authors and all sources in a comment at the top of the file. Make sure that you are using JavaTM 2 Platform Standard Edition 5.0. Every program submitted, such as Q2.java, Q3.java, and so on, should compile and run as a application.

Macintosh XCode QuickStart (should you decide to use this IDE)

You should make sure that you can compile and execute a Swing program as soon as possible by making sure that you can compile the code from the Sun's RadioButtonDemo.java such as on the Macintosh computers in Room 100 Deschutes, as follows:

  1. Familiarize yourself with Apple's XCode integrated development environment (IDE) by taking the XCode Quick Tour and reviewing the XCode 2 User Guide (such as Chapter VI on Debugging). XCode is installed in the /Developer/Applications directory on each Macintosh in Room 100, and can also be downloaded from Apple at no charge.
  2. Get RadioButtonDemo.java and the five image files from Sun's "example index" web page.
  3. Create a new XCode project using the "Java Swing Application" template. Call the project "RadioButtonDemo.java".
  4. Compile and run ("Build and Go") the default XCode program that gets created with the template, to make sure the IDE is installed and working correctly.
  5. Replace the XCode file called RadioButtonDemo.java with the contents you got from the Sun website, commenting out the first "package" line. (You might need to do a "Clean", under the "Build" menu.)
  6. Put the images directory that you got from the Sun site into the same directory as the "RadioButtonDemo.class" file that appears when XCode compiles.
  7. Compile and run, verifying that you can click and see the five different animals. (It took me a while to get the gifs to appear. One thing that seemed to help was was just double-clicking on the RadioButtonDemo.class file in the Macintosh Finder, which is roughly the equivalent of typing "java RadioButtonDemo" at a command line. Maybe another "Clean" would have helped.)

Problem set

In this project you will design the beginning of a graphical user interface for a music store where customers can search through the discographies of various artists by genre. The assignment is designed to take you through the construction of the interface in a step-by-step manner, producing a separate deliverable application for every question.

1. A warmup exercise.

Download RadioButtonDemo.java from the online guide to Creating a GUI with JFC/Swing. Modify the program so that it has a new radio button, immediately under the "Pig" radio button, that adds another animal, or yourself, to the list. Find and add an appropriate picture. Give the new button an appropriate label and keyboard shortcut. In a comment at the top of the source code, cite the original source of the code, the modifications made, by whom, and when. Identify any major additions with a brief, descriptive comment that also includes the programmer's full name. If you are not the author of the image that you add, cite your source. See "Academic Honesty" at the very end of the syllabus.

2. Build the data model.

You should have three classes: a MusicInventory class, a Discography class, and an Album class.

The MusicInventory class contains one instance variable:
private ArrayList Discographies; // an array list of Discography instances
The Discography class should have the following instance variables:
private String artistName;
private ArrayList albumArrayList; // an array list of Albums
private int recordNumber;
The Album class should have the following private instance variables:
private String albumTitle;
private Integer year;

The MusicInventory class should have the following two instance methods:

initialize(), which puts some real but hard-coded data for discographies of a few of you favorite artists spanning 3-4 genres. ("Hard-coded" data is written into the source code file instead of being read from a separate data file.)

print(), which sends the contents of the MusicInventory object to the standard output, in a nicely formatted labeled manner, such as:

Record Number #4
Artist: Pink Floyd
Saucerful Of Secrets, 1968
More, 1969
Atom Heart Mother, 1970
Obscured By Clouds, 1972
Dark Side Of The Moon, 1973
Wall, 1979
Momentary Lapse Of Reason, 1987
Delicate Sound Of Thunder, 1988

The MusicInventory print() method should work by making successive calls to a print() method in the Discography class, which should work in part by making successive calls to a print() method in the Album class.

Write a tiny application called Q2.java that creates a single instance of MusicInventory called theMusicInventory, initializes theMusicInventory, and prints out the entire contents of theMusicInventory.

Create and initialize theMusicInventory in each of the remaining programs.

Use the classes MusicInventory, Discography, and Album exactly as specified. Please don't build any as inner classes, and please don't create a package.

3. Build a JTable view of the first Discography.

Write a program that displays just the albumArrayList for the first Discography in the MusicInventory. The album's names and the corresponding year should be displayed in a JTable. Don't make any calls to the print() methods.

The program should be called Q3.java and should include a class called "Q3" that extends JFrame. The JFrame should include a JTable which gets filled with the albumArrayList for the first Discography in the MusicInventory. Study how tables work in Sun's How to Use Tables. Have a separate column for albumTitle and year, and a separate row for each album.

Use the data model created in Q2 for populating the JTable by implementing a few new methods. But use the exact same initialize() that you wrote for Q2 to get the hard-coded data into your program.

Sun's SimpleTableDemo.java code will provide direction, but you may not be able to just use it directly. An AbstractTableModel may be useful.

Important Details

Do not use a GUI builder for any of the code you generate for this assignment. GUI builders are tools that automatically generate Java code from layouts that you create graphically. Apple XCode's Interface Builder is an example.

If you use any of Sun's code, any code generated by an IDE, or any other lines of code that you did not generate and write yourself, be sure to state where you got those lines of code in a comment at the top of the source code file. See "Academic Honesty" at the very end of the syllabus.

For this and all remaining exercises, closing the window or frame should terminate the application.

4. Build and display a JTree-based hierarchy of the Discographies organized by appropriate Genres

Build an application called Q4.java which creates and displays the three level hierarchy of the entire music collection with The Music Store being the root or level-0, the Genres being the level-1 and the Artists as level-2. How to Use Trees will prove to be a helpful guide. Associate the leaf nodes with discographies created in Q2.java.

Give the Genres names, such as "Hip Hop" and "Classical". Add the genre names to the tree in any straightforward manner. One potentially elaborate way would be to create a genre field in the Album class. There are probably easier ways. Hard-coding the genre names is fine.

5. Build a tree-and-table-based view of the entire data model.

Build an application called Q5.java which displays both the views from both Q3 and Q4 simultaneously and side-by-side in a single frame. Feel free to reuse as much of Q3 and Q4 as you like. You might want to look at How to Use Split Panes and How to Use Scroll Panes.

6. Connect the Tree and the Table

Now give the user the ability to view the entire discography of a particular artist in the table by just clicking the artist name in the tree. When the user selects the leaf node which represents the artist, the corresponding discography appears in the table in the adjacent pane. Start by copying Q5.java to Q6.java. Add a listener to your tree which reacts to the Artist selection by displaying the appropriate discography. Read How to Write a Tree Selection Listener to understand how to use the appropriate listener.

Usability

You should practice user-centered design wherever possible within the constraints of the assignment. For example, when a user selects some object, try to bring as much of it as possible into view. For example, a tree in a scroll pane might automatically scroll to show a partially hidden selection. For another example, split panes, when they first appear in their default state, should be appropriately sized.

Your projects will be evaluated on a departmental Macintosh machine. Test your code for usability on such a machine. Note that some default Swing behaviors vary from platform to platform.

Commenting

All code must be commented. A header at the top of every source code file should list the name of the file, the author, code sources, and a very brief description (five to twenty words) of the code. If the file includes code that is derived from Sun's tutorial or API, you need to acknowledge this in the header. Every major section of code that you write must have a brief description of its function.

Submission Instructions

You should end up with a directory that includes the following nine files: MusicInventory.java, Discography.java, Album.java, RadioButtonDemo.java, Q2.java, Q3.java, Q4.java, Q5.java, and Q6.java. There will also be the associated .class files, and a .gif file from Problem 1.

1. Clean up the directory by deleting all of the .class and any other unrelated files. Go through one final time making sure that all of the Qx.java files compile and then all of the Qx files run and work properly, and then again delete the .class and unrelated files. Please do not submit any Qx.java files that do not compile and execute. You will not receive any credit for programs that do not compile and execute.

2. Create a tar file of all of all of the .java files in the directory, plus the one .gif file for Problem 1. Assuming you are in the directory where these and no other files are located, run the following command:

tar -cvf P2.tar *.*

3. Submit the tar file before the due date and time by typing:

/cs/classes/www/07F/cis443/bin/turnin -s ix -p 4431 pa2 P2.tar

4. Confirm that your submission has arrived by going to

http://www.cs.uoregon.edu/classes/07F/cis443/turnin/pa2

and confirming that your tar file has been placed in a directory with your user name there.

You may resubmit and overwrite the previous submission. The timestamp on the last-submitted file will be used to determine if the assignment was submitted on time, or if a penalty for late days has accrued.

Criteria for Evaluation

There are a total of 100 possible points on this exercise. You will be graded based on the following:

  • All turned-in code compiles by typing "javac *.java" at the unix prompt of a CIS Macintosh workstation running the default version of Java, and then executes by typing "java Qx", where x is the number of the problem (except for Problem 1).
  • All code that compiles and executes meets the specifications given for the source code.
  • All code that compiles and executes has the interface appearance and functionality specified in the problem set.
  • We will spot check for commenting. There must be commenting in the one or two places where we look.

Acknowledgments

This assignments was developed with assistance from Ishwinder Kaur, a former GTF of this course.