Resources | Resources |



MVC pattern

Widgets are loosely based on a model-view-controller (MVC) pattern, which separates the UI, controller, and data functionality for a widget, as shown in the following figure:

The use of the MVC pattern makes it easier for developers to replace different parts of a widget, if needed.

Many of the UI Widgets combine the view and the controller in a single object, but keep the model a separate object. The text widget is an example of a widget that maintains distinct model, view, and controller objects. These are the TextModel, TextWidget, and TextController, respectively.

When an application creates a widget, instances of the following interfaces are instantiated, which correspond to the model, view, and controller of the MVC pattern:

  • IModel - controls the data for a widget. A widget's model consists of state data and a notification mechanism for changes in the data.

    Some widgets can use multiple models to achieve different goals. For example, Frame Widget can accept media frames from a camera viewfinder (CameraFrameModel), a video player (MediaFrameModel), or other source that provides frame-based data for playback.

  • IWidget - the view, or UI, of the widget, which handles rendering the view to the display.

    When the widget data (the model) is changed or the widget properties are changed, the view sends an invalidation request to its parent container. When the root container receives the invalidation request, it schedules the drawing.

  • IController - for widgets that have a separate controller, such as the text widget, an instance of the IController interface is also instantiated. Controllers handle user interaction (key or touch events). A controller may update the widget's view or model based on these events. Widgets that do not have a separate controller use their IHandler instance to handle events. For example, if a user presses the 2 key when a text widget has focus, the text controller is responsible for translating 2 into A, B, or C.

    If a widget is touch-enabled, it also has a touch controller that handles touch events. It is also possible to attach additional controllers (event handlers) to a widget to perform custom event handling.

The model, view, and controller of a widget work together to keep the data and the contents shown on the display up-to-date. For example, if the user enters text on a virtual keypad, the text is sent to the widget. The widget passes this text to the controller, which handles the event and updates the model by inserting the new text into the model's data. The model stores the data and notifies the view that it has changed. The view then takes the updated text from the model and displays it on the screen.

For more information on widgets, see Widgets.