CSCI213/ITCS907/MCS9213
Autumn Session, 2007

Assignment 3: Building Graphical User Interfaces

You should complete "Laboratory Exercise 3" before starting this assignment.

Aims

This assignment aims to establish a basic familiarity with the construction of graphical user interfaces (GUIs) and the use of "event driven" program architectures.

Objectives

On completion of this assignment you should be able to:

Tasks

There are two separate programming tasks. You are to implement both programs and prepare a report that contains your code, commentary on your code, and evidence for correct operation of your code. You should be able to adapt some code from the exercises for use in your programs.

  1. Applet
  2. Data display program

An Applet using java.awt classes

Binary Tree applet displayed by appletviewer

Binary search tree

Binary Tree applet displayed by Internet Explorer

Binary search tutorial applet page

In the first part of the assignment, you will create a simple Applet using the java.awt classes.

The Applet is to illustrate the basic operations of a binary search tree. It allows for data values (simple String data) to be added to the tree and to be subsequently removed. It displays the tree structure after each operation. The data in a binary search tree are kept ordered. The value held in a particular node of the tree will be strictly greater than the values in all the nodes of its left subtree; the value will be less than (or equal to) the least value held in all the nodes of its right subtree.

You will have had an introduction to simple binary search trees in your CS-100 level subjects. (What? You say you have never heard of a binary search tree. For shame! You were sleeping through those lectures. You can always try Wiki for an introductory explanation.) However, I have been told that the coverage at 100-level is not sufficient for you to be able to program a binary search tree for yourself! (? !)

Some operations on binary search trees are easy to code - addition of a new value, search for a value, "in-order" traversal to print the tree's contents. Removal of data is more complex. There are a variety of special cases to consider - removal of a node with no "children", removal of a node with one child (a left subtree or a right subtree), and removal of a node with two children (both subtrees) - and for each such special case there can be extra issues if it is the current root node that is being removed. If handled in an unsophisticated way, the coding of the remove operation can easily become quite messy. (This is probably the reason why I was advised that you wouldn't be able to implement a binary tree - you will not yet have been shown the more sophisticated programming constructs needed to simplify the coding of the remove operation.)

Since you cannot implement a binary tree, I have provided you with an implementation. You are required to use this implementation as the basis of your Applet. (That requirement is to stymie those students who would have handled this assignment by "googling" for a binary-tree demonstration applet on the internet and submitting that code as their work.)

My code is supplied as a NetBeans project and can be found in /share/cs-pub/csci213/A3. The supplied code is for a simple text-input/text-output program; it has a command loop that lets you add data, remove data, or print the tree.

Binary tree demonstration
Tree holds data items with Strings, they are kept ordered alphabetically
You can add and remove items from the tree and print the tree
Commands - Add, Remove, Print, Quit
For add and remove commands, enter keyword-whitespace-value
>Add John
>Add Luke
>Add Daniel
>Add Michael
>Add David
>Add Yuan
>Add Karen
>Add Sonia
>Print

Daniel
David
John
Karen
Luke
Michael
Sonia
Yuan

>Remove John
>Print
Daniel
David
Karen
Luke
Michael
Sonia
Yuan

My code uses the classes TreeData, TreeNode, and TreeNodeHolder. The version of the code shown to you in 100-level CS probably had classes similar to TreeData and TreeNode. The root of the tree was probably of type "TreeNode"; the left and right data members of class TreeNode were also of type TreeNode. (Actually, the type for C++ would be something like TreeNode* - TreeNode pointer). You may be puzzled by my TreeNodeHolder elements. Technically, these are a form of "double indirection" pointers. A C++ implementation of a binary search tree would use TreeNode*& variables in a similar role. These double indirection pointers greatly simplify the implementation of the remove operation. Those of you taking CSCI203 can learn more about such things.

You don't need to modify the add/remove operations that I have supplied in my TreeData class. What you will have to do is replace the in-order traversal printTree function with a 

public void paint(Graphics g) { 
	// in-order traversal to draw tree structure
	...
}

paint function that draws the tree in the Applet's main canvs.

BinaryTreeApplet

You will define a class BinaryTreeApplet that:

  1. extends the standard java.applet.Applet class
  2. owns an instance of a TreeData class (created in its init() function)
  3. has a GUI that uses a BorderLayout manager to place an instance of a scrollpane class that contains a "MyCanvas" class in the center; and in its south region has a panel with a label, a text input field, and two buttons;
    (you can write the code to create this GUI structure, or you can use the NetBeans GUI editor to build it interactively; it is simple enough that it is quicker to code it yourself)
  4. listens for action-events associated with the "Add" and "Remove" buttons that are displayed in its GUI;
    when the add or remove button is activated, the applet will check the contents of text input field; if this has an empty string, no further action is taken; if there is an input string, the applet will invoke the add/remove operation of its TreeData object
    This function is to print tracer statements on System.out that show the sequence of Add/Remove operations as they are performed
  5. its init function will:

