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 which becomes difficult to handle. Hence the programmer likes 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 and 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. (done from View)

Controller: This layer responds the user (user inputs) and that may invoke changes on the model. More specifically as mentioned by “Martin Fowler” in his “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 presentational view of the model where the information is presented in a domain-specific and user-friendly way. This architectural pattern is very useful for the purpose of web development applications. First advantage is the separation of concerns. Hence, code is cleaner and easier to understand. Another bigger advantage is reusability. The model can be enhanced in order to improve the functionality of the code without making any changes to the controller or view. There are many sites available online which are very useful to a newbie. Some of the websites we have come across helps a new user to get a proper pictorial representation and conceptual view of architectural pattern and can understand the interaction between the different layers (i.e. model, controller and view). The websites can be categorized into two broad divisions: I. Websites dealing with the concept of MVC as design pattern rather than an architecture basis used for implementing a particular programming language. 1) 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. 2) http://www.enode.com/x/markup/tutorial/mvc.html This site is perfect for the new users who want to have a clear idea of the MVC architecture. They have explained it by taking an example of spinner component that consists of text box and 2 buttons which can be used to increase or decrease the value is the text box. 3) 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. 4) http://www.adobe.com/devnet/flash/articles/mv_controller.html This site has a detailed description of the MVC and its abstract working explained in detail. Though it is actually a chapter from textbook referring rarely to previous chapters , it gives a very detailed( in fact most detailed description of MVC with simple examples along with advantages of each feature of the MVC design pattern. 5) http://www.kvcindia.com/mvc.htm The site is important for understanding the basics of MVC architecture. It provides an explanation about the advantages of using MVC architecture. 6) 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 7) http://ist.berkeley.edu/as/ag/pub/pdf/mvc-seminar.pdf This the pdf of a MVC seminar used by UC Berkeley. Though not descriptive it gives a bird eye view of MVC operates along with a simple example. 8) http://cristobal.baray.com/indiana/projects/mvc.html This site is very useful for understanding the importance of design patterns such as MVC and its importance in developing applications with an example. The site discusses how to use applets in order to provide better interface to the user. It also suggests further helpful reading that would help the user to strengthen their base in the understanding of design patterns. 9) http://en.wikipedia.org/wiki/Model-view-controller This link is the Wiki entry for MVC providing its description and various links to MVC implementations in different programming languages.

II. 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 1) http://st-www.cs.uiuc.edu/users/smarch/st-docs/mvc.html 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. 2) 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. 3) 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. 4) http://java.sun.com/blueprints/patterns/MVC-detailed.html This 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 5) http://www.regdeveloper.co.uk/2006/07/17/ruby_rails_part2/ This is a very detailed instructional tutorial aimed at developing a MVC CRUD (Create, Read, Update, Delete) application in Ruby on Rails 6) http://blogs.ittoolbox.com/emergingtech/edge/archives/mvc-and-rails-12457 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. 7) http://wiki.rubyonrails.org/rails/pages/UnderstandingRailsMVC 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. 8) http://s3.amazonaws.com/sitepoint-books/ror.pdf 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. 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 following is the pictorial representation of a simple example taken from the above book

9) http://www.15seconds.com/issue/060817.htm The site provides a detailed but a simple overview of Model View Architecture with ASP.Net. It has pictorial representation of the MVC Framework. The picture will help the user to see the implementation of MVC and helps provide understanding of interactions present in MVC. Moreover there is an example of simple web site development to authenticate the user’s name and password by comparing the data with the database. 10) http://www.tonymarston.net/php-mysql/infrastructure.html#mvc The website explains the application of MVC’s 3 Tier architecture for web development using PHP. It gives a comprehensive view of how to blend MVC architecture with Object oriented capabilities of PHP. It highlights the importance of reusability of code which is one of the most important advantages of MVC architecture. 11) http://msdn2.microsoft.com/en-us/library/ms978748.aspx This site will help a new user to realize the importance of Model View Architecture. It mentions the problems faced by programmer who do not implement this 3 tier architecture and how the problems are resolved using MVC architecture. There is a section where they discussed about the testability which is greatly enhanced by employing this architecture. It also contains information about its benefits and liabilities. 12) 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. 13) http://images.google.com/imgres?imgurl=http://publib.boulder.ibm.com/infocenter/wsadhelp/v5r1m2/topic/com.ibm.etools.struts.doc/images/cstrdoc018.gif&imgrefurl=http://publib.boulder.ibm.com/infocenter/wsadhelp/v5r1m2/topic/com.ibm.etools.struts.doc/topics/cstrdoc001.html&h=322&w=628&sz=30&hl=en&start=2&um=1&tbnid=tVyYlnDiTkYQbM:&tbnh=70&tbnw=137&prev=/images%3Fq%3DMVC%2B%2Bdesign%2Bpattern%26svnum%3D10%26um%3D1%26hl%3Den%26sa%3DX This provides pictorial representation of applications of MVC in Smalltalk-80™. 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. 14) http://www.codeproject.com/useritems/AJAX_MVC.asp?df=100&forumid=362797&exp=0&select=1797776 This site discusses MVC usage in web based development particularly in .NET and AJAX framework. Conclusions: The sites mentioned above are very useful for several programmers such Java, PHP, 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