Example MVC pattern for Ajax

To illustrate how the view construction and the controller construction work together to form part of a Dojo-based Model-View-Controller (MVC) pattern, an example MVC application for Asynchronous JavaScriptTM and XML (Ajax) is provided.

Note:   This example is not the only way MVC patterns can be implemented through the Dojo Toolkit. 

The application consists of six HTML files and one JavaScript file that define the three controller widgets that manipulate the views.  No actual model exists in this MVC application because it is not representing specific data.  Therefore, the purpose of the example is to show the view and controller interaction. 

The following table defines each section of the application to the source code for the file that is indicated.  To run this example, use the following steps.

Steps to build the MVC example application:
    1.)   Use an IBM® supported version of the Dojo Toolkit 1.2.3. It is provided with the Featurepack as the Ajax Client Runtime feature.
    2.)   Create a directory for the example, such as ~/dojoExample for UNIX systems or Linux systems, or c:\temp\dojoExample for Windows systems.
    3.)   Copy the Dojo Toolkit into your example directory in your context root.  This action creates the dojo/, dojox/ and dijit/ directories.  All of the example files expect to reference the toolkit relative to this path.
    4.)   Create the files that are defined in the table, paying attention to the relative locations of the dojo/ directory.  View the contents for each file by clicking the following links:

  index.html
The initial page of the application. 

The purpose of the index.html file is to provide the initial layout definition and load the starting views.  In this particular example, the index.html file uses the layout container widget to contain a split containerwidget .  The split container widget divides the browser view into two controllable sections: the navigation view and the data view.
  templates
A directory that contains the HTML template files that are loaded into the content pane widgets of the views.
  templates/buttons.html
The buttons.html file displays the basic navigation pane on the left side of the view. 

This page uses the basic Dojo Toolkit button widget and uses the dojox.wire project to construct a markup-based custom controller that posts events to the Dojo topic system when a button is selected.
  templates/tabs.html The right data view that has a tab container widget controlled set of views. 

Actions on the navigation view effect which tab is opened in the data view to demonstrate how controllers can change views and handle application events.  This file also defines the controllers that control the top-level Dojo Toolkit tab container widget that is built from the dojox.wire controls and all the sub-view content pane widgets that are contained within the tab container.
  templates/tab1.html The template view to load into the tab one content pane widget and manipulate through a controller. 

Basic HTML, no Dojo Toolkit widgets.
  templates/tab2.html The template view to load into the tab two content pane and manipulate through a controller. 

Basic HTML, no Dojo Toolkit widgets.
  templates/tab3.html The template view to load into the tab three content pane widget and manipulate through a controller. 

Basic HTML, no Dojo Toolkit widgets.
  samples A directory that contains the controller widgets.
  samples/ContentPaneController.js The Dojo Toolkit view controller for manipulating a content pane widget that is contained in a tab. 

The purpose of this controller is to provide an example child view controller that is part of an overall container view, such as the tab container widget.  This controller only completes one action:

On calls to its setMessage() function, the controller updates the content of the content pane with a new message.  Therefore, this controller is an interface point for working with widgets and data contained by that specific content pane.


5.)   Load the newly created index.html file in a browser of your choice.  Recommended browsers are Mozilla Firefox 2.0 or higher, Internet Explorer 6.0 or Internet Explorer 7.0.  Other browsers have not been tested with this example.  After the load finishes, you have an application in your browser that looks similar to the following example:

Example MVC Application Browser Screenshot


As you interact with the application by clicking tabs or by clicking the navigation buttons, the Firebug or Firebug Lite console window is updated.  The information provided in the debug console helps illustrate how items get initialized, how the events flow into the controller, and how it can then affect the specific view.  Because each content pane widget has a separate template, it is easy to modify a particular data view without effecting the rest of the application. 

In a more complex application or example, using one content paneController widget to control all the content pane widgets does not produce optimal results.  A practice is to implement a controller per content pane.  Using one controller per content pane widget provides separation between controllers and views in the application, which makes changing specific views easier than having one controller that controls all the content pane widgets and views.