Architectural Patterns

Architectural Patterns

Support Lecture

Patterns

Pattern: A representation of a proven solution.

Problem

Applicable Forces

Solution

ConsequencesBenefits

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.

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.

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 Model View Controller – our focus Application Controller Input Controller

• Page Controller• Front Controller

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

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.


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


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.


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.


Scenario 1:Membership Application

First Name

Last Name

Phone Number Format xxx-xxx-xxxx

Credit Card Number

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


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


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


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


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


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.


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.


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


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


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


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


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


We then add the action listener as an anomalous listener instance with the embedded action listener for ONLY the textfield.

Controller


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


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


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


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



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.



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



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


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

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)


Driver

It then invokes the Member class with no parameters, the MemberView class with no parameters, and the MemberController with two parameters..

create ()

MemberMemberView

create ()

MemberController

create (member, membertView)

Container

create ()

getContentPane ()

setLayout (newGridLayout)


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 ()

MemberMemberView

create ()

MemberController

create (member, memberView)

Container

create ()

getContentPane ()

setLayout (newGridLayout ())

add (membertView)

edit ()

setBounds()


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


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


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


Scenario 1:

When the applet appears, you can enter the firstName and lastName, etc.

Membership Application

First Name

Last Name


Credit Card Number

Email Address





SUBMIT


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.


Scenario 2:Membership Application

First Name

Last Name


Credit Card Number

Email Address





SUBMIT

This applet displays the data in the model upon construction.


Scenario 2:

The View will be the same.

The Model or Record will also be the same.


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.


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.



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

Architectural Patterns

Documents

Transcript of Architectural Patterns