1

Introduction Introduction to MVCto MVCObserver Pattern Observer Pattern

� After this lecture you should understand the following:

� the Model-View-Controller pattern: components and their roles

� the observer pattern and its use in the MVC pattern

� Also, you should be able to:

� write a graphical user interface for a simple application using the MVC architecture

� Reference: The Model-View-Controller (MVC) is a commonly used and powerful architecture for GUIs. How does it work?http://ootips.org/mvc-pattern.html

2

What areWhat are patternspatterns??

Architect Christopher Alexander (1977):

A pattern is a three-part rule,which expresses a relation between

� a certain context,

� a problem, and

� a solution.

3

Patterns in SW Patterns in SW developmentdevelopment

� Pattern „bible“: Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides

Design Patterns Elements of Reusable Object–Oriented Software.Addison-Wesley, 1995

� Patterns are ways to describe best practices, good designs, and capture experience in a way that it is possible for others to reuse this experience.

4

Pattern: ObserverPattern: Observer

� Establishes a 1:m relation

� Publishes changes of an object to other objects automatically

� Keep objects separate from each other

Question:What is the advantage of independent objects?

Answer:

enables certain objects to be pulled out and replaced without programming

changes

5

ExampleExample ObserverObserver

Example from Gamma et al.

a graph and a table could both display and edit the same data

When the model is updated, all Views are informed and given a chance to update themselves.

8

MVC MVC –– Model View ControllerModel View Controller

� Design Pattern for dialog-oriented and distributed

applications (i.e. web development)

� The Model View Controller is a technique used to separate

� Business logic (the Model) from

� User Interface (the View) and

� program progression/flow (the Control).

� the Observer Pattern provides the basis

9

Model View ControllerModel View Controller

Users interact with the controller.

It interprets mouse movement, clicks, keystrokes, etc

Communicates those activities to the model – eg: delete row, insert row, etc

It’s interaction with the model indirectly causes the View(s) to update

10

Model View ControllerModel View Controller

Model

View

11

merges View and Controller together into one object – a delegate

UIFactory provides appropriate delegates according to Look&Feel

MVC in Java MVC in Java –– Java Java DelegateDelegate ModelModel

MVC in Java

•Swing often merges the View and Controller together into one object.

•Sun call’s this a delegate.

•The delegate interprets the user’s interactions and updates the model

•It also handles the display

•Note that this still allows multiple views on the same model.

•It has nothing to do with C# delegates.

12

MVC MVC ExampleExample : Table : Table modelmodel� Saves data in a table

� Add and update data

� administer attributes, i.e. „is edible“

� Example / Default model: DefaultTableModel

class MyTableModel extends DefaultTableModel {public final String[] heads = {"Nr", "Rand"};

public MyTableModel(int rows) {super.setColumnIdentifiers(heads);int i;for (i = 0; i < rows; i++) {

Object a[] = new Object[heads.length];a[0] = new Integer(i + 1);a[1] = new Double(Math.random());super.addRow(a);

} } }

13

MVC MVC ExampleExample : : Assign modelAssign model

� Create model

� Build application

� Assign model to all tables which display data

public class MyApp {

public static void main(String[] args) {

MyTableModel model = new MyTableModel(50);

MyFrame myFrame1 = new MyFrame(model);

MyFrame myFrame2 = new MyFrame(model);

myFrame2.setTitle("MVC Frame 2");

myFrame2.setLocation(20, 200);

}

}

14

public class MyFrame extends JFrame {

BorderLayout borderLayout = new BorderLayout();

JScrollPane jScrollPane = new JScrollPane();

JTable jTable = new JTable();

public MyFrame(MyTableModel myModel) {

try {

this.jTable.setModel(myModel);

jbInit();

this.setSize(300, 200);

this.show();

}

catch (Exception e) {

e.printStackTrace();

} }

MVC MVC Example Example : Frame: Frame

private void jbInit() throws Exception {

this.setDefaultCloseOperation(3);

this.setTitle("MVC Example");

this.getContentPane().setLayout(borderLayout);

this.getContentPane().add(jScrollPane, BorderLayout.CENTER);

jScrollPane.getViewport().add(jTable, null);

}

15

MVC MVC ExampleExample: : OverviewOverview

.setModel

(2)

16

� Result?

MVC MVC ExampleExample : Run mvctest1: Run mvctest1

17

MVC MVC ExampleExample : Models : Models for for additional additional viewsviews

� Model-Listener

18

� Model Listener

class MyTableModelListener extends JTextField implementsTableModelListener {

public MyTableModelListener() { }

public void tableChanged(TableModelEvent e) {TableModel tm = (TableModel)e.getSource();int rows = tm.getRowCount();double sum = 0.;int i;for (i = 0; i < rows; i++) {sum += Double.parseDouble(

tm.getValueAt(i, 1).toString());}this.setText(Double.toString(sum));

}}

MVC MVC ExampleExample: Models: Models forfor additionaladditional viewsviews

19

� Add Model Listener to model

public class MyFrame extends JFrame {....

MyTableModelListener sumTextField = newMyTableModelListener();

....

public MyFrame(MyTableModel myModel) {try {this.jTable.setModel(myModel);myModel.addTableModelListener(this.sumTextField);myModel.fireTableDataChanged();jbInit();…

}

MVC MVC ExampleExample : Models: Models forfor additionaladditional viewsviews

20

MVC MVC ExampleExample:: OverviewOverview

(2).setModel

21

Run mvctest2Run mvctest2

22

� Documents

MVC MVC ExampleExample : Models : Models for for texttext

class MyDocument extends DefaultStyledDocument {public MyDocument() {try {

this.insertString(0, java.util.Calendar.getInstance().getTime().toString(), null);}catch (Exception e) {

e.printStackTrace();}

}}

23

� Set Documents

MVC MVC ExampleExample : Models: Models forfor texttext

public class MyApp {public static void main(String[] args) {MyTableModel model = newMyTableModel(50);

MyDocument document = newMyDocument();

MyFrame myFrame1 = new MyFrame(model, document);

MyFrame myFrame2 = new MyFrame(model, document);

myFrame2.setTitle("MVC Frame 2");myFrame2.setLocation(20, 200);

}}

24

� Set Documents

MVC MVC ExampleExample : Models: Models forfor texttext

public class MyFrame extends JFrame {....

JTextArea commentTextArea = new JTextArea();

public MyFrame(MyTableModel myModel, MyDocument document) {

try {this.jTable.setModel(myModel);

myModel.addTableModelListener(this.sumTextField);

myModel.fireTableDataChanged();this.commentTextArea.setDocument(

document);jbInit();this.setSize(300, 200);this.show();

}catch …

25

MVC MVC ExampleExample:: OverviewOverview

MyApp

+main:void

JTextFieldTableModelListener

MyTableModelListener

+MyTableModelListener+tableChanged:void

DefaultTableModelDocumentListener

MyTableModel

+heads:String[]

+MyTableModel+changedUpdate:void+insertUpdate:void+removeUpdate:void

DefaultStyledDocument

MyDocument

+MyDocument

JFrame

MyFrame

borderLayout1:BorderLayoutjPanel:JPanelsumLabel:JLabelsumTextField:MyTableModelListenerjScrollPane:JScrollPanejTable:JTablegridBagLayout1:GridBagLayoutcommentLabel:JLabelcommentTextArea:JTextArea

+MyFrame-jbInit:void

2

26

MVC Example: MVC Example: Run mvctest3Run mvctest3