Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to...
Transcript of Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to...
![Page 1: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/1.jpg)
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
![Page 2: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/2.jpg)
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.
![Page 3: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/3.jpg)
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.
![Page 4: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/5.jpg)
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.
![Page 6: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/6.jpg)
![Page 7: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/7.jpg)
![Page 8: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/10.jpg)
10
Model View ControllerModel View Controller
Model
View
![Page 11: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/11.jpg)
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.
![Page 12: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/12.jpg)
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);
} } }
![Page 13: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/13.jpg)
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);
}
}
![Page 14: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/14.jpg)
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);
}
![Page 15: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/15.jpg)
15
MVC MVC ExampleExample: : OverviewOverview
.setModel
(2)
![Page 16: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/16.jpg)
16
� Result?
MVC MVC ExampleExample : Run mvctest1: Run mvctest1
![Page 17: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/17.jpg)
17
MVC MVC ExampleExample : Models : Models for for additional additional viewsviews
� Model-Listener
![Page 18: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/20.jpg)
20
MVC MVC ExampleExample:: OverviewOverview
(2).setModel
![Page 21: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/21.jpg)
21
Run mvctest2Run mvctest2
![Page 22: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/22.jpg)
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();}
}}
![Page 23: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/23.jpg)
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);
}}
![Page 24: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/24.jpg)
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 …
![Page 25: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to MVC Observer Pattern - Informationstechnikasbeck/gs/2 MVC.pdf · 1 Introduction to MVC Observer Pattern After this lecture you should understand the following: the](https://reader031.fdocuments.us/reader031/viewer/2022021621/5c03fb2909d3f290408cfb1d/html5/thumbnails/26.jpg)
26
MVC Example: MVC Example: Run mvctest3Run mvctest3