The Dojo Toolkit: Layout Dijits
This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
- Open your Web page in a text editor.
- Add a dojo.require("dijit.layout.ContentPane"); statement to your code.
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="https://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>
- Save your file.
- 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 A Dijit content pane.
)