Non-visual objects are usually easier to test than visual. ones[r]
(1)Introduction to
MVC Design pattern
陳偉凱
台北科技大學資工系
2
MVC: Model View Controller
z Splits user interface
interaction intothree distinct roles.
The modelrepresents some
information about the domain
Theviewrepresents the
display of the model in the UI
Thecontrollertakes user
input, manipulates the model, and causes the view to update appropriately.
a b
c
a b c
a = 50% b = 30% c = 20%
change notification requests, modifications x
y z
a b c
(2)3
MVC: How it Work
z Separating the presentationfrom the model
Fundamentally presentation and model are about
different concerns.
Depending on context, users want toseethe same basic
model information in differentways.
Non-visual objects are usually easier to testthan visual
ones.
Thepresentation dependson themodel Observerpattern [GOF]
Model Presentation
MVC: How it Work
z Separating the controllerfrom the view
Support editable and non-editable behavior: one view +
two controllers
Controller = Strategiespattern [GOF] Useful for Web interface
(3)5
MVC: When to Use It
z The value of MVC lies in its two separations
Separating the presentation from the model
Separating the controller from the view (less important)
z Don’t use it in very simple systems where the
model has no real behavior in it anyway.
6 Example code #1
namespace XXX {
class Program {
static model m = new model(); static Form1 f = new Form1(m); static void Main(string[] args) {
Application.Run(f); }
}
} model
(4)7 Example code #1
namespace XXX {
class Form1 : Form {
private model m;
public Form1(model m) {
this.m = m; …
}
private void B1_Click(object …) {
m.press(1);
xxx.Text = m.GetResult().ToString(); }
} }
model form
Example code #2 namespace XXX
{
class Program {
static Form1 f = new Form1(); static void Main(string[] args) {
Application.Run(f); }
}
} model
(5)9 Example code #2
namespace XXX {
class Form1 : Form {
private model m = new model; public Form1()
{ }
private void B1_Click(object …) {
m.press(1);
xxx.Text = m.GetResult().ToString(); }
… } }
model form
10 Example Class Diagram #1
List<Word>
SpellerForm
-words
Dictionary
-English -Chinese
Word
View & Control Model
-Question -Solution
(6)11 Example Class Diagram #2
SpellerForm
-words
Dictionary
-English -Chinese
Word
+Start() +Next() +GetQuestion() +IsCorrect() +GetScore()
Speller
Model Facade View & Control
-Question -Answer