43
CS 415 N-Tier Application Development By Umair Ashraf June 25 ,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns (MVC, Page Controller, Front Controller)

CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Embed Size (px)

Citation preview

Page 1: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

CS 415 N-Tier Application Development

By Umair Ashraf

June 25 ,2013

National University of Computer and Emerging Sciences

Lecture # 4

Web Presentation Patterns (MVC, Page Controller, Front Controller)

Page 2: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Contents MVC (Model, View Controller) Pattern

Web Presentation Patterns: MVC (Model, View Controller) Pattern Page Controller Pattern Front Page Controller Pattern

Practical Demonstration

Page 3: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 4: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 5: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 6: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 7: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 8: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 9: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 10: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 11: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 12: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 13: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 14: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 15: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 16: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 17: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 18: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 19: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 20: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 21: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 22: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public interface BeatModelInterface {void initialize();

void on();

void off();

void setBPM(int bpm);

int getBPM();

void registerObserver(BeatObserver o);

void removeObserver(BeatObserver o);

void registerObserver(BPMObserver o);

void removeObserver(BPMObserver o);}

Page 23: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public class BeatModel implements BeatModelInterface, MetaEventListener {

Sequencer sequencer;ArrayList beatObservers = new ArrayList();ArrayList bpmObservers = new ArrayList();int bpm = 90;//other instance variables here

public void initialize() {

setUpMidi();buildTrackAndStart();

}

public void on() {sequencer.start();setBPM(90);

}

public void off() {setBPM(0);sequencer.stop();

}

Page 24: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public void setBPM(int bpm) {this.bpm = bpm;

sequencer.setTempoInBPM(getBPM());notifyBPMObservers();

}

public int getBPM() {return bpm;

}

void beatEvent() {notifyBeatObservers();

}

//code to register and notify observers

//Lots of MIDI code to handle the beat

}

Page 25: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 26: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 27: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public class DJView implements ActionListener, BeatObserver, BPMObserver {

BeatModelInterface model;ControllerInterface controller;JFrame viewFrame;JPanel viewPanel;BeatBar beatBar;JLabel bpmOutputLabel;

public DJView(ControllerInterface controller, BeatModelInterface model) {

this.controller = controller;this.model = model;model.registerObserver((BeatObserver)this);model.registerObserver((BPMObserver)this);

}

public void createView() {//Create all Swing components here

}

Page 28: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public void updateBPM() {int bpm = model.getBPM();if (bpm == 0) {

bpmOutputLabel.setText("offline");} else {

bpmOutputLabel.setText("Current BPM: " + model.getBPM());

}}

public void updateBeat() {

beatBar.setValue(100);}

}

Page 29: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public class DJView implements ActionListener, BeatObserver, BPMObserver {

BeatModelInterface model;ControllerInterface controller;JLabel bpmLabel;JTextField bpmTextField;JButton setBPMButton;JButton increaseBPMButton;JButton decreaseBPMButton;JMenuBar menuBar;JMenu menu;JMenuItem startMenuItem;JMenuItem stopMenuItem;

public void createControls() {//Create all Swing components here

}

Page 30: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public void enableStopMenuItem() { stopMenuItem.setEnabled(true);

}public void disableStopMenuItem() { stopMenuItem.setEnabled(false);}public void enableStartMenuItem() { startMenuItem.setEnabled(true);}public void disableStartMenuItem() {

startMenuItem.setEnabled(false);}

public void actionPerformed(ActionEvent event) {if (event.getSource() == setBPMButton) {

int bpm = Integer.parseInt(bpmTextField.getText()); controller.setBPM(bpm);

} else if (event.getSource() == increaseBPMButton) {controller.increaseBPM();

} else if (event.getSource() == decreaseBPMButton) {controller.decreaseBPM();

}}

}

Page 31: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public interface ControllerInterface {void start();void stop();void increaseBPM();void decreaseBPM();

void setBPM(int bpm);}

Page 32: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 33: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public class BeatController implements ControllerInterface {BeatModelInterface model;DJView view;

public BeatController(BeatModelInterface model) {

this.model = model;view = new DJView(this, model);

view.createView(); view.createControls();

view.disableStopMenuItem();view.enableStartMenuItem();model.initialize();

}

public void start() {model.on();view.disableStartMenuItem();view.enableStopMenuItem();

}

Page 34: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public void stop() {model.off();view.disableStopMenuItem();view.enableStartMenuItem();

}

public void increaseBPM() { int bpm = model.getBPM();

model.setBPM(bpm + 1);}

public void decreaseBPM() {

int bpm = model.getBPM();model.setBPM(bpm - 1);

} public void setBPM(int bpm) {

model.setBPM(bpm);}

}

Page 35: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

public class DJTestDrive {

public static void main (String[] args) {BeatModelInterface model = new BeatModel();ControllerInterface controller = new

BeatController(model);}

}

Page 36: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns
Page 37: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

LUDO Game in MVC

Page 38: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

MVC implementation in ASP.NET

Practical Demonstration

Page 39: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Page Controller Pattern

Use the Page Controller pattern to accept input from the page request, invoke the requested actions on the model, and determine the correct view to use for the resulting page

Page 40: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Page Controller Pattern

Page 41: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Page Controller in ASP.NET

Page 42: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Front Page Controller Pattern

Front Controller solves the decentralization problem present in Page Controller by channeling all requests through a single controller. The controller itself is usually implemented in two parts: a handler and a hierarchy of commands 

Page 43: CS 415 N-Tier Application Development By Umair Ashraf June 25,2013 National University of Computer and Emerging Sciences Lecture # 4 Web Presentation Patterns

Reference Material

Text Book :Head First Design Patterns by GOF(EBook uploaded on website )

Web Presentation Patterns :

http://msdn.microsoft.com/en-us/library/ff650511.aspx