MyCanvas

You will define a MyCanvas class that extends java.awt.Canvas. This will own a link to the TreeData object owned by your Applet; the link can be set in its constructor or via a separate initialization function. Its constructor will also set a size for the Canvas that is sufficient to display a complex tree. Its paint method passes the request to the linked TreeData object.

TreeData (and related classes)

Your TreeData class is a modified version of mine. The printTree function can be removed. You will define a paint function. The paint function will perform an in-order traversal of the tree, drawing the representations of the nodes and edges via operations on the Graphics object such as g.clearRect(...); g.drawString(...); and g.drawLine(...). You may find it simpler to perform two in-order traversals; in the first, you determine the position of each node, and in the second traversal you draw the edges and nodes.

Node coordinates

You can easily work out basic (x,y) coordinates for the nodes; these basic values then need to be scaled up by some multiplicative factor so that the tree gets drawn on a reasonable scale.

  1. The x-coordinate is the order-number in which the node is processed in the course of the in-order traversal of the tree
  2. The y-coordinate is the node's depth.

Web page

You will embed your Applet in a HTML web page that contains a brief explanation of the workings of a binary search tree. Do NOT simply copy explanatory text from this assignment or other materials supplied. Do NOT simply plagiarise your explanation from Wiki or any of the other WWW sites. Compose your own short explanation.

Your report is to show screen shots of your overall web page and shots of the Applet displaying the tree. Supplementary explanatory comment in your report should contain the tracer statements detailing the operations and screen shots of resulting tree structues.

Data display program

This part of the assignment uses the same patient record data as were used in assignment 1. You will need to use the PatientRecord class and the associated Comparators that you developed for part-4 of assignment 1.

If you did not complete assignment 1, and do not have these classes implemented, you should either implement them now, or if you are unwilling to do that work you should obtain versions from a colleague. Any classes contributed by a colleague should be duly acknowledged.

The program is a simple interactive graphical program that allows a user to view selected details of particular subsets of patients whose records are in a given file. (The data file that you are to use is the larger of the two data files used in assignment 1. You can find the data file in the assignment 1 supplied materials.) The program takes the name of the data file as a command line argument. It reads all the data in the file and constructs a tabular display showing all available records.

The GUI (typical tabbed pane style) has a data entry form that allows the user to select the required subsets of data:

The user selects those columns that are to be displayed and defines constraints on the required records. When the user invokes the selection operation via the action-button in the form, the required data are selected and the table structure is redefined to show only the selected data:


Your NetBeans project will be similar to mine:

having classes:

  1. "Driver" - main program that handles command line arguments, creates data object and GUI interface, and starts the GUI
  2. "ATabbedPaneThing", "MessagesPanel", "TablePanel" - these could be created afresh using the NetBeans GUI editor but it is most likely that the simplest approach will be to modify code from the exercises
  3. PatientRecord, NameComparator, AgeComparator - taken from Assignment 1; a PatientRecord object holds all the data fields for one patient, its "natural ordering" (compareTo() method) uses the insurance number; (the PatientRecord can be left as a simple struct with public data members); the two comparators provide for different orderings of PatientRecord collections.
  4. the PatientData class should:
  5. "table model" - this is a more sophisticated version of the table models given in the exercise materials
    the table model will again hold a collection of records, however its structure is now modifiable so the column names element is not a constant but a variable that can be set
    the update method will take two arguments - new column names array and new data collection; it will "fire" table structure changes as well a "content data" changes
    the getValueAt() method needs to be more sophisticated; it has to return (as a String) the value in the field of a PatientRecord that corresponds to a particular column in the current table.
  6. InfoPanel - this defines the data entry form; it can be coded manually or can be constructed using the NetBeans GUI editor (either NetBeans default layout or GridBagLayout);
    the InfoPanel:

Submission

You will complete the two programs and write them up in a word processor document that you convert to PDF format. Your report will:

The due date for submission will be announced in lectures; the date will probably be around the end of week 8 of session (currently set at Friday 27th April).

For CSCI213, asignments are submitted electronically via the "turnin" system. For this assignment you submit your programs via the command: 

turnin -c csci213 -a 3  A3.pdf

Reminders as before

  1. turnin isn't chatty you don't get email back
  2. you can check that your submitted file is safely submitted via turnout program.
  3. turnin only works if you are logged in to banshee - use ssh if you are on a different machine or workstation. (If turnin complains that it doesn't know about the assignment, you aren't logged in on banshee!)
  4. Medicals submitted through official university SOLS channels cancel late penalty marks

Marks -