Basic layout:  Single page and single view

Web application developers start with this basic layout, which is a page of HTML markup that contains some type of information, data, or action controls, such as a form submission button.  Constructing this basic view type is still possible with the Dojo Toolkit and easily implemented with minimal boilerplate text to include in your HTML document.  Load the top-level Dojo Toolkit control file, dojo.js, and then embed references to the Dojo Toolkit widgets that make up your single page and single view. 

The following example shows a simple page and a single view with a few embedded Dojo Toolkit controls.  This example, in fact, also illustrates the basic concepts of embedding controllers in the page and view that runs in the client as part of an Model View Controller (MVC) application.  For this particular example, the Dojo widget that is used to illustrate the concepts is the dijit.Tree widget.  This particular widget is not useful without a controller that reads data from a model and provides the data to the tree.  Therefore, the page includes a declarative definition of a basic dojo.data file data store, ItemFileReadStore.  The role of the store is to act as the arbitrator for the tree to request data from a data provider and expose it to the tree in a data format agnostic manner.  More complex controllers can send events to other views, query data from some server data service, open other views, or so on.  Read about the controller for more details.

Simple view source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <title>Tree and controller example</title>

        <!-- Import the basic default themes of digit. -->        
        <style type="text/css">
            @import "dijit/themes/tundra/tundra.css";
            @import "dojo/resources/dojo.css";
        </style>
        
        <!--
           Import the top-level Dojo javascript file.
           Assumes that Dojo is provided in a dojo/ directory.
           In this simple webapp
        -->
        <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
        
        <!--
           Import the widgets that this example uses.
           These are similar in concept to Java imports.
           or C #includes
        -->
        <script type="text/javascript">
            dojo.require("dijit.Tree");
            dojo.require("dojo.data.ItemFileReadStore");
        </script>
    </head>
    <body class="tundra">
        <!--
            Initialize a data store.  The data store is
            a data interface controller for the tree.
        -->
        <div dojoType="dojo.data.ItemFileReadStore"
             jsId="dataStore"
             url="simpleTree.json">
        </div>
        
        <!--
           Initialize the tree and give it the reference to the data store
           that will feed it data
        -->
        <div dojoType="dijit.Tree"
             store="dataStore">
        </div>
    </body>
</html>

Contents of simpleTree.json (for reference):
{
        label: "name",
        items:[
                { name:'Node 1', children:[
                        { name:'Node 1.1'},
                        { name:'Node 1.2'},
                        { name:'Node 1.3'}
                ]},
                { name:'Node 2'},
                { name:'Node 3', children:[
                        { name:'Node 3.1', children:[
                                { name:'Node 3.1.1'}
                        ]}
                ]}
        ]
}




Browser result:
Single page view image