The Model-View-Controller Pattern

The JavaScript language is easy to learn, but also very powerful. It is important to use this language in a well-organized manner that makes the application code easier to write and to maintain in the long run. The recommended approach uses the well-established Model-View-Controller (MVC) pattern. A useful explanation of this pattern can be found at http://www.phpwact.org/pattern/model_view_controller. The MVC pattern is, simply put, a way to separate different types of functionality into different layers. Each layer can concentrate on doing a specific thing well, while hiding implementation details that can be changed without affecting the other parts of the code:

  • The Model layer encapsulates the data that is being processed by the application
  • The UI layer displays the data to the user
  • The Controller layer is the "supervisor" of the application: it loads the model from the database, triggers UI updates, handles user actions, and saves the updated model to the database.

Web 2.0 views include all three layers. When you create views using standard panels and view commands, these layers are implemented by Web Central and are hidden from you. When you implement advanced views using JavaScript, Web Central provides building blocks for all three layers:

  • The Model layer is implemented by standard DataSource and Record objects
  • The UI layer is implemented by standard panels or by custom UI controls
  • The Controller layer is implemented by the application code using Web Central API

In Archibus documentation, we use the term 'view' to refer to an AXVW file or the page presented by an AXVW, so in the MVC discussion the View layer is referred to as the UI layer to minimize confusion. Each Web Central page automatically has an Ab.view.View object that will be discussed later, but this object should be seen more as a container for the individual UI components of the MVC View layer referred to here as the UI layer.

The diagram below shows how the MVC pattern is implemented in Web Central applications:

MVCDiagram.bmp