[SOLVED] Model View Controller

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

Motivation

Copyright By Assignmentchef assignmentchef

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)

Basic MVC in Objective-C
Computer Science and Engineering The Ohio State University

Implementing MVC in XCode
Computer Science and Engineering The Ohio State University

Implementing MVC in XCode
Computer Science and Engineering The Ohio State University

Basic Web App Skeleton: 3-Tier
Computer Science and Engineering The Ohio State University
User Interface
http HTML, CSS, Javascript Application

MVC in a Web Application
HTML (+ CSS, JavaScript) files rendered by
clients browser
Database (table with rows)
Classes that wrap database operations (class with instances)
Controller
Skeleton files used by server to generate these HTML files
Receives HTTP requests via web server Orchestrates activity (model and view)
Computer Science and Engineering The Ohio State University

MVC with Rails
Computer Science and Engineering The Ohio State University

MVC with Rails
Computer Science and Engineering The Ohio State University

Directory Structure of Rails
Computer Science and Engineering The Ohio State University
../controllers
../helpers
../models
../views
../layouts
./components
./config
./public
./script
./vendor
.README
.Rakefile

Convention Over Configuration
Computer Science and Engineering The Ohio State University
Use naming & location conventions to
wire components together implicitly
Explicit routing too, based on names
and pattern matching
Contrast with:
Configuration files (e.g., XML) Configuration code (e.g., Swing register listener)
Configuration tools (e.g., IDEs to connect GUI widgets to code snippets)

Wiring Parts Together in Rails
Computer Science and Engineering The Ohio State University
Example: Event -> Controller wiring
HTTP GET request for URL /say/hello gets routed to controller:
Class called SayController
File say_controller.rb in app/controllers Method hello
Example: Controller -> View wiring
HTTP response formed from:
File app/views/say/hello.html.erb
Example: Model -> Database wiring
Class Order maps to database table orders
Attributes of Order map to columns of table Instances of Order map to a rows of table

Computer Science and Engineering The Ohio State University
Programming Patterns
Common idioms for solving categories of problems
Example: Observer pattern, MVC
Separation of concerns
Rails: Convention over configuration Parts are wired together based on naming and structuring conventions
Defaults can always be overridden (but better not to fight!)
Decouple state from business logic Decouple business logic from display

CS: assignmentchef QQ: 1823890830 Email: [email protected]