Homework: GUIs

1 Purpose

The primary purpose of this assignment is to help you review (and demonstrate that you have acquired) the knowledge and skills required to implement graphical user interfaces (GUIs).

2 Overview

As you know from earlier assignments, SagaciousMedia is a (fictitious) company that develops educational hardware, software, and content for both the formal and informal education markets. To date you have written several components for their application named Gradient.

They have decided that their earlier command line application limited the size of the potential market. So, for this assignment, you must implement a GUI. However, to keep things simple, it need only work with courses that have a particular structure (specifically, the original course structure, now known as course structure 1).

The team decided not to write acceptance criteria for this sprint, but instead to write use case descriptions that describe the features. They then wrote specifications from the use case descriptions.

3 Starting Point

This assignment builds on H1 and H5. You may start with either your solution to those assignment or mine. However, there is no guarantee that my code is correct (though I think it is); you are responsible for any and all mistakes in your submission. In other words, there are no intentional defects in my code, but you are responsible for any that might exist.

4 Documents

Sagacious Media has created several new documents for this release.

5 A Recommended Process

As before, the tasks that were identified by the team at Sagacious Media are organized by story. Hence, though they are numbered so that they can be referred to in documents and conversations, the numbers should not, in any way, influence the order in which you complete them. I would suggest you sequence your activities as follows.

Read and understand all of the documents.
Create a new project for this version.
Copy all of the classes from the previous version.
Implement the LeafGradeField class.
Implement the CategoryField class.
Implement the GradientWindow class.
Test and debug the complete system.

6 Hints

The following hints should make this assignment a little easier.

6.1 Borders

Any JComponent

can have a Border

and the TitledBorder

class is a realization of the Border interface that includes a String. The best way to create an instance is to use the static method BorderFactory.createTitledBorder(java.lang.String)

javax.swing.BorderFactory#createTitledBorder(java.lang.String)

.

6.2 The LeafGradeField Class

Though we didn't talk about it in lecture, all components have methods that return size information (which are used by the layout managers). You may want to override the getMaximumSize() method (e.g., have it return getPreferredSize() or getMinimumSize()) to prevent LeafGradeField object's from being made arbitrarily large. You also may want to set the column width of the LeafGradeField objects.

Also, to improve the usability, you may want to have the LeafGradeField class realize the FocusListener interface and select the contents when focus is gained (and un-select the contents when focus is lost) so that the current contents can be easily overwritten.

6.3 The CategoryField Class

There are many ways to layout CatageoryField objects.

The most obvious is to use a horizontal BoxLayout (or to do so indirectly using a Box constructed using a factory method). After adding all of the LeafGradeField objects you can then add "glue" that will occupy all of the remaining horizontal space. Of course, this only works if the LeafGradeField objects aren't able to be arbitrarily large (as discussed above).

The simplest is to use a GridLayout . The disadvantage of this approach is that the LeafGradeField objects will be sized so that they occupy the available space. One inelegant way around this is to add extra JLabel objects (on the right).

The most complicated, though perhaps the most flexible, is to use a GridBagLayout and set the GridBagConstraints for each LeafGradeField object so that they don't "fill" extra space (i.e., set the fill attribute to NONE and the weightx and weighty attributes to 0). Then, add a JLabel as a "filler" (i.e., set the fill attribute to HORIZONTAL and the weightx and weighty attributes to 100). The advantage of this approach is that it will work even if the LeafGradeField are able to be arbitrarily large (as discussed above).

6.4 The GradientWindow Class

There are also many ways to layout GradientWindow objects.

The simplest is to use a vertical BoxLayout (or to do the same thing indirectly using a Box constructed using a factory method). After adding all of the CategoryField objects you can then add "glue" that will re-size to occupy all of the vertical space that they don't need.

It is also possible to use a GridLayout or a GridBagLayout.

6.5 Working with JDialog Objects

The easiest way to display a standard dialog box is to use one of the static "show" methods in the JOptionPane

class.

7 Submission

You must submit (to the "H6_Screenshot" assignment on Gradescope) a .pdf file containing two "screen shots". One "screen shot" must show the GradientWindow and the course grade dialog for the grades in potterhj-cs111.grd . The other "screen shot" must show the GradientWindow and the course grade dialog for the grades in cs111.grd . (Hint: The easiest way to create one .pdf file containing the two "screen shots" is to paste the "screen shots" into a word processing document and then create a .pdf file from the word processing document.)

You must also submit (to the "H6_Java" assignment on Gradescope) a .zip file (named sub6.zip) containing all of the code necessary to compile your GradientWindow class (i.e., the gui package, the grading package, and the grading.io package. Do not submit the app package or any test-related packages. Gradescope will only be checking to ensure that your code compiles and complies with the course style guide. Hence, you may only submit your code to Gradescope five times. If you can't get your code to comply with the course style guide within five submissions (something you should be able to do at this point), you will receive a grade of 0 on the assignment.

8 Grading

You will receive one of four grades on this assignment -- 100, 75, 50, or 0. You will receive a grade of 100 if your code is essentially correct (i.e., a limited number of system tests do not cause any failures). You will receive a grade of 75 if you appear to have devoted significant effort to the assignment but your code has small defects. You will receive a grade of 50 if you devoted a reasonable amount of effort to the assignment but your code has major defects. You will receive a grade of 0 otherwise and/or if the code you submit to Gradescope contains any style defects.

The Gradescope autograder will assign a maximum grade of 25 (based solely on style). Points will then be awarded manually based on the criteria discussed in the previous paragraph.