Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

The Dojo Toolkit: Layout Dijits

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book
Steve Holzner discusses layout Dijits, including the stack container and accordion container.

One of Dojo's specialties is layout Dijits. Layout Dijits let you arrange your other Dijits on a Web page, displaying them, for example, in tabbed pages. Because space is at a premium in browsers, tabs are very useful, especially if you have lots of controls to display, so you don't have to crowd them in.

Dojo also offers stack container Dijits, which lay out Dijits in a stack, with buttons to move through the stack. Click a button, and you're looking at the next page in the stack. Stack containers also help save space, but tab containers are more commonly understood by users.

A novel Dijit that Dojo offers is the accordion container, which presents the user with a set of labels arranged one next to the other. Clicking a label makes that accordion pleat open, revealing the controls it contains. The accordion layout Dijit is famous and has long been a hallmark of Dojo—in fact, some programmers think of the accordion container almost exclusively when they think of Dojo.

In this chapter, we'll explore these various types of Dijits.

Using ContentPane

The ContentPane Dijit is the Dijit that you use as a single page in a layout Dijit. For example, a tabbed container with six pages usually uses six content panes. You use the ContentPane Dijit to display each page of Dijits that you store in a layout container.

ContentPane Dijits are usually created from <div> elements with the dojotType attribute set to dijit.layout.ContentPane. Because a ContentPane Dijit is built from <div> elements, you can use a style attribute to arrange the Dijits in a content pane as you like.

The example here, contentpane.html, creates a content page and displays the text "This is a content pane." Because content panes are usually based on <div> elements, nothing special would appear in the Web page—just the text. To spiff things up a little, we'll also draw a dotted border around the content pane.

To create a content pane:

  1. Open your Web page in a text editor.
  2. Add a dojo.require("dijit.layout.ContentPane"); statement to your code.
  3. Create a new <div> element with a border (use the style attribute to create the border) and set the <div> element's dojoType attribute to dijit.layout.ContentPane. Enclose some text in the <div> element.

    Script 4.1 shows what your page should look like after you make the additions.

    Script 4.1. Creating a content pane.

    1    <html>
    2      <head>
    3        <title>Using Content Panes</title>
    4
    5        <link rel="stylesheet"
    6          type="text/css"
    7          href="http://o.aolcdn.com/
    8          dojo/1.1/dojo/
    9          resources/dojo.css" />
    10
    11       <link rel="stylesheet"
    12         type="text/css"
    13         href="http://o.aolcdn.com/dojo/
    14         1.1/dijit/
    15         themes/tundra/tundra.css" />
    16
    17       <script
    18         djConfig="parseOnLoad:true"
    19         type="text/javascript"
    20         src="http://o.aolcdn.com/dojo/1.1/
    21           dojo/dojo.xd.js">
    22       </script>
    23
    24       <script type="text/javascript">
    25         dojo.require(
    26         "dijit.layout.ContentPane");
    27       </script>
    28     </head>
    29
    30     <body class="tundra">
    31       <h1>Using Content Panes</h1>
    32       <br>
    33       <div
    34         dojoType=
    35         "dijit.layout.ContentPane"
    36         style=
    37         "border: .2em dotted #900;">
    38        This is a content pane.
    39      </div>
    40    </body>
    41  </html>
    
  4. Save your file.
  5. Navigate to your file in a browser. You should see the content pane, showing text and a dotted border (Figure 4.1).
    Figure 4.1

    Figure 4.1 A Dijit content pane.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus