Http:/pg.ece.ncsu.edu/mediawiki/index.php/CSC/ECE 517 Fall 2007/wiki2 3 77

Model/View/Controller Websites Overview

Topic

---

Model/view/controller. There are literally hundreds of pages describing MVC on the Web. If someone wants to learn about it, what should (s)he do? Look at the first few hits in Google? I expect we can do better than that. Write a review of the MVC sites on the Web. Which are best for learning about the concept? Which have the most instructive examples? Which are best for explaining how to use the pattern in Ruby and Java? If you choose this topic, you should be sure to peruse at least several dozen sites.

Introduction to Model/View/Controller (MVC)

---

This is an architectural pattern adopted in software engineering. Generally, complex computer applications deal with large amount of data in conjunction with the functionality accessing this data. This generally becomes difficult to handle. Hence the programmer prefers to separate the functionality and data (model) from the user interface (view). This technique is very useful since any changes made to user interface may not affect the functionality of the program and vice versa. The data may be reorganized without making any changes in user interface. This is accomplished by decoupling data access from data presentation and user interface by the introduction of an intermediate component named controller.

The application is decoupled into three layers that would allow flexibility and reuse:

Model: This is the domain-specific representation of information where the application operates. It knows about all the operations that can be used to transform this information. But it has no idea how these operations are invoked.

Controller: This layer responds to the user (user inputs) which may invoke changes on the model. More specifically as mentioned by “Martin Fowler” in his book “Patterns of Enterprise Application Architecture” in a lucid way “Controller takes user input, manipulates the model and causes the view to update properly”

View: This layer provides the user interface element. This is the user-visible view of the model where the information is presented in a domain-specific and user-friendly way.

The MVC architectural pattern is very useful for the purpose of web development applications. One of the main purpose it serves is the separation of concerns. Hence, code is cleaner and easier to understand. The other advantage is reusability. The model can be enhanced in order to improve the functionality of the code with very minimal changes to the controller or view.

---

Categories of Websites

There are many sites available online about MVC which are very useful to a newbie. Certain websites provide proper pictorial representation and conceptual view of architectural pattern while some provide insight into the interaction between the different layers (i.e. model, controller and view). The websites can be categorized into two broad divisions, "Basic Concept", "Implementation-Specific" and "Examples :

"MVC Explained with an Example"

Any concept explained through an example is better understood than just theoretical description.Thus, while categorizing websites higher priority is given to those which explain MVC with an example.

• http://cristobal.baray.com/indiana/projects/mvc.html

This site provides the perfect place for a novice of MVC to start. This was written in a conversational style and easy to understand. As we proceed with the blue arrows provided on the right bottom corner or the right-top corner, the author slowly develops MVC concept and explains it through a very simple instructive example of "Heart-Beat".

Example: The heart-beat example consists of the interface as shown below .

This particular example creates 2 separate Java windows for view and controller.After the details how this example is implemented, the author again explains the concept of MVC with respect to the example.

• http://www.adobe.com/devnet/flash/articles/mv_controller.html

Starting off with a one line description of MVC and with a "Toggle button" example, this chapter "The Model-View-Controller Design Pattern" from the book "Essential ActionScript 2.0" provides a very instructive explaination of MVC design pattern.The responsibilities of the MVC are elaborated with a running example of a Clock.

This site gives 2 examples, "Toggle" and "Clock", second one being the running example across the excerpt.This example explains the responsibilities of each model,view. It also justifies the usage of MVC with the example which gives us a better insight into the MVC architecture as a whole.

• http://ist.berkeley.edu/as/ag/pub/pdf/mvc-seminar.pdf

This provides a brief info on the history of design patterns and in particular MVC. The seminar proceeds to provide a brief introduction to MVC and then proceeds to its example of "Student_Information".It then uses this example to explain in detail the concept of each of the Model, View and Controller. It also provides information about various technologies available for implementing MVC.

This pdf provides a application Student_Information as an example of MVC. In this application, the view displays the info, the model stores the relevant information and the controller provides the relevant API's needed for receiving user_input and updating the model appropriately.

• http://www.enode.com/x/markup/tutorial/mvc.html

This page, which is part of a tutorial, provides very basic definition of MVC and is accompanied by an instructive example of a "Spinner".

This example explains how the data in the model is displayed by the view and how an "event action" is recognized by the controller which modifies model as required. It also briefly introduces the concept of multiple controllers modifying the same model.

"MVC dealt theoretically"

• http://www.phpwact.org/pattern/model_view_controller

This site provides a detailed overview of MVC pattern. It explains the different layers and relationship among them. It discusses the importance of structuring views, controllers and models. It contains information about the benefits and drawbacks of MVC along with the irrelevant situations where MVC will not be helpful.

• http://msdn2.microsoft.com/en-us/library/ms978748.aspx

This is the Microsoft's MSDN site, which poses the problem of "How do you modularize the user interface functionality of a Web application so that you can easily modify the individual parts?" and also provides the forces that act on the system given the situation. Having given a good description of the problem , the websites proceeds to give a concise description about how the MVC design pattern solves the problem posed. It also provides the user insight into variations of MVC that are available.

• http://www.jdl.co.uk/briefings%5CMVC.pdf

This is a 6-page document on MVC. Though it does not provide a insight into the MVC as a design pattern, it does identify various aspects of it, which needs to be understood for understanding the pattern.

• Wikipedia entry on MVC

The most referred to link while dealing with any topic. After giving brief history of MVC, it provides lucid introduction to the MVC design pattern followed by brief explanation language-specific implementation of MVC in Java, Ruby, Perl, .NET.

• http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7b36.html

It defines the MVC design pattern and explains the concept and how it helps simplifies the developer’s work and also improves the maintainability of the code

• http://articles.techrepublic.com.com/5100-22-1049862.html

Articles in Tech Republic that explain in a lucid way the MVC pattern, where it is best used and couple of its disadvantages.

"Implementation Specific" Websites

The following sites illustrate the implementation of MVC in different programming languages like SmallTalk (MVC was originally created for this), Java, Ruby, ASP .NET etc.

SmallTalk

• MVC architecture First Proposal

This provides the paper by Steve Burbeck, who initially proposed the concept of MVC for Small Talk programming. It provides overview of how to use to MVC for application programming in Smalltalk. It discusses the communication within and between the 3 layers of MVC. It contains information about existing view hierarchy. Some of the existing views are browsers inspectors and debuggers.

Java

• http://www.csis.pace.edu/~bergin/mvc/mvcgui.html

This site gives a simple example of Temperature Control system implemented in java using the Observer and Observable ( these classes have been defined in java in order to implement the MVC architecture in Java) .This site explains in a very instructional way of how to implement MVC in java.

• http://www.developer.com/java/ent/article.php/3336761

This site highlights the importance of MVC patterns and its application in many GUI-based applications, client interfaces, and widget toolkits for manipulating and storing data for the end users. Java’s Swing toolkit is a perfect example. The site explains the implementation of MVC in swing. It provides a listing of all components in the model interface. There is a sample code that would help a user to see the functionality of all examples.

• http://java.sun.com/blueprints/patterns/MVC-detailed.html

This SUN site poses a simple situation where the MVC design pattern can be applied and used to solve the problem using JSP’s to render the views, Servlets as controllers, EJB as models

• http://www.ifi.unizh.ch/richter/Classes/oose2/03_mvc/02_mvc_java/02_mvc_java.html#4%20Models%20as%20Proxies

This site is an extension to earlier site and provides detailed explanation about the usage of MVC architecture in Java’s Swing. This site is for the advanced users who need to apply MVC in visual programming.

• Google Image explaining MVC in Java

This provides pictorial representation of applications of MVC in Java. It contains images along with explanation for the MVC pattern used in Java explaining MVC and how is it integrated with JSP and struts in Java.

Ruby-On-Rails

• MVC example in Ruby on Rails

This is a very detailed instructional tutorial aimed at developing a MVC CRUD (Create, Read, Update, Delete) application in Ruby on Rails

• Blog on MVC in Ruby on Rails

This is a blog entry on MVC through the viewpoint of a Ruby on Rails developer defining MVC and giving minor details as to how MVC is implemented in Ruby on Rails.

• MVC in Rails explained in rubyonrails.org

This is an article on the Ruby on Rails official website defining the MVC usage in Rails along with links to articles within the same website for better understanding of MVC.

• Rails book dealing MVC architecture in Rails

This is a free download of pdf format of a book “Build your own Ruby on rails applications” by Patrick Lenz. This free pdf download expires by initial days of December//'2007//. This book provides a very wonderful development from the basics of Ruby to Ruby on Rails(RoR) and the MVC architecture explained and shown how it is embedded in RoR. This comes in conjunction with easy to learn illustrations

---

The sites mentioned above are very useful for several programmers such Java, Ruby, Smalltalk programmers. It provides a background for new users who would like to implement design patterns hand in hand with software engineering techniques. Most of the sites explain the MVC as a part of implementation of MVC in their specific software or application. Only a few sites actually deal with the concept illustrating it in a lucid way with simple instructional examples.