introduction to mvc observer pattern - informationstechnikasbeck/gs/2 mvc.pdf · 1 introduction to...
Post on 02-Dec-2018
227 Views
Preview:
TRANSCRIPT
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
top related