Example: not good design. Motivation for MVC. public class BankAccount extends JPanel implements ActionListener

Transcription

1 References: Teach Yourself Programming in 21 Days, Anthony Sintes; Rick Mercer;Beginning Java Objects, Jacquie Barker; 3/2/ Motivation for MVC Decoupled UIs are good One model may have several user interfaces Web, phone, PDA, GUI on a desktop Each UI will hook into the same model But allow IO in different ways Desired: change UI without changing the model Desired: change the model without changing the UI Do not imbed the UI code inside the model Keep the two separate 3/2/ Example: not good design public class BankAccount extends JPanel implements ActionListener there is no bank account, which could be the "model" Having the logic in the listener tightly couples the model with the UI 3/2/

2 BankAccount is Not Decoupled UI is not decoupled from BankAccount class Bank account cannot be used in other forms of user interfaces The GUI should not have the rules 3/2/ MVC Defined MVC logically separates object data itself (model), from the presentation logic (view) and modification logic (controller) for that data. Model: Represents system with the business logic View: Displays the model Controllers : Handle user interaction and send correct messages to the model and/or view 3/2/ Model The Model's responsibilities Provide access to the state of the system Provide access to the system's functionality Can notify the view(s) that its state has changed 3/2/

3 Controller The controller's responsibilities Accept user input Button clicks, key presses, mouse movements, slider bar changes Send messages to the model, which may in turn notify its observers Send appropriate messages to the view In Java, listeners are controllers 3/2/ View The view's responsibilities Displaying the state of the model to the user At some point, the model (a.k.a. the observable) must register the views (a.k.a. observers) so the model can notify the observers that its state has changed 3/2/ How to set up MVC Develop and program the model * Implement the observer pattern with your model to make updating the view objects more intuitive. Design and program 1-many views of model object, and potentially some functionality (such as editing) Hook model and view together using event handling * Implement the strategy pattern with your controllers to make them easily pluggable into the view. 3/2/2004 * Denotes this is optional 9 3

4 Benefits of MVC Can add or change view if necessary without touching the model Provide many different views of the same model View contents of a directory as large icons or as detailed list 3/2/ Model is view-free The view can see the model, but the model cannot see the view The appearance of an application can change without the underlying structure changing Model can be developed without regard for the view 3/2/ MVC and Observer Pattern in Java Observer pattern A design for publish/subscribe mechanism among objects observer object registers interest in observable object when observable wants to notify observers of a change, it calls update() method on each observer all observers that want to register with observable object must implement Observer interface 3/2/

