1 / 45

MVC Architectural Pattern Overview for Software Development

Learn about Model-View-Controller (MVC) pattern in software architecture, its components, benefits, and implementation for efficient application development.

rcouto
Download Presentation

MVC Architectural Pattern Overview for Software Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Support Lecture Architectural Patterns

  2. Patterns Pattern: A representation of a proven solution. Problem Applicable Forces Solution Consequences Benefits

  3. Software Architecture • Architecture is OVERLOADED • System architecture • Application architecture • Architecture for this presentation is • The modules, processes, interconnections, and protocols which constitute the deployed software system. • Different from the behavioral architecture which describes how the business classes execute the business processes.

  4. Architecture Specification • Document which defines in text and diagrams the design, flow and technologies of the design. • Shows how persistence, communication, and behavior are to be implemented in the system.

  5. Architectural Layers - Patterns • Presentation • interactions with the user – HTML, thick client, MVC, web services • Domain (Logic) • Business rules, validations, calculations, verifications • Data Storage • database • Environmental • Session management, messaging

  6. Presentation Architectural Patterns • Model View Controller – our focus • Application Controller • Input Controller • Page Controller • Front Controller • View Controller • Template View • Transform View • Two Step View

  7. Model View Controller Model View Controller (MVC) – an architectural pattern that modularizes GUI applications into three well-formed object-oriented components namely the view (presentation) component, the model (data) component, and the controller (action) component. WHY? We use MVC because of REUSE : one screen view may be used with various controllers one data model may be used with many screens

  8. Model View Controller 1. When a user modifies the view on the screen VIEW 3. The model validates the change and updates the view. 2. The controller modifies the model with the new input. MODEL Controller

  9. Model View Controller • There are various uses for the MVC application pattern such as • Simple division of responsibilities • Allowing one view and multiple controllers. • Allowing one model with multiple views. • Allowing one view and multiple models

  10. Model View Controller • Our MVC example will have one view and two controllers. One controller will allow viewing of the value of an item. The other controller will allow the editing of the field. • We will ONLY have the view items in the view including a get method allowing the return of a specific graphical component to the controller to attach an action listener. • We will define two controllers – one for displaying the data, the other for editing. • We will have one model to hold the data.

  11. Model View Controller Scenario 1: We want to use our screen for the VRS to allow the customer to enter their member information. We will need several classes. One for the member – the model class information (this could be multiple classes), one for the member display or view(again this could be multiple classes), one for the controller for that view (at least one for each view), and one for the database table for updating the database.

  12. Membership Application Format 8 to 20 alphabetic characters First Name Last Name Format 8 to 20 alphabetic characters Phone Number Format xxx-xxx-xxxx Credit Card Number Only Master Card Accepted Expiration Date Format MMYYYY Email Address SUBMIT Model View Controller Scenario 1:

  13. Model View Controller Example First lets look at the View Define the View with a name that allows you to realize it is indeed a view. Define the components within the view. import java.applet.*; import java.awt.*; import javax.swing.*; public class MemberView extends Panel { private JLabel firstNameLabel; private JTextField firstNameTextField; private JLabel lastNameLabel; private JTextField lastNameTextField; ……// others

  14. Model View Controller Example View Add two methods that return the components needing the action listeners. public JTextField getFirstNameTextField() { return firstNameTextField; } // end getFirstNameTextField public JTextField getLastNameTextField() { return lastNameTextField; } // end getLastNameTextField Note: these methods return the actual instance of the components so that the controller can add the action listeners.

  15. Model View Controller Example View public void addFirstNameLabel() { firstNameLabel = new JLabel(“First Name"); add(firstNameLabel); firstNameLabel.setBounds (10,10,100,25); } // end addFirstNameLabel public void addFirstNameTextField() { firstNameTextField = new JTextField(); addfirstNameTextField); firstNameTextField.setBackground (Color.yellow); firstNameTextField.setBounds (80,10,100,25); } // end addFirstNameTextField Add the first name label and textfield to the component in their respective methods.

  16. Model View Controller Example View public void addLastNameLabel() { lastNameLabel = new JLabel(“Last Name"); add(lastNameLabel); lastNameLabel.setBounds (200,10,180,25); } // end addLastNameLabel public void addLastNameTextField() { lastNameTextField = new JTextField (); add(lastNameTextField); lastNameTextField.setBackground (Color.red); lastNameTextField.setBounds ( 400,10,60,25); } // end addLastNameTextField Add the last name label and textfield in their respective methods.

  17. Model View Controller Example View public MembertView ( ) { setLayout(null); addFirstNameLabel(); addFirstNameTextField(); addLastNameLabel(); addLastNameTextField(); setSize (350,350); } // end constructor } // end View Not in the constructor, you can set the layout to null so you can use the direct positioning, add the four components and set the size of the panel. This completes the view.

  18. Model View Controller Example Now lets look at the Model or Record. public class Member { private String firstName; private String lastName; …….// other elements public void setFirstName (String firstName) { this.firstName = firstName; } public void setLastName (String lastName) { this.lastName= lastName;} ….. public String getFirstName() { return firstName; } public String getLastName() { return lastName;} ……. public Member () { firstName = new String("Sara"); lastName = new String (“Stoecklin"); } // end constructor } // end class We have defined our model as a record with the necessary data.

  19. Model View Controller Example Now lets look at the Controller. First, we define the components which we wish to add action listerners namely the firstName and lastName textfield. import java.awt.*; import java.awt.event.*; import java.io.*; import javax.swing.*; public class MemberController implements WindowListener { private JTextField firstNameTextField; private JTextField lastNameTextField; MemberView memberView; Memberl member; Then we define both the view namely MemberView and the model called Member.

  20. Model View Controller Example Controller public MemberController (MemberView memberView) { this.memberView = memberView; member = new Member(); setFirstNameTextField (); setLastNameTextField(); } // end constructor In the constructor, we pass the name of the view we wish to use for this controller.

  21. Model View Controller Example Controller public MemberController (MemberView memberView) { this.memberView = memberView; member = new Member(); } // end constructor We then make an instance of both the view and the model .

  22. Model View Controller Example Controller public void editView ( ) { setFirstNameTextField (); setLastNameTextField(); } // end editView We then call two methods, one method to set up the firstName textfield with an action listener and the other to set up the lastName textfield’s listener.

  23. Model View Controller Example Controller public void setFirstNameTextField() { nameTextField = memberView.getFirstNameTextField(); firstNameTextField.addActionListener (new ActionListener() { public void actionPerformed (ActionEvent e) { member.setFirstName(nameTextField.getText()); System.out.println (“Member First Name: " + member.getFirstName()); } // end actionPerformed } // end new );// end addActionListener parameter } // end setFirstNameTextField() In this method we first get the name textfield from the view using the get method in the view class. .

  24. Model View Controller Example Controller We then add the action listener as an anomalous listener instance with the embedded action listener for ONLY the textfield. public void setFirstNameTextField() { firstNameTextField = memberView.getFirstNameTextField(); firstNameTextField.addActionListener (new ActionListener() { public void actionPerformed (ActionEvent e) { member.setFirstName(firstNameTextField.getText()); System.out.println (“Member First Name: " + member.getFirstName()); } // end actionPerformed } // end new );// end addActionListener parameter } // end setFirstNameTextField()

  25. Model View Controller Example Controller Set the Name in the model (record) to the name keyed in the text when the textfield encounters an enter action. Then print the field public void setNameTextField() { nameTextField = MemberView.getNameTextField(); nameTextField.addActionListener (new ActionListener() { public void actionPerformed (ActionEvent e) { member.setName(nameTextField.getText()); System.out.println (“Member First Name: " + member.getFirstName()); } // end actionPerformed } // end new );// end addActionListener parameter } // end setFirstNameTextField()

  26. Model View Controller Example Controller public void setLastNameTextField() { lastNameTextField = memberView.getLastNameTextField(); lastNameTextField.addActionListener (new ActionListener() { public void actionPerformed (ActionEvent e) { memberRecord.setLastName(lastNameTextField.getText()); System.out.println (“Member Last Name: " + member.getLastName()); } // end actionPerformed } // end new );// end addActionListener parameter } // end seLasttNameTextField() The DOB textfield follows the same pattern.

  27. Model View Controller Example Controller public void windowClosing (WindowEvent e) { System.exit(0); } // end windowClosing public void windowClosed (WindowEvent e) { System.exit(0); } // end windoeClosed public void windowOpened(WindowEvent e) { } public void windowIconified (WindowEvent e) { } public void windowDeiconified(WindowEvent e) { } public void windowActivated(WindowEvent e) { } public void windowDeactivated(WindowEvent e) { } } // end class End the class.

  28. Model View Controller Example Now the Applet. Your use case controller. import java.applet.*; import java.awt.*; import javax.swing.*; public class MVC extends JApplet { privateMemberView mvcMemberView; private Member mvcMember; private MemberController mvcMemberController; private Container container; public void init( ) { container = getContentPane(); container.setLayout (new GridLayout()); mvcMemberView = new MemberView (); mvcMemberController = new MemberController(mvcMemberView); mvcMemberController.editview(); container.add (mvcMemberView); container.setBounds (50,50,500,500); } // end init } // end MVC Set up the view, record and controller variables.

  29. Model View Controller Example Applet your use case controller import java.applet.*; import java.awt.*; import javax.swing.*; public class MVC extends JApplet { private MemberView mvcMemberView; private MemberRecord mvcMemberRecord; private MemberController mvcMemberController; private Container container; public void init( ) { container = getContentPane(); container.setLayout (new GridLayout()); mvcMemberView = new MemberView (); mvcMemberController = new MemberController(mvcMemberView); mvcMemberController.editView(); container.add (mvcMemberView); container.setBounds (50,50,500,500); } // end init } // end MVC Make an instance of the view. Make an instance of the controller passing the view as a parameter.

  30. Model View Controller Example Applet - your use case controller import java.applet.*; import java.awt.*; import javax.swing.*; public class MVC extends JApplet { private MemberView mvcMemberView; private Member mvcMemberRecord; private MemberController mvcMemberController; private Container container; public void init( ) { container = getContentPane(); container.setLayout (new GridLayout()); mvcMemberView = new MemberView (); mvcMemberController = new MemberController(mvcMemberView); mvcMemberController.editView(); container.add (mvcMemberView); container.setBounds (50,50,500,500); } // end init } // end MVC Call the editView routine to allow the textfields to be connected to the action listener.

  31. Model View Controller Once you begin having many interacting classes, some type of diagram abstraction is most helpful in making changes to the design of your system. The Unified Modeling Language (UML) is a good tool for modeling these class interactions. We will first model the MVC example using the application rather than the applet.

  32. Model View Controller The line represents a class or instance of a class. Instances are represented by an underlined class name. REMEMBER: not all developers use a driver. Instead they have the controlling class drive the application. We use one because it makes teaching and understanding easier. UseCase

  33. Model View Controller Container UseCase create () getContentPane () setLayout (newGridLayout) These lines represent the invoking of the constructor for the Container with calls to the methods getContentPane and setLayout for new GridLayout.

  34. Model View Controller Member View Member Controller Member Container Driver create () getContentPane () setLayout (newGridLayout) create () create () create (member, membertView) It then invokes the Member class with no parameters, the MemberView class with no parameters, and the MemberController with two parameters..

  35. Model View Controller Member View Member Controller Member Container Use Case create () getContentPane () setLayout (newGridLayout ()) create () create () create (member, memberView) add (membertView) edit () setBounds() We then add the member view panel to the container. And then we call the edit routine in the controller. We then setBounds and make the frame viewable.

  36. Model View Controller Example Now the Application if you did not want an applet import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Application extends JFrame implements WindowListener{ private Container container; private MemberController memberController; // change this line private Member member; private MemberView memberView; Declare the variables for the controller, record and the view.

  37. Model View Controller Example Now the Application public Application ( ) { super ("Test for Application GUI"); container = getContentPane(); container.setLayout(new GridLayout()); member = new MemberRecord (); memberView = new MemberView(); memberController = new MemberController(memberView, memberRecord); container.add (memberView); memberController.editView(); container.setBounds (10,10,700,700); setSize (700,700); setVisible (true); } // end constructor Create instances of the view and the record and of the MemberController with the parameters of the view and the record. Call the editView routine in the controller.

  38. Model View Controller Example Now the Application public void windowClosing (WindowEvent e) { System.exit(1); } // end windowClosing public void windowClosed (WindowEvent e) { } public void windowOpened(WindowEvent e) { } public void windowIconified (WindowEvent e) { } public void windowDeiconified(WindowEvent e) { } public void windowActivated(WindowEvent e) { } public void windowDeactivated(WindowEvent e) { } public static void main (String args [ ] ) { Application myApplication = new Application(); myApplication.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE); } // end main } // end Application Perform the necessary window activity.

  39. Membership Application Format 8 to 20 alphabetic characters First Name Last Name Format 8 to 20 alphabetic characters Phone Number Format xxx-xxx-xxxx Credit Card Number Only Master Card Accepted Expiration Date Format MMYYYY Email Address SUBMIT Model View Controller Scenario 1: When the applet appears, you can enter the firstName and lastName, etc.

  40. Model View Controller Scenario 2: Now write more code that allows ONLY displaying of the data within the record and does not allow editing those fields. You should be able to reuse some classes.

  41. Membership Application Format 8 to 20 alphabetic characters First Name Last Name Format 8 to 20 alphabetic characters Phone Number Format xxx-xxx-xxxx Credit Card Number Only Master Card Accepted Expiration Date Format MMYYYY Email Address SUBMIT Model View Controller Scenario 2: This applet displays the data in the model upon construction.

  42. Model View Controller Example Scenario 2: The View will be the same. The Model or Record will also be the same.

  43. Model View Controller Now lets look at the Controller. We will need three new methods. One for allowing non editable viewing of the firstName textfield. One for allowing non editable viewing of the lastName textfield. One method called by the driver to call these methods.

  44. Model View Controller This method called by the driver. Controller These methods allow display of the data in the model and prohibits it from editing. public void displayView () { displayFirstNameTextField (); displayLastNameTextField(); } // end display view public void displayNameTextField() { firstNameTextField = memberView.getFirstNameTextField(); firstNameTextField.setText(member.getFirstName()); firstNameTextField.setEditable(false); } // end viewFirstNameTextField() public void displayLastNameTextField() { lastNameTextField = memberView.getLastNameTextField(); lastNameTextField.setText(member.getLastName()); lastNameTextField.setEditable(false); } // end viewNameTextField()

  45. Model View Controller Applet import java.applet.*; import java.awt.*; import javax.swing.*; public class MVCDisplay extends JApplet { privateMemberView mvcMemberView; private Member mvcMember; private MemberController mvcMemberController; private Container container; public void init( ) { container = getContentPane(); container.setLayout (new GridLayout()); mvcMemberView = new MemberView (); mvcMemberController = new MemberController(mvcMemberView); mvcMemberController.displayView(); container.add (mvcMemberView); container.setBounds (50,50,500,500); } // end init } // end MVC This applet calls the displayView method.

More Related