Back to Widjet demo page |
Read the source of this example
Note:
This example uses HTML5 functionality for displaying sliders using <input
type="range">
. The sliders may therefore not work on older browsers.
Change the value in any of the textboxes or move any slider to make all the other controls also be updated.
How does this work?
This is a straight-forward implementation of the Model-View-Presenter(MVP) pattern. As the name implies there
are three logical components that have the following function and responsibility:
Model
-
The model object contains the data that is to be viewed and manipulated.
-
The only other component with knowledge
about the model object is the presenter component.
-
The model object should be dumb, it's plain data, no events.
- The model object does not have direct knowledge of view components and the presenter component.
Presenter
- A model object is attached to the presenter component.
- The presenter component shields the views from direct knowledge of the model object.
- An arbitrary number of views can be added and removed from the presenter.
- The presenter component acts as a router of events from the added views.
- When a view component via events informs the presenter about a change of the displayed data, the presenter
updates the model and informs all the views about the change.
- Any necessary calls to a service is handled, or at least triggered by the presenter component.
View
-
The view component is probably a user-visible part, like textfields, buttons and so on.
-
The view component translates primitive events like button clicks, text changes and so on into more application
oriented events, like "fileDeleted".
- The view component is informed by the presenter of changes to the model object.
- The view component does not have direct knowledge of the presenter or the model object.