Support Lecture

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





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.



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.

• 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





• Page Controller
• Front 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

2. The controller modifies the model with the new input.
Model View Controller
1. When a user modifies the view on the screen
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
Credit Card Number
Format 8 to 20 alphabetic characters
Format 8 to 20 alphabetic characters
Format xxx-xxx-xxxx
Only Master Card Accepted
Format MMYYYY Expiration Date
Email Address SUBMIT

Model View Controller Example
Define the View with a name that allows you to realize it is indeed a 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
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.

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.

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.

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.

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.

Model View Controller Example
Now lets look at the Controller.
import java.awt.*; import java.awt.event.*; import java.io.*; import javax.swing.*;
First, we define the components which we wish to add action listerners namely the firstName and lastName textfield. 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.

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.

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 .

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.

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 name textfield from the view using the get method in the
} // end setFirstNameTextField() view class. .

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

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

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.

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.

Model View Controller Example
import java.applet.*; import java.awt.*; import javax.swing.*;
Set up the view, record and controller variables. 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

Model View Controller Example
import java.applet.*; import java.awt.*; import javax.swing.*;
Make an instance of the view.
private MemberRecord mvcMemberRecord; private MemberController mvcMemberController; private Container container;
Make an instance of the controller passing the view as a parameter. 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

Model View Controller Example
import java.applet.*; import java.awt.*; import javax.swing.*; Call the editView routine to public class MVC extends JApplet { private MemberView mvcMemberView; private Member mvcMemberRecord; private Container container; allow the textfields to be connected to the action listener. private MemberController mvcMemberController; 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

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.

UseCase
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.

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

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

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

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.

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.

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.

Model View Controller
Scenario 1:
Membership Application
When the applet appears, you can enter the firstName and lastName, etc.
First Name
Last Name
Phone Number
Credit Card Number
Expiration Date
Format 8 to 20 alphabetic characters
Format 8 to 20 alphabetic characters
Format xxx-xxx-xxxx
Only Master Card Accepted
Format MMYYYY
Email Address 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
This applet displays the data in the model upon construction.
First Name
Last Name
Phone Number
Credit Card Number
Format 8 to 20 alphabetic characters
Format 8 to 20 alphabetic characters
Format xxx-xxx-xxxx
Only Master Card Accepted
Format MMYYYY Expiration Date
Email Address SUBMIT

Model View Controller Example
Scenario 2:

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
This method called by the driver.
Controller public void displayView () { displayFirstNameTextField (); displayLastNameTextField();
} // end display view
These methods allow display of the data in the model and prohibits it from editing. 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()

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;
This applet calls the public void init( ) { container = getContentPane(); container.setLayout (new GridLayout()); mvcMemberView = new MemberView (); displayView method. mvcMemberController = new MemberController(mvcMemberView); mvcMemberController.displayView(); container.add (mvcMemberView); container.setBounds (50,50,500,500);
} // end init
} // end MVC