IEG 3080 Tutorial 10

IEG 3080 Tutorial 10 Jack Chan

Outline • An Overview of MVC • Basic Concept • Responsibilities • Advantages and Disadvantages • Example • Design patterns involved

The Basic Concept • Model, View, Controller – a useful design pattern • Aims to separate application object model from GUI • Decouples view of data (presentation layer) from data processing layer • The same application object can have different looks and feels

The Basic Concept User Input Controller Change model Database Or other applications Model Change view Get data from Model Get data from Model Change view Notify updates View 1 View 2 Notify updates

Responsibilities • Treat them as • Input • Processing • Output • Controller  Input • Model  Processing • View  Output

Responsibilities -- Model • Actual data processing / System behavior • e.g. game rules, calculation models, business models, database connection, etc. • Data provided is display-neutral (not specific to any presentation format)

Responsibilities -- Model • Responds to user inputs from Controller • Notifies View to redraw objects • Provides data (or states) to View for redrawing

Responsibilities -- View • Presentation of data (e.g. in graphics) • Completely isolated from data operation • e.g. Presenting data in the form of a table on webpage; MS Excel  pie chart, bar chart… • Interface to interact with the system • MVC supports multiple views, • Helpful in multi-platform environment

Responsibilities -- Controller • User input handler • Responds to the mouse click or keyboard input • Commands the changes in View • Events to trigger the changes in Model • Model changes states and notifies View to redraw

Why MVC? • Responsibilities of every object are clear, easy for system development • Model, View and Controller objects can be developed in parallel • Increase the development speed • Supports multiple views (different looks and feels) by same application object (Model) behind • Easy to upgrade and maintain

Why MVC? • Easy to maintain multi-clients application (e.g. online shopping) • Different clients have different Views and Controllers, but the same Model • For adding new clients, only add Views and Controller, Model is unchanged

Some Drawbacks • Great amount of time for planning • Plan (e.g. what user requirements) carefully before coding • Assign carefully different responsibilities to different objects • Not suitable for very small and simple applications (cost and benefit consideration)

Example • Reference http://www.codersource.net/aspnet_model_view_controller_sample.html • An application to • Query data from a database of articles • Present information of articles in a form of a table p.s. Database application, student may not be very familiar with, but it shows a simple MVC design

Example • Sample article table

Example -- Sample codes • Without MVC //Event handler: run after the Button1 is clicked private void Button1_Click(object sender, System.EventArgs e){ //Query the database, put result in an adapter SqlDataAdapter ad = new SqlDataAdapter ("SELECT Title,Description FROM Articles",connection); DataSet ds = new DataSet(); //create a data set ad.Fill(ds,"Person"); //put result into the data set //present the result in a table myDataGrid.DataSource = ds; myDataGrid.DataBind(); }

Example -- Sample codes • With MVC (Model) publicclass ArticleDetails //has the same fields as in database, class mapping{ public string Title;public string Description; } public class DBArticles{ // This method returns a data set of articles public DataSet GetArticles() { string connectionString = (string) ConfigurationSettings.AppSettings["ConnectionString"]; DataSet ds = SqlHelper.ExecuteDataset (connectionString,CommandType.StoredProcedure, "GetArticles"); return ds; } } CREATE PROCEDURE [GetArticles] SELECT Title, Description FROM Articles; GO

Example -- Sample codes • With MVC (Controller and View) //Event handler: Controller private void Button1_Click(object sender, System.EventArgs e){ DBArticles article = new DBArticles(); //implement Model myDataGrid.DataSource = article.GetArticles(); myDataGrid.DataBind(); //present data: View }

Example • Decouples data presentation from model implementation (here it is database connection and query) • If we want to change the database or query • Only modify the code in Model • Controller and View can be kept unchanged

Design Patterns involved • To implement MVC, several patterns are involved • Model-View  Observer: View observes Model • View  Composite • Controller-View  Strategy

Composite • Use tree structure to represent part-whole hierarchies; • Treat the individual objects and compositions of objects in the same way e.g. When you call draw() in GameObj, the GameObj will call draw() in its children. Same as you call draw() in children. Call child to do theoperations

Observer • Define an one-to-many dependency between objects • When one object changes, all its dependents are notified and changed automatically Notify e.g. MS Excel Update

Strategy • Encapsulate a family of algorithms • Different clients use different algorithms e.g. Different linebreaking algorithms in MS Word and LaTEX Different algorithms, used bydifferent clients

Reference • M. Chang, “L6_Patterns.ppt”, IEG3080 Lecture Notes, Chapter 6, pp. 587 -- 603 • http://www.c-sharpcorner.com/Code/2003/Feb/MVCDesign.asp • http://www.codeproject.com/csharp/model_view_controller.asp • http://www.dofactory.com/Patterns/Patterns.aspx

IEG 3080 Tutorial 10