UI Widget Development with MVC (Model-View-Controller) pattern

MVC is one of the most widely used design pattern in widget architectures.

Before MVC (also called as "3 objects" pattern), user interface widgets were designed either using "1 object" or "2 objects" pattern.

The diagram below explains the types of objects involved in these patterns.

Disadvantages of "1 Object" and "2 Objects" pattern:

• Source code becomes flooded with algorithms, data structures etc.,

• Tough to understand and maintain.

• Makes the code less flexible to changes and difficult to reuse because of tight coupling.

All the above issues can be solved by using "3 objects" pattern (MVC).

Model-View-Controller (MVC)

• It is an architectural pattern. Mainly used in GUI architectures.

• Helps to decouple presentation, functionality and input handling.

It consists of three types of objects.

1. Model: Functionality or data
2. View: Screen presentation of model
3. Controller: Defines how view reacts to user input

Most Common challenges faced while designing these objects:

This section explains the most common challenges faced while designing View, Controller and Model objects.

Let's take an example of simple menu widget.

VIEW:

Supporting dynamic properties is one of the main challenges faced while designing View.
For Example,

Creating different View objects for the above, makes the menu more complex. It also bloats the code and makes it hard to change.

This design problem can be solved by using Decorator pattern.

Decorator design pattern:

• Create scrollbar, title, border, etc., as decorators and design the View in such a way that decorators can be added or removed at runtime.

• This design pattern allows new behavior to be added to an existing class menu view class dynamically. In other words, using this functionality, menu can be extended at runtime.

CONTROLLER:

Supporting Multiple Algorithms is one of the main challenges faced while designing Controller.

Let's take, for example, user pressed '2' key

Different algorithms are needed to support these features and it has to be designed in such a way that View can easily select an algorithm at runtime.
This relationship between controller and view can be represented by using strategy design pattern.

Strategy design pattern:

• Encapsulates each algorithm, and makes them selectable at runtime.

• Using this pattern, Algorithms can be replaced either statically or dynamically.

• Decouples an algorithm from its host.

MODEL:

Model notifies View, when Controller changes the Data. This has to be achieved without coupling Model and View.

For Example,

These menus need different functionality, so coupling Model and View directly makes it less flexible to changes and difficult to reuse.
This design problem can be solved by using Observer design pattern.

Observer design pattern:

• Represents relationship between Model and View.

• It helps to decouple Model from the View.

• Notifies associated Views when the Model changes.

For more information about MVC pattern.

• Model-View-Controller - Wikipedia

• Model-View-Controller - MSDN