Chapter 4 User InterfaCe DesIgn Presentation Component Presentation component (such as a widget or portlet) are independent mini user interface applications usually separated as per use cases or user story. For example, an account summary component to view account details and a bill pay component to pay bill payment of registered payees are two separate presentation components. These components (portlet or widget) have self-sufficient functionality and work independent of each other. Design Goals While deigning the presentation component, model-view-controller (MVC) and model- view- viewmodel (MVVM) patterns are used because these architectural patterns provide control over business logic implemented on UI and also provide control over the workflow of the UI application. The MVC pattern has three components: model, view and controller: • Model will bond with view as well as controller, as shown in Figure 4- 4. • View is the user interface that binds the model with the Document Object Model (DOM) and display data to the user, and also enables the user to modify the model. • Controllers are responsible for controlling the flow of the application; if you make a web services request, the controller is responsible for providing a response back to the application. MVC and MVVM patterns provide the following features to your application and help to achieve goals like upgradable, extendable, lean, and testable: • Upgradable and extendable presentation components. This can be achieved through API and object-oriented features of the framework. As shown in Figure 4-4, the UI component can extend to the base component; hence, if upgrading the framework, your functionality will not be impacted in the UI component. You can implement common functionality in the base components and other UI components can use it simply by extending the base components. 125