代写代考 Model View Controller

Model View Controller
Computer Science and Engineering  College of Engineering  The Ohio State University

Motivation

Copyright By PowCoder代写 加微信 powcoder

Computer Science and Engineering  The Ohio State University
Basic parts of any application:
The data is logically independent from
how it is displayed to the user
Example: grade distribution in class
Could be displayed as a pie chart, or a bar chart, or a cumulative fraction plot, or…
Data being manipulated
A user-interface through which this manipulation occurs
Display should be decoupled from content Single-point-of-control over change

Architecture: Desktop App
User Interface
Computer Science and Engineering  The Ohio State University
Graphical events (mouse moves, button pushed)
Processing, Calculating
Persistence, Transactions, Triggers
Application

Model-View-Controller Pattern
Translates user actions (i.e. interactions with view) into operations on the model
Example user actions: button clicks, menu selections
The data (i.e. state)
Methods for accessing and modifying state
Renders contents of model for user
When model changes, view must be updated
Controller
Computer Science and Engineering  The Ohio State University

Basic Interactions in MVC
Computer Science and Engineering  The Ohio State University
Controller “change data” “new state”
“user action”
“change display”

Implementing Basic MVC in Swing
Computer Science and Engineering  The Ohio State University
Mapping of classes to MVC parts
Alternative mapping
View is a Swing widget and includes (inner)
class(es) as event handlers
Controller is an ordinary Java class with
“business logic”, invoked by event handlers in view Model is an ordinary Java class (or database)
Difference: Where is the event listener?
Regardless, model and view are completely decoupled (linked only by controller)
View is a Swing widget (JFrame, JButton, etc.) Controller is an event handler (ActionListener) Model is an ordinary Java class (or database)

Wiring Parts Together
CalculatorView
Computer Science and Engineering  The Ohio State University
MultiplyListener
void actionPerformed
(ActionEvent e) {
CalculatorState
void multiplyBy (String arg) {

Configuration: Connecting Parts
Computer Science and Engineering  The Ohio State University
public class CalcView extends JFrame {
private JButton multiplyBtn = new JButton(“X”);
public void register(ActionListener x) { multiplyBtn.addActionListener(x);
public class CalcController {
view.register(new ActionListener() {
public void actionPerformed(ActionEvent e) {

Basic MVC in JavaScript
Computer Science and Engineering  The Ohio State University
Mapping of objects to MVC parts
Alternative mapping
Difference: Where is the event listener?
Regardless, model and view are completely decoupled (linked only by controller)
View is an HTML page
Controller is event handler, an ordinary JavaScript function
Model is an ordinary JavaScript object
Separate event handler(s) from controller Controller is an ordinary object with “business logic”, invoked by event handlers
Model is an ordinary object

Wiring Parts Together
Calculator.html
Computer Science and Engineering  The Ohio State University
ActionListener.js
function multiplyListener (event) {
CalculatorState.js
function multiplyBy (arg) {

Registering an Event Handler
Computer Science and Engineering  The Ohio State University
Three techniques, ordered from:
Oldest (most brittle, most universal) to
…
2. Direct (link in JavaScript)
var e = … //find source element in tree e.onclick = foo;
3. Chained (In JavaScript, browser differences) var e = … //find source element in tree e.addEventListener(“click”, foo, false);
Newest (most general, least standard) 1. Inline (link in HTML itself)

程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com