Architectural Patterns Support Lecture

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

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

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

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

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

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

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

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

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. A.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. B.We will define two controllers – one for displaying the data, the other for editing. C.We will have one model to hold the data.

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.

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

Model View Controller Example 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 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.

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

Model View Controller Example 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. View

Model View Controller Example 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. View

Model View Controller Example 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. View

Model View Controller Example 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. Now lets look at the Model or Record.

Model View Controller Example 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. Now lets look at the Controller. First, we define the components which we wish to add action listerners namely the firstName and lastName textfield.

Model View Controller Example 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. Controller

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

Model View Controller Example 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. Controller

Model View Controller Example 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.. Controller

Model View Controller Example 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() We then add the action listener as an anomalous listener instance with the embedded action listener for ONLY the textfield. Controller

Model View Controller Example 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() 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 Controller

Model View Controller Example 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. Controller

Model View Controller Example 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. Controller

Model View Controller Example 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. Now the Applet. Your use case controller.

Model View Controller Example 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. Applet your use case controller

Model View Controller Example 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. Applet - your use case controller

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.

Model View Controller UseCase 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.

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

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

Model View Controller Use Case 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. create () Member View create () Member Controller create (member, memberView) Container create () getContentPane () setLayout (newGridLayout ()) add (membertView) edit () setBounds()

Model View Controller Example 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. Now the Application if you did not want an applet

Model View Controller Example 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. Now the Application

Model View Controller Example 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. Now the Application

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

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.

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

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

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.

Model View Controller Controller 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() This method called by the driver. These methods allow display of the data in the model and prohibits it from editing.

Model View Controller 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. Applet