Model View Controller - Term Paper Example

Contents Contents 2 2 Benefits of MVC 5 3 Advantages of MVC 6 4 Advantages of an MVC-Based Web Application 7 5 Advantages of using MVC Pattern 8 1.6 Disadvantages of MVC 8 1.2 Case Study 1: http://barce.co.uk/mvc/ 9 1.3 Implementation of MVC 9 2.1 The Concept of Responsive Web Design 10 2.2 Advantages of Responsive Design 11 2.3 Disadvantages of Responsive Web Design 11 2.4 Implementation of Responsive Web Design 12 2.4.1 Part of the Solution: Flexible Everything 12 2.4.2 Flexible Images 12 2.4.3 Stop iPhone Simulator Image Resizing 12 2.4.4 Custom Layout Structure 13 2.5 Case Study 2: http://alfajiri.co.uk/filalproject 13 3.0 Conclusion 13 1.0 Theme 1: Model View Controller (MVC) MVC has three types of objects. 1. The Model object is the application 2. The View is its screen presentation, 3. The Controller shows how the user interface reacts to user input. Earlier MVC, user interface designs used to put all these objects together but now they are separated so that they can increase how flexible they can be and to be reused.MVC separates views and models by installing a subscribe or a notify protocol between them. A view should ensure that the appearance shows how the model looks like. When the data in the model changes, the views that rely on it should be notified so that it can be able to update itself as a form of response. This method is able to let the user attach several views to one model so that it can give different presentations, or a user is able to create other views for a model without rewriting it (Nutting, Mark, & Wooldridge, 2010). The views in MVC can be nested. For instance, a control panel of buttons can be implemented as a complex view containing nested button views. The user interface for an object inspector can have nested views that may be reused in a debugger. MVC offers support to nested views that have the Composite View class, a subclass of View. Objects in the Composite View perform as View objects; a composite view can be applied where a view can be used, but it also has the ability to contain and manage nested views. The user can take this as a design that lets them treat a composite view just like we treat one of its components. But the design is used to a more general problem, which occurs whenever we want to group objects and treat the group like an individual object (Bucanek 2009, p.256). This more general design is described by the Composite design pattern. It lets the user create a class hierarchy in which some subclasses define simple objects like Button and other classes define composite objects Composite View that groups the simple objects into more complex objects. 1.1 Concept of MVC MVC also allows the user to change the way a view reacts to user input without changing its visual presentation. The user might want to change the way it responds to the keyboard, or set it to use command keys in place of the normal pop-up menu or vice versa. MVC encapsulates the response mechanism in an object known as the Controller object. There is a chain of commands of controllers, so a user can create a new controller as a variation on an existing one. An occurrence of a Controller subclass is used by a View to implement a particular response strategy; to implement another dissimilar strategy; the user has to replace the occurrence with a diverse type of controller. It is also possible to change a controller of a view at run-time to let the view change the way it responds to user input. For example, a view can be disabled so that it rejects input by giving it a controller that ignores input events. The View-Controller connection is an example of the Strategy design pattern. A Strategy is an object that stands for an algorithm. It is useful when a user wants to replace the algorithm either statically or dynamically, when the user has several variants of the algorithm, or when the algorithm has compound data structures that they would like to simplify. MVC uses other design patterns, like, Factory Method to specify the default controller class for a view and Decorator design pattern to add scrolling to a view. But the key connections in MVC are given by the Observer, Composite, and Strategy design patterns. 1.2 Benefits of MVC Major benefits of MVC are that the user is able to: View/Model decoupling which is to attach multiple views to a model so that it can give various presentations View/Controller decoupling: this is to change the way a view responds to user input without interfering with its visual presentation (Smart, Hock & Csomor 2005, p.52). MVC is a better option if a user wants the efficiency and flexibility that has been discussed above 1.3 Advantages of MVC When the three components of MVC are broken down, there are several advantages that a user gets: Clarity of design: the methods of the model are presented as API for the commands that their data needs to be changed. When designing the application, this trait makes the entire program easier to implement and maintain. Efficient modularity: the design makes the user able to swap the components in and out as the user or programmer wants it to be. Even the model can be swapped. Changing a certain aspect of the program does not affect other aspects, this helps in the reduction of debugging. The improvement of the other components can continue in parallel when the interface between them is distinct. Multiple views: the application can display the state of the model in different ways, and create/design them in a modular manner. There is a view to display the state of the model, the other collects data, calculates statistics, then saves the data to disk. Both views use the similar data, the difference is how they use the information. Through the development process, the user should start out with a text based view, which will print the data that the model is generating. Later, as the user creates new views, they can use the text based view to verify the performance of the new views that have been created. Ease of growth: controllers and views develop as the model develops; when the common interface is not changed, the original versions of the views and controllers can still be used. For example, if an application requires having two types of users, regular and administrator, they can use the same model, but with different controller and view implementations. This is connected to the similarity with the client/server architecture - where the new views and servers are equivalent to the clients. Distributable: with a couple of Proxies design pattern that is used in the snake game a user can give out any MVC application by changing the start-up method of the application. Then the application becomes a set of client and server applications. Powerful user interfaces: with the models API, the user interface can put together the method calls when presenting commands to the user. Macros can be seen as a series of Standard commands issued to the model, all triggered by a single user action. This allows the program to present the user with a cleaner and simpler interface (Olsen 1998, p.86-96). 1.4 Advantages of an MVC-Based Web Application The ASP.NET MVC framework has these advantages: It makes simplifies the management of complexity by classifying an application into the model, the view, and the controller. It does not use view state or server-based forms. This makes the MVC framework good for the developers who want to monitor the behaviour of the application. It uses a Front Controller pattern that processes Web application requests via a single controller. This allows the user to design an application that supports a rich routing infrastructure. It offers support for test-driven development (TDD). It performs well for Web applications that are supported by large teams of developers and for Web designers who need a high level of control over the application behaviour. 1.5 Advantages of using MVC Pattern Various Views and Controllers can be substituted to give different user interfaces for a single model. Multiple simultaneous views of a single model The alternate propagation mechanism insures that all views show the state of the model at the same time. Changes that may affect the user interface of the application can be easily made. With MVC it is simpler to test the core of the application as it will have been simplified by the model (Bourne 1992, p.156). 1.6 Disadvantages of MVC The complexity may increase as an application can use other design patterns at the same time the MVC will be using them. The view and the controller are together thus the manipulation done on one can affect the other. Manipulation to the model interface will require manipulation to the controller and the view. When the model is active then changes done often will bring up many updates of the matching views. 1.2 Case Study 1: http://barce.co.uk/mvc/ The web site developed form the MVC pattern is easier to understand. The model is a football team site that has the home page, my news and create news platform. It displays artistic style of images enabling the user to interactively control views to display. It is also easy to wrap java applications into applets, smart phones and other devices. The model should present other objects a way of adjusting the delay and stopping the images. The controller needs to allow the user to adjust the heartbeat rate and a way of stopping the beat as well. The views need to know when news new images of the model are simulated. 1.3 Implementation of MVC There are MVC illustrations that suggest the connection of the View to the Controller, but this adds another degree of coupling that is not necessary. The illustrations suggest that the Controller might be needed to control parts of the View. Therefore if the displays of a controller rely on the state of the model so that it can display the right buttons or messages, then it is also a View. In situations where the Controllers are many, there are high chances of being affected with bug. Though the MVC is still new, the users should not mix the elements so much so that the whole system gets mixed up for efficiency. The users should have a detailed study on the MVC so that they are able to freely distinguish between View and Model controls. For example a view which is a graph, the user may want to control how it displays the contents. Those could be controllers on the view, but they cannot be put with any other controller of the model. The view prams here are independent of the model, so the controls are clearly separated from the model and other controllers and views. 2.0 Theme 2: Responsive Web Design Responsive Web design is the advance that suggests that design and improvement should react to the user’s behaviour and environment based on the size, platform and orientation of the screen. The performance includes flexible grids and layouts, images and a smart use of CSS media queries. As the user moves from their laptop to iPad, the website should automatically switch to contain for resolution, image size and scripting abilities, the website should have the technology to automatically respond to the user’s preferences. This would eradicate the requirement for another design and improvement to be done on each device that is made (Sharkie & Fisher 2013, p.256). 2.1 The Concept of Responsive Web Design Recently a responsive architecture has started inquiring how physical spaces can respond to the presence of people getting into them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be put together with climate control systems to regulate a room’s temperature and ambient lighting as people fill the rooms. Companies have invented a smart glass technology that can automatically turn out to be opaque when a room’s occupants reach a certain density threshold, giving them an extra layer of privacy. This move should be implemented onto Web design, and there is a similar but a new idea. Reason there should be creation of a custom Web design for each group of users; architects don’t design a building for the size and type of people that pass through the building. Like responsive architecture, Web design should automatically change. It shouldn’t need many custom-made solutions for every new category of users. Responsive Web design needs a more conceptual way of thinking. However, some ideas are already being implemented: fluid layouts, media queries and scripts that can reformat Web pages automatically. Users should know that Responsive Web Design is not only about adjustable screen resolutions and automatically resizable images, but also about a new ways of thinking about design (Hay 2013, p.55). 2.2 Advantages of Responsive Design The advent of responsive web design is a boon for designers and website owners. Currently most people use mobile phones to surf the internet thereby increasing the number of internet users. The introduction of smart phones and tablets ahs further increased use of internet from desktop computers. Studies reveal that people find surfing the internet with a mobile, smart phones and tablets easier than a computer. These changes in trends have made responsive web design to be preferred by web designers. Websites that worked splendidly on desktops are no longer sufficient due to responsive web design, since they are required to be viewed on mobiles, tablets and smart phones. Therefore, responsive web design is capable of providing all that (Firdaus 2013, p. 41). 2.3 Disadvantages of Responsive Web Design One of the disadvantages of responsive web design is that, it’s difficult to explain the process of web design to clients. The previous web design stages of development were well defined; this is not the case with responsive web design. In addition to that, features taken for granted in desktop computers web design are no longer easier to reproduce for responsive web design. This is due to the fact that the setting of features like navigation, tables and images in responsive web design, requires a lot of effort and creativity. Since the same site is used for all devices, loading the website takes time. There are also several challenges from the SEO perspective since such websites don’t use specific key words for mobiles, this limits the features commonly expected in a website (LaGrone 2013, p. 124). 2.4 Implementation of Responsive Web Design 2.4.1 Part of the Solution: Flexible Everything In the past, flexible layouts were not given an upper hand in the websites; the things that were flexible were layout columns and the text. Images could break layouts, and even flexible structural elements broke a layout’s form. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a mobile phone (Kdlec 2012, p.58). Today things can be made more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break although they become too small to be seen. While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape at once or for when users switch from a large computer screen a mobile phone or tablet. 2.4.2 Flexible Images One of the key challenges that need to be solved with responsive Web design is working with images. There are several techniques to resize images proportionately, and many are easily done. Whenever there is no other width-based image styles override this rule, every image will load in its original size, and if not the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. 2.4.3 Stop iPhone Simulator Image Resizing The advantage of using the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. The user can now zoom in and out to view the image. 2.4.4 Custom Layout Structure For very significant size changes, there may be need to change the layout of the sheet, for it to be more efficient through a CSS media. Many styles can be maintained then the specific style sheets can follow these sheets so that the elements can be moved around with floats, widths, heights etc (Frain 2012, p.68). 2.5 Case Study 2: http://alfajiri.co.uk/filalproject This theme is more interactive than the MVC approach. It has the search, home, tickets, alriffa, register, log in and contact platforms to enable the user to browse for more information. Furthermore, the web responsive approach enables access of the website from all devices such as smart phones, tablets as well as desktops. The approach allows use of many platforms that are interactive and easily accessed by users. Information is easily accessed and captured by the user than the MGC approach. However, developing a web site with responsive web design approach is a complex approach so that all devices are captured. 3.0 Conclusion Web design is a trade-off between compatibility and features and narrows down to the specific needs of the individual websites. Both themes have their merits and demerits. The changing trend in internet surfing requires websites run by desktops, mobile phones, tablets, smart phones as well as other hand held devices. This makes web design a complex process since designing a website, feasible to all devices becomes difficult. However, responsive web design stands as a common website fits all. Reference List Bourne, P. (1992). Object-Oriented Engineering: Building Engineering Systems using Smalltalk-80, CRC Press, Florida; U.S.A. Bucanek, J. (2009). Learn Objective-C for Java developers, Apress, New York, NY; U.S.A. Firdaus, T. (2013). Responsive Web Design by Examples, Packt Publishing Ltd, Birmingham, U.K. Frain, B. (2012). Responsive Web Design with HTML5 and CSS3, Packt Publishing Ltd, Birmingham, U.K. Hay, S. (2013). Responsive Design Workflow, New Riders, California, U.S.A. Kdlec, T. (2012). Implementing Responsive Design: Building sites for an anywhere, everywhere web, New Riders, California, U.S.A. LaGrone, B. (2013). Html and Css3 Responsive Web Design Cookbook, Packt Publishing Ltd, Birmingham, U.K. Nutting, J., Mark, D., & Wooldridge, D. (2010). Beginning iPad development for iPhone developers: Mastering the iPad SDK, Apress, New York, NY; U.S.A. Olsen, D. R. (1998). Developing User Interfaces, Morgan Kaufmann, Massachusetts, U.S.A. Sharkie, C. & Fisher, A. (2013). Jump Start Responsive Web Design, SitePoint, Melbourne, Australia. Smart, J., Hock, K. & Csomor, S. (2005). Cross-Platform GUI Programming with wxWidgets, Prentice Hall Professional, New York, NY; U.S.A. Read More