Interactive System Development (HCI-2 PDF)

IT1906 Interactive System Development MVC Framework An interactive system development framework pertains to an established modular approach for interactive program development where the core computation and interface parts are developed in a modularized method an...

IT1906 Interactive System Development MVC Framework An interactive system development framework pertains to an established modular approach for interactive program development where the core computation and interface parts are developed in a modularized method and are combined flexibly. This kind of development is often based on the user interface (UI) toolkit, which provides the abstraction for the interface part. An example of this development framework is the model-view-controller framework (Kim, 2015). The model-view-controller (MVC) framework, also known as MVC architecture, is a well-known three-layer framework used in developing and implementing user interfaces, especially Web applications, on computers. It divides a given software application into three (3) interconnected parts to separate internal representations of data and information from the ways that information is presented to or accepted from the user (InterServer.net, n.d.). The designers of the programming language called Smalltalk initially proposed the MVC approach as a computational architecture for interactive programs, rather than a methodology. Smalltalk is one of the first object-oriented and modular languages in the programming history (Kim, 2015). These are the following components of an MVC framework: Model: Data and Logic – A model specifies the logical structure of data and the associated high-level classes in a software application. It is a domain-specific representation of the data that describes the processes in an application. When a model changes its state, the domain notifies its associated views to refresh (InterServer.net, n.d.). Example: In an interactive banking application, the model involves the part of the program that maintains the balance, computes for the interest, makes wire transfers, etc. The model does not know how the information will be presented to the user and how the transactions are made (Kim, 2015). View: Interface – The view component involves all the user interface (UI) logic in a software application, which also presents the application’s user interface as an output. It renders the model into a form that is suitable for user interaction. Multiple views can also exist for a single model but for different purposes. In modern graphical user interface (GUI), the implementation of views is commonly through widgets (InterServer.net, n.d.). Example: In an interactive banking application, views might be windows and widgets that display the list of all possible transactions and the balance of a given account. Moreover, there could be different view implementations for different display platforms (e.g., 17-in. monitor and 10-in. LCD) or user groups (e.g., young users and people with special needs). Note that the output display does not necessarily have to be visual (Kim, 2015). Controller: User Input – A controller serves as an interface between the model and the view components. It processes all the business logic and incoming requests and input, manipulates data using the model component, and interacts with the views to render the final output of a software application (InterServer.net, n.d.). In many application architecture and framework, the view and controller are already merged into one (1) module or object because of its close connection. For instance, a UI button object is defined by an attribute parameter such as size, label, and color, as well as the event handler that invokes the methods on the model for change or manipulation (Kim, 2015). 07 Handout 1 *Property of STI  [email protected] Page 1 of 3  IT1906 Advantages of MVC Framework Faster development process through parallel development of all MVC component. Can provide multiple views for a single model because of the separation of data and business logic from the display Modification does not affect the entire framework because the model component does not depend on the views component MVC framework pattern returns data without applying any formatting so that components can be used many times for different interfaces Easy to develop an SEO-friendly uniform resource locator (URL) to generate more visits from a specific application (SEO stands for search engine optimization, which is often about making small modifications to parts of a website [Google Help Center, n.d.]). Supports the test-driven development approach Disadvantages of MVC Framework Inefficiency of data access in view because of minimal code duplication Difficulty of implementing MVC framework with modern user interface involving different modalities Programmers/Developers must be knowledgeable about the business process linked to the application development for each MVC component MVC Implementation Figure 1. The MVC framework Source: https://www.interserver.net The implementation of an MVC framework, based on Figure 1, can be summarized through the following steps: Step 1: A browser sends a request to the MVC application. Step 2: The incoming request is directed to the controller. Step 3: The controller processes the request based on the data model of the application. Step 4: The result of the model component is passed to the appropriate view. Step 5: The view component renders the result into a form suitable for user interaction. An example of the MVC framework is the implementation of a simple object-oriented bank application. The MVC model maintains the balance for a user who can make deposits and withdrawals through a computer. Figure 2 shows the overall structure of the application according to the MVC framework. 07 Handout 1 *Property of STI  [email protected] Page 2 of 3  IT1906 Figure 2. An overall MVC-based implementation (class diagram) for a simple interactive banking application These are the important points presented in Figure 2 (Kim, 2015): A more general UIObject is a superclass for the AccountViewController. The view and the controller components are merged into one (1) class called AccountViewController. The AccountViewController is also a superclsass for the subclasses DepositViewController and WithdrawViewController. Both subclasses interpret user input (e.g., textual input of digits into integers) and invoke the Account. The AccountViewController contains the pointer to the corresponding model object, which receives and handles notification and model changes queries. The subclasses implement these three (3) important virtual methods: o Init_ui_display – creates and initializes the display and user interface (UI) objects within the view or controller o Handle_ui_display – handles the user input o Update_ui_display – updates the view or controller. The class named Account holds the customer’s name, balance, and two (2) views or controller (one for displaying the balance after depositing and one for displaying the balance after a withdrawal). References: Kim, G. (2015). Human-computer interaction fundamentals and practice. USA: CRC Press. Majeed, A. & Rauf, I. (2018). MVC Architecture: A Detailed Insight to the Modern Web Applications Development. Peer Review Journal of Scholar & Photoenergy Systems, 1(1). Retrieved from https://crimsonpublishers.com/prsp/fulltext/PRSP.000505.php on September 3, 2019 MVC Framework – Architecture. (n.d.). In TutorialsPoint. Retrieved from https://www.tutorialspoint.com/mvc_framework/mvc_framework_architecture.htm on September 3, 2019 Search Engine Optimization (SEO) Starter Guide. (n.d.). In Google Help Center. Retrieved from https://support.google.com/webmasters/answer/7451184?hl=en on September 3, 2019 What is MVC? Advantages and Disadvantages of MVC. (n.d.). In InternetServer.net. Retrieved from https://www.interserver.net/tips/kb/mvc- advantages-disadvantages-mvc/ on September 3, 2019 07 Handout 1 *Property of STI  [email protected] Page 3 of 3