UI Design Patterns
- 1. UI DESIGN PATTERNS Presented By Aamir Ali Hussain
- 2. AGENDA ★What Is UI Design Patterns ★The UI design pattern formula ★Advantages ★Types Of design patterns o MVC o MVP o MVVM 2
- 3. WHAT IS UI DESIGN PATTERN User interface design patterns are descriptions of best practices within user interface design. They are general, reusable solutions to commonly occurring problems. As such, they form the backbone of “technical support.” Design patterns are concepts which have been fully fleshed out and are applicable to more than one project. The user interface (UI) is the point of human-computer interaction and communication in a device 3
- 4. THE UI DESIGN PATTERN FORMULA UI design patterns include: 1. Problem: What does the user want to do? 2. Context: When should the pattern be used? 3. Solution: What is the solution? 4. Examples: Where and how has the pattern been implemented before? 3
- 5. ADVANTAGES Design patterns are useful in terms of: Saving time – a pre-built solution to a regularly occurring problem means that there’s no need to reinvent the wheel, you can pull the solution off the shelf and implement it Saving money – when you save time, you also save money in a corporate environment 6
- 7. TYPES There are 3 main design patterns which we talk while designing the GUI. MVC(Model view controller) MVP(Model view presenter) MVVM(Model view view model) 6
- 9. TYPES So everything is in one place is always a bad idea for maintainability, extendibility and testability prospective. If you look at the big picture, you can feel that all these problems exist because there is a very tight coupling between the following items. o View (UI) o Model (Data displayed in UI) o Glue code (Event handling, binding, business logic). MVC (model view controller), MVP (model view presenter) and MVVM (model view view model) patterns allow us to develop applications with loose coupling and separation of concern which in turn improve testability, maintainability and extendibility with minimum effort. 6
- 10. TYPES MVP 6 o MVP (model view presenter) pattern is one of the very popular patterns among other design patterns available in the market. o MVP is a variation of MVC pattern which is being used for so many decades. o Simple definition of MVP is that it contains three components: Model, View and presenter.
- 11. TYPES MVP 6 Example : MVP is often used in Android Applications. The Presenter is responsible to act as the middle man between View and Model. It retrieves data from the Model and returns it formatted to the View.
- 12. TYPES MVC 6
- 13. TYPES MVC 6 o In the MVC, the Controller is responsible for determining which View is displayed in response to any action including when the application loads. o In MVC, every action in the View basically calls to a Controller along with an action. o In web application, each action is a call to a URL and for each such call there is a controller available in the application who respond to such call. o Once that Controller has completed its processing, it will return the correct View.
- 14. TYPES MVC 6 o Example : o MVC is often used in web applications. The view in these applications is the HTML or XHTML files created by the application. o The controller receives the input in the form of getting input and it then manages and handles the input to the model. The model contains the data and the rules on the process of carrying a specific task.
- 15. TYPES MVVM 6
- 16. TYPES MVVM 6 o In MVVM, View Model does not need a reference to a view. o The view binds its control value to properties on a View Model, which, in turn, exposes data contained in model objects. o In simple words, TextBox text property is bound with name property in View Model. o Model and View work just like MVC and “View Model” is the model of the View.
- 17. TYPES MVVM 6 Example : MVVM described as an implementation of Presentation Model designed specifically for WPF (and later, Silverlight). The examples of the pattern often focus on XAML for the view definition and data- binding for commands and properties.
- 18. THANK YOU!