Complex layout: Single page and multiple view

As the simple layout demonstrates, it is relatively straightforward to create an application based on Dojo that uses controllers in the browser.  However, single page and single view applications are often not dynamic.  Multiple Web sites prefer to use more complex view layouts with independent views and controls within a single page to help eliminate scrolling and navigating back and forward through the site.  That pattern often uses a left side bar for navigation and a right or central pane for the actual information being viewed and manipulated.  For example, the following diagram shows a common layout; many layouts are variants of two or three views in a single page:

Single page and multiple view image


Several techniques are available for dividing the browser window and the most common use the <FRAME> and <FRAMESET> tags.  However, when using Asynchronous JavaScript and XML (Ajax) toolkits, such as the Dojo Toolkit, the recommendation is to not use frames and framesets.  Frames and framesets usage causes errors with the Dojo Toolkit because of multiple loads of the JavaScript files for Dojo.  These loads can effect the initialization state and the functioning of widgets and the widget manager.  Such usage also generally restricts the ability to communicate across views and controls and increases memory usage of the browser because of multiple instances of the various Dojo Toolkit controls.

The Dojo Toolkit provides a way to do complex layouts without frames and framesets; a class of widgets exists in the Dojo Toolkit called container widgets.  The most common set of container widgets are included in the following list with a brief description of what they do with respect to layout control.  For more specific details on each container type, refer to the Dojo Toolkit documentation on the Dojo site.

Layout Container (deprecated) @see BorderContainer
The layout container widget is a frame with a specified size that can be in either pixels, or the entirety of the screen.  Its purpose is to contain children containers, widgets or views that have a special layout alignment associated with them, such as top, bottom, right, left, and so on.  This container widget is useful for your top-level layout.  You can position a banner, side items, and so on.
Split Container (deprecated) @see BorderContainer
The split container widget does what the function frames did in basic HTML: division of the current container into independent views.  The previous illustration shows use of the split container widget.  One split container widget divides the page into a right and left view.  The right view contains another split container widget that splits into a top and bottom view. 
Border Container
The border container is a flexible meta container for holding other views. It allows the region to be split into multiple, much like SplitContainer, but does so in a cleaner and more configurable fashion. Use this container in place of the older Split Container.
Tab Container
The tab container widget implements a tab view.  Each tab can be another container that controls content independently.  Most often, a tab container widget is a collection of content pane widgets, each of which display independent information.  By selecting a tab, the selected content pane widget is brought to the front and rendered into the browser.
Accordion Container
The accordion container widget is similar to a stack of books on a table: only one book in that stack can be visible at any time. Like tab container widgets, each view in the accordion container widget is often a content pane widget.  When the required container is clicked to view, the currently opened one is moved and closed.  You can compare this widget as a well animated sliding view container.
Content Pane
The content pane widget is one of the most highly used containers in the Dojo Toolit.  This widget encapsulates the ability to display HTML content through parsing of contents within the ContentPage tag or through the loading of external HTML files by setting the href attibute.  The latter is more robust because you can define each of your single views as HTML documents with embedded Dojo widgets.  Doing so provides modularity in how your views are loaded and is useful for constructing individual views.  The content pane widget also supports easy one-to-one controller to view mapping, as discussed in more detail in the controller section of this tutorial and demonstrated in the example at the end.

In general, the most useful containers for creating an MVC pattern are a combination of layout container, split container, and content pane.  The tab container and accordion container also provide other useful mechanisms for dividing and managing views.  However, you need more than these items to get a sufficient layout of the views for your application.  Correct Cascading Style Sheets (CSS) are necessary to use the Dojo Toolkit widgets effectively. 

To help illustrate how you can create a set of independent views in a single page through Dojo, a layout using the layout container, split container and content pane widgets is provided in the following example.  The purpose of the inline CSS file in this example is to ensure that the container widgets expand to fill the entire browser window.

Source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test layout</title>
    <style>
        @import "dijit/themes/tundra/tundra.css";
        @import "dojo/resources/dojo.css";
        
        html, body { height: 100%; width: 100%; overflow: hidden;}
                     
        .banner {
            background: #C0C0C0;
            height: 90%;
            font-size: 1.5em;
            vertical-align: center;
            text-align: center;
            border-width: 2px;
            border-style: solid;
            border-top-color: #AAAAAA;
            border-bottom-color: #888888;
            border-left-color: #AAAAAA;
            border-right-color: #888888;
        }

        .container {
            background: #FFFFFF;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
    </style>
    
    <script type="text/javascript" src="dojo/dojo.js" djConfig="debug: true, parseOnLoad: true"></script>
    <script language="JavaScript" type="text/javascript">
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.form.Button");
    </script>
</head>
<body class="tundra">
    <div dojoType="dijit.layout.BorderContainer" class="container" gutters="false">
        <div dojoType="dijit.layout.ContentPane" region="top" style="height: 59px;">
            <div class="banner">
                your banner here
            </div>
        </div>
        <div id="TopDivisionContainer"
             dojoType="dijit.layout.BorderContainer"
             region="center"
             class="splitView"
             design="sidebar"
             gutters="true"
        >
            <div id="TreeContainer"
                 dojoType="dijit.layout.ContentPane"
                 style="width: 20%; height: 100%;"
                 splitter="true"
                 region="left"
            >
                Your navigation tree can go in this container.
            </div>
            <div  id="DataContainer"
                  dojoType="dijit.layout.BorderContainer"
                  gutters="true"
                  region="center"
            >
                <div dojoType="dijit.layout.ContentPane"
                    region="center"
                >
                    Your data view information can go in this container.   
                </div>
    
                <div dojoType="dijit.layout.ContentPane"
                     style="height: 25%;"
                     region="bottom"
                     splitter="true">
                    Results/status can be posted in this container.
                </div>
            </div>
        </div>
   </div>
</body>
</html>


Browser output:

Example Multi view/Single Page Layout