Comp202: Principles of Object-Oriented Programming II
Fall 2006 -- Lab #5: Tournament Tree MVC   

Introduction

This tutorial will lead you through the process of putting together an MVC design for the Tournament tree for programming project #3.  Most of the effort should be spent on implementing the algorithm for inserting a known team into the Tournament tree.  In the end, you should come up with an appropriate MVC design for the Tournament tree GUI application and a (perhaps partial) implementation of each of the components of the MVC design.   You are allowed to work in teams of two or three during the lab session and share the code with your lab partners.  After the lab session, you are to take your lab code and work alone to complete programming project #3.  

Tournament View

From the demo applet, we see that the view frame has the following required GUI components.

1. What it looks like.
   • A "Clear" button to clear all the tournament tree displays.
   • A JTextField to enter the name of a known team.
   • A "Insert" button to insert the known team with the name shown in the text box into the tournament tree.
   • A "Make Tournament" button to randomly create a tournament tree.
   • A "Play Round" button to play one round of the current tournament.
   • A JTextArea to display the tournament tree vertically in text format.  This  JTextArea should be scrollable.
   • A JPanel to graphically display the current tournament tree horizontally. This JPanel should be scrollable.
   • A JLabel to display the winner of the tournament.
2. What it behaves like.
   • We are going to limit our lab work to the Clear button, the JTextField for team names, the Insert button, and the scrollable JTextArea for displaying the current tree.  By now, you ought to know all about Java GUI components and their event listeners.  
   • What should the action listener for the Clear button do?
   • What should the action listener for the Insert button do?
   • How do we make a scrollable JTextArea?  The Notes and Hints section of the programming project explains how to do it.
3. How it is created and initialized.
   • It is the controller that creates the view and pass to it appropriate concrete adapters at construction time.   The controller design is discussed in a latter section.

Tournament Model

Again, we are going to focus only a model that allows us to insert teams into a tournament tree.

1. What it looks like- The tournament model comprises of
   • a BiTree representing a tournament tree and containing unknown and known teams - what design pattern(s) are we going to use here?
2. What it behaves like
   • it knows how to insert a team with a given name into the tournament tree: need insert team algorithm!
3. How it is created and initialized.
   • It is the controller that creates the model.  When the model comes into existence, what does it initialize its tournament tree to?

Tournament Tree Controller

The Tournament controller instantiates the model and the view, and set up the "wiring" between the two using appropriate adapter.

1. What it looks like - The controller maintains
   • a Tournament model object
   • a Tournament view object
2. What it behaves like.
   • it has no behavior!
3. How is it created and initialized.
   • when it comes into existence, it instantiates a Tournament model and a Tournament view passing to this view the appropriate adapters.

A viable alternative is to have the controller construct the system when a method is called, rather than in its constructor.

Working with Dynamically Created GUI Components and JScrollPanes

The BRSDisplayAdapter works by dynamically creating labels and placing them onto a panel (or any JComponent). 

BE SURE THAT  THE LAYOUT MANAGER FOR THE JPANEL GIVEN TO BRSDisplayAdapter IS SET TO null!   Otherwise, the labels won't place properly.

Since the BRSDisplayAdapter is creating and placing the labels onto the GUI, the scroll pane doesn't know that the displayed size of the component it holds (a JPanel) has changed.  To combat this problem, the scroll pane or the frame that it is in, needs  to be validated periodically.  The validate() method provided by all JComponents causes the component to explicitly determine the size of all sub-components and to adjust their size or status accordingly.   In particular, it will cause a scroll pane to display scroll bars when the displayed tree is larger than the size of the scroll pane (actually the size of the panel that the scroll pane contains.

We recommend that you create a private utility method in your model that looks something like this:

  void showTree() {
      brsDisplayAdapter.displayTree(tree); // displays the tree horizontally
      // put a call here to the view to display the tree vertically, i.e. the tree's toString() representation. 
      // put a call here to the view to tell it to validate its frame.
  }

Call this method whenever the model does something, such as add a team(s) or play a round.   This method will then properly update the screen.  Note that the above method implies certain capabilities in the adapters from the model to the view.

Additional notes:

• Note that the BRSDisplayAdapter cannot be instantiated by the model, it must be instantiated by the controller because it contains references to the view.
• BRSDisplayAdapter requires the use of another algorithm called BRSGetMaxDepthVisitor to calculate the maximum depth of the tree.  You need to write this algorithm.   Note that BRSDisplayAdapter assumes that BRSGetMaxDepthVisitor is not a singleton, though it could be.   Adjust the BRSDisplayAdapter accordingly if you make BRSGetMaxDepthVisitor  a singleton.
• set JScrollPane's Autoscrolls to be true -- this will cause it to display scrollbars whenever its content to be displayed is larger than its current size.
• In the view, after any action is taken, be sure to tell the frame to repaint.   This will ensure that the latest information is displayed.

Plan of Attack

In this lab, we will concentrate on the display of the tree, both vertically and horizontally.  Here's a recommended series of steps:

1. Create a  simple view with a button and a text area on it.
2. Create a controller and connect it to a very simple model that holds a binary tree.
3. Code the button so that it will cause the binary tree's string representation to appear on the text area.   This will require designing some simple adapters.
4. Be sure to test with more a reasonable amount of data (strings, for now) in the binary tree.
5. Add a scroll pane around the text area.
6. Implement the showTree() method above, but without the BRSDisplayAdapter code.
7. Test to prove that the scrolling works properly, especially that the scroll bars appear when needed.
8. Add panel to the view.
9. Modify the controller to instantiate a BRSDisplayAdapter with the new panel as its display component.   The demo uses (0, 0) as the row/col offset and (55, 20) as the label width/height.
10. Modify showTree() method to use the BRSDisplayAdapter .
11. Test that the tree shows up horizontally on the view.
12. Add the scroll pane around the panel.
13. Test to show that the panel scrolls properly.

Last Revised Thursday, 03-Jun-2010 09:52:24 CDT

©2006 Stephen Wong and Dung Nguyen