GUI- Model-View-Controller CSI 1101 N. El Kadri

Model-View-Controller (MVC) pattern Makes it easier to modify or customize each part; Designed to allow for multiple views of the same data; Binding between the model and the view is done at runtime (rather than compile time), i.e. views can be changed dynamically; The API of each component is well defined, the model, the controller or the view can be modified/replaced easily; Allows to focus on each aspect of the application independently.

MVC Model – the implementation, state: attributes and behaviour; View – the outgoing interface, a representation of the model to the outside world; Controller – the incoming interface, forwards the requests to update the model.

Model Contains the data of the program and the methods to transform the data; Has no knowledge of either the views or the controllers (sometimes not even a reference); The View can greatly differ from the Model.

View(s) A view is an object that presents a visual display of the data for the user.

Controller A controller is an object that provides the means for the user to change the model or its visual representation. Knows what can be done to the model, for example, adding or removing an entry.

Example 1 As our first example, let’s design a graphical user interface for the class Counter.

public class Counter { private int value; public Counter() { value = 0; } public void increment() { value++; public int getValue() { return value; public String toString() { return Integer.toString( value );

To allow for the independent development of the UI, to facilitate the maintenance of the application and to allow for replacement views, let us create an interface to characterize the interactions between the model an its views, CounterView. public interface CounterView { public void update(); } The only knowledge the model has about its view is that a view has a method called update.

Changes to Counter A new instance variable to reference its view: private CounterView view; An instance method to set its view: public void setView(CounterView v) { view = v; }

Changes to Counter (contd) increment is changed so that whenever the state of the Counter changes the view is notified: public void increment() { value++; view.update(); }

public class Counter { private int value; private CounterView view; public Counter() { value = 0; } public void increment() { value++; view.update(); public int getValue() { return value; public void setView( CounterView v ) { view = v; public String toString() { return Integer.toString( value );

Controller public class Controller implements ActionListener { private Counter model; public Controller( Counter m ) { model = m; } public void actionPerformed( ActionEvent e ) { model.increment();

View public class View extends Frame implements CounterView { private Controller controller; private Counter model; private Label value; private Button update = new Button( "Update" ); public View( Counter model ) { super( "Counter UI" ); this.model = model; controller = new Controller( model ); setLayout( new GridLayout( 2,1 ) ); value = new Label( model.toString() ); add( value ); add( update ); update.addActionListener( controller ); addWindowListener( new WindowClosingHandler() ); pack(); show(); }

View - cont’d public void update() { value.setText( model.toString() ); } private class WindowClosingHandler extends WindowAdapter { public void windowClosing( WindowEvent e ) { System.exit (0); } // end of View

The main program consists of: public class Run { public static void main( String[] args ) { Counter model = new Counter(); View view = new View( model ); model.setView( view ); }

Another example Let’s consider a more complex, example that makes use of a dialog to enter new data. This example uses a simple implementation of a Stop-Watch based on a fixed size array — since the array has a fixed size, its method addTime returns false when the array is full. StopWatch is the Model! For this particular implementation, the model has no knowledge of the user interface at all (no reference to it). The controller and view are implemented by Stop-WatchUI (sometimes the Controller and the View are implemented by the same object).

public class StopWatch { public static final int CAPACITY = 15; private Time[] times = new Time[ CAPACITY ]; private int last = 0; public boolean addTime( Time t ) { boolean success; if ( last == times.length ) success = false; else { times[ last ] = t; last++; success = true; } return success; public Time timeAt( int pos ) { return times[ pos ]; public int size() { return last;

public class StopWatchApplication { public static void main( String args[] ) { StopWatch model = new StopWatch(); StopWatchUI ui = new StopWatchUI( model ); }

import java.awt.*; import java.awt.event.*; public class StopWatchUI extends Frame { // model protected StopWatch model; // view private Button bTime = new Button( "Add New Time" ); private Button bQuit = new Button( "Quit" ); private List output = new List( 10 ); private Dialog dTime = new TimeDialog( this ); // ...

// Constructor public StopWatchUI( StopWatch model ) { super( "StopWatch UI" ); this.model = model; addWindowListener( new WindowAdapter() { public void windowClosing( WindowEvent e ) { System.exit(0); } }); bTime.addActionListener( new ActionListener() { public void actionPerformed( ActionEvent e ) { dTime.setVisible( true ); bQuit.addActionListener( new ActionListener() { public void actionPerformed ( ActionEvent e ) { System.exit( 0 );

} // ... setLayout( new BorderLayout() ); add( output, "Center" ); Panel bottom = new Panel(); bottom.setLayout( new GridLayout( 1,2 ) ); bottom.add( bTime ); bottom.add( bQuit ); add( bottom, "South" ); pack(); show(); } // ...

public void displayTimes() { output.removeAll(); for ( int i=0; i<model.size(); i++ ) { output.add( model.timeAt( i ).toString() ); output.makeVisible( i ); } public void addTime( Time t ) { if ( ! model.addTime( t ) ) new ErrorDialog( this, "Maximum Capacity Exceeded" ); else displayTimes();

import java.awt.*; import java.awt.event.*; class TimeDialog extends Dialog { private StopWatchUI parent; private IntField inHours = new IntField(); private IntField inMinutes = new IntField(); private IntField inSeconds = new IntField(); private Button bCreate = new Button("Create"); private Button bCancel = new Button("Cancel"); // ...

// Constructor TimeDialog( StopWatchUI parent ) { super( parent, "Time Dialog" , true ); this.parent = parent; bCreate.addActionListener( new ActionListener() { public void actionPerformed( ActionEvent e ) { addTime(); } }); bCancel.addActionListener( new ActionListener() { cancel();

setLayout( new GridLayout( 4,2 ) ); add( new Label( "Hours:" ) ); add( inHours ); add( new Label( "Minutes:" ) ); add( inMinutes ); add( new Label( "Seconds:" ) ); add( inSeconds ); add( bCreate ); add( bCancel ); pack(); } // ...

// instance methods private void addTime() { int h = inHours.getValue(); int m = inMinutes.getValue(); int s = inSeconds.getValue(); parent.addTime( new Time( h, m, s ) ); setVisible( false ); } private void cancel() { class IntField extends TextField { public int getValue() { return Integer.parseInt( getText() );

import java.awt.*; import java.awt.event.*; class ErrorDialog extends Dialog { private Button button; ErrorDialog(Frame parent, String message) { super(parent, "Error Dialog" , true); button = new Button( "Ok" ); button.addActionListener( new ActionListener () { public void actionPerformed( ActionEvent e ) { dispose(); } }); add( "Center", new Label( message ) ); add( "South", button ); pack(); setVisible( true );

Observer/Observable Two-way associations make classes inseparable. To avoid these interdependencies, classes are often structured as Observer and Observable. The Observer has an extensive knowledge of the Observable, but the Observable only knows that the Observer can be notified. Observer is an interface that has a method update. Observable is an abstract class, that has all the necessary methods to set, delete and notify multiple observers.