ContentPane
A Content Pane is the most basic layout tile. Conceptually, it's like the content boxes in portals like MyYahoo. A content pane resembles an iframe, but contains extra design features, fits in with the current theme, and renders widgets properly.
You can use content panes by themselves, but usually you will place content panes inside of a layout container. For example, in a tabbed layout, content pane tags surround each tab of information.
Examples
Simple content panes have their content inside the tags Most of the time, these simple panes are used inside layout containers, so the examples in LayoutContainer, StackContainer and TabContainer illustrate their use.
Linked content panes, those with their content in a separate URL, are useful even without containers. To illustrate, we'll use the example data store countries.txt, which you can download below (after this page text, and right above the navigation bars). For the example to work verbatim, just place it in the same directory as these files on your web server. If the following is linked_content_pane.html:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
url="countries.txt"></div>
<div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
labelAttr="name" typeAttr="type"></div>
You can include it within a page like this. Because the tree may take a long time to load, we display a loading message for the user.
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Linked Content Pane Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Tree");
dojo.require("dojo.data.ItemFileReadStore");
</script>
</head>
<body class="tundra">
<div preload="true" dojoType="dijit.layout.ContentPane" href="linked_content_pane.html">
This text be replaced with the tree
</div>
</body></html>
Note here that the dojo.require for the tree is placed in the calling html. SCRIPT tags of type "text/Javascript" in the included html file are ignored. However SCRIPT tags with type dojo/method and dojo/connect work fine. See Understanding the Parser for details.
Like all Dijit components, you can create a ContentPane dynamically. The following example adds a new ContentPane to an existing Tab Container.
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Content Pane Programmatic Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.Tree");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
// create a ContentPane
var newChild =
new dijit.layout.ContentPane({
href:'linked_content_pane.html',
title:'newChild',
refreshOnShow:true
},
dojo.doc.createElement('div')
);
// find my tabContainer and add our new ContentPane
dijit.byId('myTabContainer').addChild(newChild);
// find parent Container and subscribe to selectChild event
// without it refreshOnShow and href load wont work.
newChild.startup();
});
</script>
</head>
<body class="tundra">
<div id="myTabContainer" dojoType="dijit.layout.TabContainer"
style="width:500px;height:300px"></div>
</body></html>
NOTE! You must include a sourcenode when creating a ContentPane. You must call .startup() after you have addChild() it to your parent
|
dijit.layout.ContentPane
A widget that acts as an all-purpose sizable pane without navigation, and includes a ajax interface
|
||
|
Attributes
|
||
| errorMessage | String Locale dep. |
Message that shows if an error occurs |
| extractContent | Boolean false |
Extract visible content from inside of <body> .... </body> |
| href | String | The href of the content that displays now. Set this at construction if you want to load data externally when the pane is shown. (Set preload=true to load it immediately.) Changing href after creation does not have any effect; see setHref(); |
| isLoaded | Boolean false |
Tells loading status see onLoad|onUnload for event hooks |
| loadingMessage | String Locale dep. |
Message that shows while downloading |
| parseOnLoad | Boolean true |
parse content and create the widgets, if any |
| preload | Boolean false |
Force load of data even if pane is hidden. |
| preventCache | Boolean false |
Cache content retreived externally |
| refreshOnShow | Boolean false |
Refresh (re-download) content when pane goes from hidden to shown |
|
Methods
|
||
| cancel() | Cancels a inflight download of content | |
| refresh() | Force a refresh (re-download) of content, be sure to turn off cache we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane | |
| resize(/* String */size | Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets) | |
| setContent(/*String|DomNode|Nodelist*/data) | Replaces old content with data content, include style classes from old content | |
| setHref(/*String|Uri*/ href) | Reset the (external defined) content of this pane and replace with new url Note: It delays the download until widget is shown if preload is false | |
|
Extension Points
|
||
| onContentError(/*Error*/ error) | called on DOM faults, require fault etc in content default is to display errormessage inside pane | |
| onDownloadEnd() | called when download is finished | |
| onDownloadError(/*Error*/ error) | Called when download error occurs, default is to display errormessage inside pane. Overide function to change that. The string returned by this function will be the html that tells the user a error happend | |
| onDownloadStart() | called before download starts the string returned by this function will be the html that tells the user we are loading something override with your own function if you want to change text | |
| onLoad(/* Event */e) | Event hook, is called after everything is loaded and widgetified | |
| onUnload(/* Event */e) | Event hook, is called before old content is cleared | |
Accessibility - updated for 1.0
General Issues
The developer is responsible for determining if the ContentPane should be in the tab order of the page or not. If the ContentPane is not likely to have a focusable item within the contents, the developer may want to add tabindex=""0" onto the ContentPane element. This will put the ContentPane into the tab order so if someone is using the tab key to navigate through the elements on the page, the ContentPane itself will get focus. Having focus go to the ContentPane itself can be helpful for users of assistive technology to be able to navigate to an area that may not have any focusable elements within it such as a preview pane for mail messages or a page footer containing important information.