ModelViewController Design Patterns n n n The hard
- Slides: 40
Model-View-Controller
Design Patterns n n n The hard problem in O-O programming is deciding what objects to have, and what their responsibilities are Design Patterns describe the higher-level organization of solutions to common problems Design patterns are a current hot topic in O-O design 2
The MVC pattern n n MVC stands for Model-View-Controller The Model is the actual internal representation The View (or a View) is a way of looking at or displaying the model The Controller provides for user input and modification These three components are usually implemented as separate classes 3
The Model n Most programs are supposed to do work, not just be “another pretty face” n n The Model is the part that does the work--it models the actual problem being solved The Model should be independent of both the Controller and the View n n but there are some exceptions useful programs existed long before GUIs But it can provide services (methods) for them to use Independence gives flexibility, robustness 4
The Controller n n The Controller decides what the model is to do Often, the user is put in control by means of a GUI n n in this case, the GUI and the Controller are often the same The Controller and the Model can almost always be separated (what to do versus how to do it) The design of the Controller depends on the Model The Model should not depend on the Controller 5
The View n n Typically, the user has to be able to see, or view, what the program is doing The View shows what the Model is doing n n n The View is a passive observer; it should not affect the model The Model should be independent of the View, but (but it can provide access methods) The View should not display what the Controller thinks is happening 6
Combining Controller and View n n Sometimes the Controller and View are combined, especially in small programs Combining the Controller and View is appropriate if they are very interdependent The Model should still be independent Never mix Model code with GUI code! 7
Separation of concerns n n As always, you want code independence The Model should not be contaminated with control code or display code The View should represent the Model as it really is, not some remembered status The Controller should talk to the Model and View, not manipulate them n The Controller can set variables that the Model and View can read 8
The “Reverser” program n n In this program we combine the Controller and the View (indeed, it’s hard to separate them) The Model, which does the computation (reversing the string), we put in a separate class 9
Reverser. GUI. java n n A bunch of import statements, then. . . public class Reverser. GUI extends JFrame { Reverser. Model model = new Reverser. Model(); JText. Field text = new JText. Field(30); JButton button = new JButton("Reverse"); public static void main(String[] args) { Reverser. GUI gui = new Reverser. GUI(); gui. create(); gui. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); }. . . create(). . . } 10
The create method private void create() { set. Layout(new Grid. Layout(2, 1)) get. Content. Pane(). add(text) get. Content. Pane(). add(button); button. add. Action. Listener(new Action. Listener() public void action. Performed(Action. Event arg 0) String s = text. get. Text() s = model. reverse(s) text. set. Text(s) }) pack(); set. Visible(true) } 11
The model n public class Reverser. Model { public String reverse(String s) { String. Builder builder = new String. Builder(s); builder. reverse(); return builder. to. String(); } } 12
The Bouncing Ball Applet n n Each click of the Step button advances the ball a small amount The step number and ball position are displayed in the status line 13
The Ball Applet: Model n n n The Ball Applet shows a ball bouncing in a window The Model controls the motion of the ball In this example, the Model must know the size of the window n n so it knows when the ball should be made to bounce The Model doesn’t need to know anything else about the GUI 14
Observer and Observable n n java. util provides an Observer interface and an Observable class An Observable is an object that can be “observed” An Observer is “notified” when an object that it is observing announces a change Here’s an analogy: n n An Observable is like a Button An Observer is like a Listener You have to “attach” a Listener to a Button Another analogy: n n An Observable is like a bulletin board An Observer is like someone who reads the bulletin board 15
Observable n n An Observable is an object that can be “observed” An Observer is “notified” when an object that it is observing announces a change n When an Observable wants the “world” to know about what it has done, it executes: n n set. Changed(); notify. Observers(); /* or */ notify. Observers(arg); n The arg can be any object The Observable doesn’t know or care “who is looking” But you have attach an Observer to the Observable with: n n my. Observable. add. Observer(my. Observer); This is best done in the controller class – not in the model class! 16
Observer n n n Observer is an interface An Observer implements public void update(Observable obs, Object arg) This method is invoked whenever an Observable that it is “listening to” does an add. Notify() or add. Notify(arg) The obs argument is a reference to the observable object itself If the Observable did add. Notify(), the arg is null 17
Sample CRC index card Class Name Responsibilities . . Collaborators . . 18
Model Set initial position Move one step No collaborators. . . . but provide access methods to allow view to see what is going on 19
Model I import java. util. Observable; class Model extends Observable { final int BALL_SIZE = 20; int x. Position = 0; int y. Position = 0; int x. Limit, y. Limit; int x. Delta = 6; int y. Delta = 4; // more. . . 20
Model II void make. One. Step() { x. Position += x. Delta; if (x. Position < 0) { x. Position = 0; x. Delta = -x. Delta; } // more. . . 21
Model III if (x. Position >= x. Limit) { x. Position = x. Limit; x. Delta = -x. Delta; } // still more. . . 22
Model IV y. Position += y. Delta; if (y. Position < 0 || y. Position >= y. Limit) { y. Delta = -y. Delta; y. Position += y. Delta; } set. Changed(); notify. Observers(); } // end of make. One. Step method } // end of Model class 23
Model (repeated) Model Set initial position Move one step No collaborators. . . . but provide access methods to allow view to see what is going on 24
The Ball Applet: View n n The View needs access to the ball’s state (in this case, its x-y location) For a static drawing, the View doesn’t need to know anything else 25
View Paint the ball Get necessary info from Model 26
View I import java. awt. *; import java. util. *; class View extends Canvas implements Observer { Controller controller; Model model; int step. Number = 0; View (Model model) { this. model = model; } // more. . . 27
View II public void paint(Graphics g) { g. set. Color(Color. red); g. fill. Oval(model. x. Position, model. y. Position, model. BALL_SIZE); controller. show. Status("Step " + (step. Number++) + ", x = " + model. x. Position + ", y = " + model. y. Position); } // end paint method 28
View III public void update(Observable obs, Object arg) { repaint(); } } // end class 29
View (repeated) View Paint the ball Get necessary info from Model 30
The Ball Applet: Controller n n The Controller tells the Model what to do The Controller tells the View when it needs to refresh the display The Controller doesn’t need to know the inner workings of the Model The Controller doesn’t need to know the inner workings of the View 31
Controller Create Model Create View Give. View access to Model Tell Model to advance Tell View to repaint Model View 32
Controller I import java. applet. *; java. awt. event. *; java. util. *; public class Controller extends JApplet { JPanel button. Panel = new JPanel(); JButton step. Button = new JButton("Step"); Model model = new Model(); View view = new View(); // more. . . 33
Controller II public void init() { // Lay out components set. Layout(new Border. Layout()); button. Panel. add(step. Button); this. add(Border. Layout. SOUTH, button. Panel); this. add(Border. Layout. CENTER, view); // more. . . 34
Controller III // Attach actions to components step. Button. add. Action. Listener(new Action. Listener() { public void action. Performed(Action. Event event) { model. make. One. Step(); } }); // more. . . 35
Controller IV // Tell the View about myself (Controller) and // about the Model model. add. Observer(view); view. controller = this; } // end init method // more. . . 36
Controller V public void start() { model. x. Limit = view. get. Size(). width - model. BALL_SIZE; model. y. Limit = view. get. Size(). height - model. BALL_SIZE; repaint(); } // end of start method } // end of Controller class 37
Controller (repeated) Controller Create Model Create View Give. View access to Model Tell Model to advance Tell View to repaint Model View 38
Key points n A Model does the “business logic” n n n The Controller organizes the program and provides input (control) to the Model The View displays what is going on in the model n n n It should be I/O free Communication with the Model is via methods This approach gives maximum flexibility in how the model is used It should never display what should be going on in the model For example, if you ask to save a file, the View shouldn’t itself tell you that the file has been saved—it should tell you what the model reports Especially in small programs, the Controller and View are often combined 39
The End 40
- What makes hard water hard pre lab answers
- Work hard play hard make history
- Hard times hard drive
- Obj dating
- Eclat algorithm
- Hình ảnh bộ gõ cơ thể búng tay
- Ng-html
- Bổ thể
- Tỉ lệ cơ thể trẻ em
- Chó sói
- Chụp phim tư thế worms-breton
- Chúa sống lại
- Môn thể thao bắt đầu bằng từ chạy
- Thế nào là hệ số cao nhất
- Các châu lục và đại dương trên thế giới
- Cong thức tính động năng
- Trời xanh đây là của chúng ta thể thơ
- Mật thư tọa độ 5x5
- Phép trừ bù
- độ dài liên kết
- Các châu lục và đại dương trên thế giới
- Thơ thất ngôn tứ tuyệt đường luật
- Quá trình desamine hóa có thể tạo ra
- Một số thể thơ truyền thống
- Cái miệng nó xinh thế chỉ nói điều hay thôi
- Vẽ hình chiếu vuông góc của vật thể sau
- Thế nào là sự mỏi cơ
- đặc điểm cơ thể của người tối cổ
- Ví dụ giọng cùng tên
- Vẽ hình chiếu đứng bằng cạnh của vật thể
- Fecboak
- Thẻ vin
- đại từ thay thế
- điện thế nghỉ
- Tư thế ngồi viết
- Diễn thế sinh thái là
- Dạng đột biến một nhiễm là
- Các số nguyên tố là gì
- Tư thế ngồi viết
- Lời thề hippocrates
- Thiếu nhi thế giới liên hoan