CS 257
User Interface Design
Multiple Views

David B. Levine
Computer Science Department
St. Bonaventure University
Copyright, 2006

Objective

By the conclusion of this lab period, you will have:

  1. Learned more about the Model-View-Controller design pattern.


  2. Used multiple views for a single model.


  3. Learned something about graphics in Java.


Lab Instructions

  1. Start by building a simple class named Model.  It should hold a single integer as its data item and should have appropriate constructor(s) as well as methods to get and set the value and one to "bump" the value, i.e. to add a constant to it.


  2. Create a dummy main class that demonstrates that your Model class works as specified.


  3. Build a UI class that contains two buttons named "Nudge" and "Shove".  The
    4. UI class should take a model as a parameter upon construction.  "Nudge"ing should cause the value of the Model to increase by one; "Shove"ing should cause it to increase by eight.  There should also be a text field in the class that, upon enter being hit, causes the data in the model to updated to the value of the text field.  Have the main (Controller) build a UI that uses your Model.  Note that this UI is really an "input-only" UI.

  4. Now, if you run this program, you can't see anything regarding the Model - thus you cannot tell if it works.  Therefore, modify the Model class so that whenever the value is changed, the new value is printed to the console window.  Do this using only ONE print statement for the entire class.


  5. Next, create a TextViewer class that implements the ModelObserver interface (that you should also add to the project).  A TextViewer should live in its own frame and contain a single JTextField.  Upon receiving an update message, it should display the current data from the Model in its field.  Have the main create the TextViewer and "register it" with the Model.  (This means that the Model must now keep track of its Observer.)

  6. Now demonstrate that you have really implemented the MVC pattern by creating and registering TWO TextViewers.  Both should update upon a change in the Model.  (Note that depending upon how you implemented Step 5, this may be trivial or it may involve changing the Model to allow more than one observer.)
     
  7. Lastly, build a BarViewer class that displays the data as a graphical rectangle.  (The code in GRectDemo.java may be of significant help here; you will need to add the acm.jar file to any project that uses GRects.)  Register a BarViewer (along with your two TextViewers) with the Model so that you get THREE views (and two truly different views) of your model.  Documentation for the acm package is available.

To Hand In

  1. You are to hand in the printouts all of the classes you created along with a cover page.


  2. You are also to email me a message with your .class files as attachments.
Due Date

            This lab is Monday, Feb. 23 at 4 p.m.

Assignment Type (see Academic Practices and Policies Document):

            Group Project With Limited Collaboration