5 public class BankAccountModel { private double balance; private ArrayList listeners = new ArrayList(); public BankAccountModel (double initdeposit) { setbalance( initdeposit ); public void depositfunds(double amount) { setbalance(getbalance() + amount); public double withdrawfunds(double amt) { if(amount > getbalance() { amount = getbalance(); setbalance(getbalance() - amount); return amount; public void register (Observer o) { listeners.add( o ); o.update(); public double getbalance() { return balance; public void deregister ( Observer o ) { listeners.remove( o ); protected void setbalance(double newbal) { balance = newbal; private void updateobservers () { updateobservers (); Iterator i = listeners.iterator(); while ( i.hasnext() ) { Observer o = (Observer) I.next(); BankAccountModel.java o.update(); (author: 3/2/2004 Sintes) 13 BankAccountView.java(Sintes) //import swing classes public class BankAccountView extends Jpanel implements Observer { public final static String DEPOSIT = Deposit ; public final static String WITHDRAW = Withdraw ; private BankAccountModel model private BankAccountController controller; // define GUI elements: buttons, text fields public BankAccountView(BankAccountModel model) { this.model = model; this.model.register ( this ); attachcontroller( makecontroller() ); buildui(); bank account view registers self with model //called by model when model changes public void update() { balancelabel.settext( Balance: + model.getbalance() ); bank account view creates controller and attaches itself to its controller 3/2/ BankAccountView.java (Sintes) //provides access to amount entered into the field public double getamount() { //assume user entered a valid number return Double.parseDouble( amountfield.gettext() ); //wires the given controller to the view, allows outside object to set controller public void attachcontroller ( BankAccountcontroller controller ) { //each view can only have one controller, so remove old one first if (this.controller!= null ) { depositbutton.removeactionlistener( controller ); withdrawbutton.removeactionlistener( controller ); this.controller = controller; depositbutton.addactionlistenrer ( controller ); withdrawbutton.addactionlistener ( controller ); protected BankAccountController makecontroller() { return new BankAccountController ( this, model); 3/2/

6 BankAccountView.java(Sintes) private void buildui() { setlayout( new BorderLayout() ); //associate each button with a command string. the controller will use //this string to interpret events depositbtton.setactioncommand ( DEPOSIT ); withdrawbutton.setactioncommand ( WITHDRAW ); //build the display JPanel buttons = new Jpanel( new BorderLayout() ); Jpanel balance = new Jpanel( new BorderLayout() ); buttons.add( depositbutton, BorderLayout.WEST ); buttons.add( withdrawbutton, BorderLayout.EAST ); balance.add( balancelabel, BorderLayout.NORTH ); balance.add( amountfield, BorderLayout.SOUTH ); add( balance, BorderLayout.NORTH ); add( buttons, BorderLayout.SOUTH ); //end BankAccountView 3/2/ BankAccountController.java(Sintes) import java.awt.event.actionlistener; import java.awt.event.actionevent; public class BankAccountController implements ActionListener { private BankAccountView view; //used to get amounts from entry field private BankAccountModel model; //used to withdraw/deposit money into account public BankAccountController( BankAccountView view, BankAccountModel model ) { this.view = view; this.model = model; public void actionperformed( ActionEvent e ) { String command = e.getactioncommand(); double amount = view.getamount(); Controller interprets if ( command.equals( view.withdraw ) ) { events as it model.withdrawfunds( amount ); receives them else if( command.equals( view.deposit ) ) { model.depositfunds( amount ); 3/2/ import java.awt.event.*; import javax.jframe; MVDDriver.java (Sintes) public class MVCDriver { public static void main ( String[] args ) { BankAccountModel model = new BankAccountModel( ); BankAccountView view = new BankAccountView( model ); BankAccountCLV clv = new BankAccountCLV ( model ); JFrame frame = new JFrame(); WindowAdapter wa = new WindowAdapter(0 { public void windowclosing( WindowEvent e ) { System.exit( 0 ); ; frame.addwindowlistener( wa ); frame.getcontentpane().add( view ); frame.pack(); frame.show(); 3/2/

7 Observer Pattern About Observer: Category: Behavioral Often a change to data requires a large number of disparate changes to occur (update 2 screens, send an , save something to a file, etc). The observer pattern provides a generic format to notify many observers in a change to an observable The observable object, when changed, notifies all observer objects that it was changed, allowing each in turn to perform some functionality. Usually, the model part of MVC is implemented as observable (the object to be watched), and the views are implemented as observers (the objects to do the watching); therefore when the model changes, the views are automatically updated. 3/2/ Component Diagram Note: A component diagram and subsequently, components, are used to describe this pattern (as opposed to classes) because the model, controller, and view may not be one object, but a combination of many. From ( Stephen Stelting, Olav Maassen, Applied Java Patterns) 3/2/ Class Diagram (Observer) From (Stephen Stelting, Olav Maassen, Applied Java Patterns) 3/2/

8 MVC Problems - #1 Emphasis on data instead of asking object to do something with its data, view asks model for data and then displays it advice display only the data that you remove from the model if you repeat same code in more than one view, move that logic into the model 3/2/ MVC Problems - #2 Tight coupling between view/controller and the model changes in model s interface require changes in both view and controller use MVC when model is stable and view unlikely to change 3/2/ MVC Problems - #3 Opportunity for inefficiency model can propagate unnecessary state change notifications to its observers some solutions queue related change notifications and let one notification relay several state changes Java s AWT event model does this: instead of redrawing after each event, AWT queues up events and does one redraw can cache data if model is slow; after state change notification, only retrieve the state that changed 3/2/