Object-Oriented Analysis and Design

Slides:



Advertisements
Similar presentations
OOP Design Patterns Chapters Design Patterns The main idea behind design patterns is to extract the high level interactions between objects and.
Advertisements

Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Automating Tasks With Macros
1 Model View Controller. 2 Outline Review Definitions of MVC Why do we need it? Administiriva Changing the display Event flow Dragging at interactive.
Graphical User Interface (GUI) Nelson Padua-Perez Bill Pugh Department of Computer Science University of Maryland, College Park.
Swing CS-328 Dick Steflik John Margulies. Swing vs AWT AWT is Java’s original set of classes for building GUIs Uses peer components of the OS; heavyweight.
Chapter Day 10. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 10 Questions from last Class?? Problem set 2 posted  10 programs from.
Automating Tasks With Macros. 2 Design a switchboard and dialog box for a graphical user interface Database developers interact directly with Access.
Graphical User Interface (GUI) Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
0 CS 160: Design Process: Implement Event-based UI Programming, Model-View-Controller, and the Web Jeffrey Nichols IBM Almaden Research Center
MVC Fall 2005 OOPD John Anthony. Design Patterns The hard problem in O-O programming is deciding what objects to have, and what their responsibilities.
Application Architectures Vijayan Sugumaran Department of DIS Oakland University.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
More on Creating GUIs in Java using Swing David Meredith Aalborg University.
Chapter 6: Graphical User Interface (GUI) and Object-Oriented Design (OOD) J ava P rogramming: Program Design Including Data Structures Program Design.
Introduction to Java Swing “We are the sultans of swing” – Mark Knopfler.
Dependency Injection and Model-View-Controller. Overview Inversion of Control Model-View-Controller.
A.k.a. GUI’s.  If you want to discuss your Lab 2 grade come see me this week. ◦ Office: 436 ERB. One hour prior to class ◦ Open to Appointments MWF 
MODEL VIEW CONTROLLER A Technical Seminar Report submitted to
MVC pattern and implementation in java
ACM/JETT Workshop - August 4-5, ExceptionHandling and User Interfaces (Event Delegation, Inner classes) using Swing.
Model View Controller (MVC) Rick Mercer with a wide variety of others 1.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
MVC CompSci 230 S Software Construction. MVC Architecture  A typical application includes software to  maintain application data,  document text.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
Java Swing, Events and MVC Optional Readings: Eckel’s Thinking in Java: Chap 14 (
1 Event Driven Programs Rick Mercer. 2 So what happens next?  You can layout a real pretty GUI  You can click on buttons, enter text into a text field,
COMP 6471 Software Design Methodologies Winter 2006 Dr Greg Butler
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
3461 Model-View Controller Advanced GUI concepts.
Swing MVC Application Layering A Layer is a collection of components that Perform similar tasks. Perform similar tasks. Isolate implementation details.
Model View Controller (MVC) Bigger than a Pattern: It’s an Architecture Rick Mercer with help from many others 1.
Chapter 12 1 TOPIC 13B l Buttons and Action Listeners Window Interfaces Using Swing Objects.
1 CSC 222: Object-Oriented Programming Spring 2012 netBeans & GUIBuilder  netBeans IDE create/edit/run a project  GUIBuilder JFrame, JButton, JTextField,
An Introduction to Programming and Object Oriented Design using Java 3 rd Edition. Dec 2007 Jaime Niño Frederick Hosch Chapter 18 Integrating user interface.
Concurrent Programming and Threads Threads Blocking a User Interface.
SWING 101. IF YOU GET LOST - IMPORTANT LINKS  Swing articles:
Model View Controller A Pattern that Many People Think They Understand, But Has A Couple Meanings.
Object-Oriented Program Development Using Java: A Class-Centered Approach, Enhanced Edition.
CS324e - Elements of Graphics and Visualization Java GUIs - Event Handling.
Model View Controller MVC Web Software Architecture.
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
Anonymous Classes An anonymous class is a local class that does not have a name. An anonymous class allows an object to be created using an expression.
Object Oriented Programming.  Interface  Event Handling.
CSE 331 Software Design & Implementation Hal Perkins Autumn 2012 Event-Driven Programming 1.
Model View Controller (MVC) Bigger than a Pattern: It’s an Architecture Rick Mercer with help from many of others 1.
XP New Perspectives on Microsoft Office Access 2003 Tutorial 10 1 Microsoft Office Access 2003 Tutorial 10 – Automating Tasks With Macros.
Graphics in Java Dr. Andrew Wallace PhD BEng(hons) EurIng
Java Programming: From Problem Analysis to Program Design, 3e Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Java Programming: From Problem Analysis to Program Design, Second Edition1 Lecture 5 Objectives  Learn about basic GUI components.  Explore how the GUI.
Advanced Web Technologies Lecture #3 By: Faraz Ahmed.
SOEN 343 Software Design Section H Fall 2006 Dr Greg Butler
(1) Introduction to Java GUIs Philip Johnson Collaborative Software Development Laboratory Information and Computer Sciences University of Hawaii Honolulu.
Model-View-Controller Architecture. 2 Give someone a program, you frustrate them for a day; teach them how to program, you frustrate them for a lifetime.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All rights reserved Chapter 32 JavaBeans and Bean.
Model View Controller (MVC) an architecture Rick Mercer with help from many of others 1.
1 Event Driven Programs Rick Mercer. 2 So what happens next?  You can layout a real pretty GUI  You can click on buttons, enter text into a text field,
L10: Model-View-Controller General application structure. User Interface: Role, Requirements, Problems Design patterns: Model – View – Controller, Observer/Observable.
Java Swing, Events Readings: Just Java 2: Chap 19 & 21, or Eckel’s Thinking in Java: Chap 14 Slide credits to CMPUT 301, Department of Computing Science.
Java - hello world example public class HelloWorld { public static void main (String args[]) { System.out.println("Hello World"); }
Lesson 28: More on the GUI button, frame and actions.
View  view  presents the user with a sensory (visual, audio, haptic) representation of the model state  a user interface element (the user interface.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Presented by Alexey Vedishchev Developing Web-applications with Grails framework American University of Nigeria, 2016 Intro To MVC Architecture.
Chapter 32 JavaBeans and Bean Events
Chapter 36 JavaBeans and Bean Events
Advanced User Interfaces
CS102 – Bilkent University
Presentation transcript:

Object-Oriented Analysis and Design MVC: Model-View-controller architecture

What it is … The Model-View-Controller (MVC) is an architecture, not a design pattern Found to be very useful for web applications, windows applications, mobile apps, etc The general structure of the architecture provides reuse of components, which is high priority MVC can be used with just about any type of implementation language (Java, C++, C#, HTML/PHP, etc.

Why? For most applications today, data is being manipulated and the application contains some kind of user interface which generates commands to create this manipulation It has been recognized that the data is logically independent from how it is displayed to the user Displays can be customized, but you don’t need to redesign the database tables each time This implies a natural “layered” model architecture that separates the actual logic from the “view” (display)

MVC Architecture Model View Controller This usually represents the data or the actual programming logic – this is what the program actually does Contains classes and methods that modify data or states View Renders data for the user to see Accepts input from the user to initiate changes in the model When the model changes, View must be updated Controller Translates user actions (button clicks, etc.) into operations on the Model

MVC Architecture

MVC in Java View is made up of Swing widgets, like Jframes and Jbuttons Controller is the ActionListeners Model is composed of ordinary Java classes Sometimes, ActionListeners may be included in the View, and the Controller may be made up of Java classes that implement business logic In either case, the View and the Model are completely decoupled MVC is also very popular in C#, and MS Visual Studio provides a template for MVC applications

MVC Implementation General steps: How it works: Instantiate the Model Instantiate the View, may have reference to Controller (initially Null) Instantiate the Controller, pass references to Model and View Controller may then “register” with the View, so view has non-Null reference to Controller How it works: View recognizes an event, say a mouse click View calls appropriate method on Controller, may pass information Controller accesses relevant classes/methods in the Model, possibly creating changes or receiving information in return If Model has changed (or information received), Controller updates View

MVC - Extended Sometimes you see implementations where the Model directly communicates with the View, bypassing the Controller Breaks “Model-View Separation”, but is occasionally useful We will see more details on the pattern being displayed here later (called “Observer”) View is notified directly of changes in Model, so View “observes” Model Useful for asynchronous Model updates – Model changes independent of user interaction Model may have multiple Views, but each View has only one Model In this case the Model must update all Views that are observing it

MVC Architecture (Extended)

MVC Extended Implementation General steps: Instantiate the Model – has initial Null reference to View Instantiate the View with reference to Model. View then “registers” with Model Instantiate the Controller, pass references to Model and View. Controller then “registers” with View How it works: View recognizes an event, say a mouse click View calls appropriate method on Controller, may pass information Controller accesses relevant classes/methods in the Model, possibly creating changes or receiving information in return If Model has changed, it notifies all relevant Views. View queries Model, gets any changes, displays

Observations Controller and View can be tightly coupled Controller occasionally produces own output, like a popup window Occasionally there is information that is shared between Controller and View that does not involve the Model User often control the Views themselves (scrollbars, etc.) Bottom line: input and output are often combined in the GUI Leads to new architecture: Delegate Model Model – same as before Delegate – responsible for input/output, combination of View and Controller UI or Document View – actual GUI objects

Delegate Model Implementation General steps: Instantiate the Model – does not care about UI Instantiate Delegate with reference to the Model How it works: Delegate recognizes event (from UI) and executes appropriate handler Delegate accesses Model, possibly updates it If Model has changed, UI is updated (through the Delegate)

MVC – How to Know You Did it Right You can swap out a new UI easily Same Model can be used without modification with a new UI Your Model can be easily tested without the UI being completed, for example with JUnit Model changes are quick – the GUI is frozen while the Model changes, and this should not take long

Example - Calculator http://www.codeproject.com/Articles/25057/Simple-Example-of-MVC-Model-View-Controller-Design

Example - Calculator Look at the Main() function – here is the section where the individual parts get created and linked This is classic MVC – the Model does not talk to the View at all Now look at CalcController Note that the Model and View references are passed in typed to interfaces This is much more robust, allows different Models or Views to be used In the constructor, the Controller gets added to the View as a listener OnClick – this method updates the View with information from the Model

Example - Calculator Look at the code for frmCalcView This will implement the ICalcView interface Adds the reference to Controller as a listener When a label button is clicked, the text is sent to the Controller The lblPlus_Click() method also interacts with the Controller; this changes the state of the Model Look at the Model code Depending on the Model state, the Model either sets the current value to the input number or adds the input number to the current value

Example - Calculator Walk through the operation: A number key is pressed. lbl_Click() method is invoked on the View (this is a listener for the UI number buttons) The OnClick() method on the Controller is invoked, and the value of the button is passed The Controller invokes the SetInput method on the Model, passing the number read from the button. The Model sets currentValue to the number and returns this value to the Controller, which displays it in the View’s Total text box.

Example - Calculator The “+” button is pushed. lblPlus_Click() method is invoked on the View (this is a listener for the UI “+” button) The OnAdd() method on the Controller is invoked The Controller invokes the ChangeToAddState() method on the Model. The Model changes its state to “Add”

Example - Calculator Another number key is pressed. lbl_Click() method is invoked on the View (this is a listener for the UI number buttons) The OnClick() method on the Controller is invoked, and the value of the button is passed The Controller invokes the SetInput method on the Model, passing the number read from the button. Since the state of The Model is now “Add”, the Model adds the passed number to the currentValue and passes the sum to the Controller. The Controller sets the value of the Total text field to the sum of the two numbers