Login Register

ContentPane, LinkPane

ContentPane → dijit.layout.ContentPane

dojo.require("dijit.layout.ContentPane");

The ContentPane in Dijit is a stripped version of the 0.4.
There is a Dojox ContentPane with more the more advanced features.

Properties
0.40.9Comments
labeltitleFor ContentPanes (or other widgets) that are children of TabContainer or StackContainer (nee PageContainer), use "title" to specify the title rather than "label"
cacheContentpreventCache
parseContentparseOnLoadCreate widgets within content
adjustPathsdeletedFix relative paths within content
handlerdeleted
executeScriptsdeletedBut <script type="dojo/method">...</script> available in dojo.parser are supported
scriptScopedeleted
scriptSeparationdeleted
bindArgsdeleted
hrefsameFor the uncommon case when you have a ContentPane with an href that's *not* inside a TabContainer etc. you need to set preload=true.
Methods and events
0.40.9Comments
setUrl(url)setHref(url) Get content in url
abortcancelAbort a download
setHandler(function)deleted
addOnLoad(function)deletedonLoad event still exists for setContent/setHref - while you cant call addOnLoad() you can connect to this event to achieve similiar goals
addOnUnload(function)deletedonUnLoad event still exists for setContent/setHref - while you cant call addUnOnload() you can connect to this event to achieve similiar goals
showdeleted
hidedeleted
loadContentsdeleted
splitAndFixPathsdeleted
onExecErrordeleted
Inherited methods (the commonly used ones)
addChilddeleted
removeChilddeleted
onClosedeleted
onShowdeleted
onHidedeleted
Default changes
0.40.9Comments
extractContent
default true
extractContent
default false
Grab content within ... throw away the rest.
Prevents DOM fault when content includes tags that belongs to <head>


Examples

Create a ContentPane dynamically: in 0.4

var cpane = dojo.widget.createWidget({properties...});

dojo.body().appendChild(cpane.domNode);
in 0.9
var cpane = new dijit.layout.ContentPane({properties...}, dojo.doc.createElement('div'));

dojo.body().appendChild(cpane.domNode);

cpane.startup(); // start loading href if href is set
NOTE! You must include a sourcenode when creating a ContentPane, the auto create element feature in 0.4 is deleted
You should also call startup() to get things rolling.



Tabs sample, creation from markup: in 0.4

<div dojoType="TabContainer" style="width: 100%; height: 20em;" selectedChild="tab2">
        <div id="tab1" dojoType="ContentPane" href="tab1.html"
                style='display:none' label="Tab 1">
</div>
       
        <div id="tab2" dojoType="ContentPane" href="tab2.html"
                refreshOnShow="true" label="Tab 2">
</div>
</div>
in 0.9
<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;">
        <div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html"
                title="Tab 1">
</div>
       
        <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html"
                title="Tab 2" refreshOnShow="true" selected="true">
</div>
</div>
As you can see it is pretty much the same syntax in 0.9, label has changed to title and you no longer need to hide ContentPane to achive lazyload when it is a child of StackContainer or a derivate thereof such as TabContainer and AccordionContainer
NOTE! in 0.9beta there is a bug that breaks refreshOnShow, trac #3764



Adding a ContentPane to a TabContainer

// create a ContentPane
var newChild = new dijit.layout.ContentPane({
					href:'remotepage',
					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();
NOTE! you must call .startup() after you have addChild() it to your parent



Connecting a callback to a widget within content
Although scripts handling have been removed from ContentPane, you can still attach a callback to some widgets within your content because the dojo.parser in 0.9 supports makes it possible.

Imagine this content:

Party date:
<span dojoType='dijit.form.InlineEditBox'>
        <input name='date' value='2007-12-31'
                dojoType='dijit.form.DateTextbox'/>

        <script type='dojo/method' mode='connect' event='onChange'>
                saveNewDate(this.name, this.getValue()); // delegate to a global function to save bandwidth
        </script>
</span>
NOTE! you must declare your script tag as a child of the widget you want to connect to, and set type attribute to dojo/method
Setting parseOnLoad=false obviously turns of this feature.




LinkPane → dijit.layout.LinkPane

dojo.require("dijit.layout.LinkPane");

dijit.layout.LinkPane has no LinkPane specific changes, just the one introduced in the baseclass ContentPane.
LinkPane is usefull when you want a degradable page, that still lets the user read the content even if JS is turned of.


Example

<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;">
        <a id="tab1" dojoType="dijit.layout.LinkPane" href="tab1.html"
                title="Tab 1">
tab1</a>
       
        <a id="tab2" dojoType="dijit.layout.LinkPane" href="tab2.html"
                title="Tab 2" refreshOnShow="true" selected="true">
tab2</a>
</div>
The anchor tags is just normal hyperlinks if JS is turned of or a error occured that prevented widgets from creating.
If Js is working though it will transform into a nice looking Tab widget.

TODO: (talk about dojox.layout.ContentPane, which features should it has, or elsewhere in Dojox part of Book??)

i am in trouble with ContentPane

i use dojo0.9 , but dijit.layout.ContentPane didn't support "executeScript" any more . and there is not dojox ContentPane now . how can i do ? i read the code about 0.4.3 ContentPane , it's difficult to copy codes to quickly use, there are lots of Regex.

is there a easy way to solve the problem?

get the latest code

In the latest code (post beta) there is a dojox.ContentPane... see archive.dojotoolkit.org/nightly

thanks

thanks a lot

So there's no replacement for a "handler"?

Or is there any solution that is just not mentioned? I have to dynamically create a new URL out of the page to load a ContentPane which was nicely done in 0.4 using the handler...
if you don't have a solution (will it come with 1.0?) I'll have to customize my ContentPane 0.9...
Would be great if I could do it another way.

override?

Nothing built in; we didn't think anyone was using that.  I think you can just override _downloadExternalContent(), like

<div dojoType=dijit.layout.ContentPane>
  <script type="dojo/method" event="_downloadExternalContent">
       this.href = ....;
      dijit.layout.ContentPane.prototype._downLoadExternalContent.apply(this, arguments);
 </script>
</div>

Thanks for the quick reply, but...

The handler was used before, because the creation mechanism of the URL was using an dojo.io.bind to get parts of the URL from the Server. After the results were returned, setContent was called. That's why your solution wouldn't work (even though I learned something from it concerning dojo/method ^^).
Where&How can I hook my URL-producing function to?

ok

Maybe you want to override _downloadExternalContent() completely then. You'll have to look at the ContentPane code and play it with it a bit.

need example of setContent onLoad event for ContentPane

I am trying to find an example of the following for use with a dijit.layout.ContentPane within a TabContainer

"onLoad event still exists for setContent/setHref - while you cant call addOnLoad() you can connect to this event to achieve similiar goals" (from the above)

I've tried dojox.layout.ContentPane, but there is a bug in refreshOnShow that precludes using it until 1.1 (at least at my limited level of expertise). I want to prevent caching, and dynamically set a few nodes' innerHTML on each refresh.

found (perhaps obvious) way to connect to selectChild, setHref

I figured out one way of doing this, which may have been obvious to someone less of a beginner:

dojo.addOnLoad(function(){
    var w =dijit.byId("mainTabContainer");
    dojo.connect(w, "selectChild", oscars.Form.stateChanged);
  });
  dojo.addOnLoad(function(){
    var w =dijit.byId("sessionPane");
    dojo.connect(w, "setHref", oscars.Form.hrefChanged);
  });

on the main page instantiating the tab container and a content pane named sessionPane. The selectChild rather than the onLoad event was what I was interested in.

In oscars.Form,

oscars.Form.stateChanged = function(contentPane) {
    // contentPane is ContentPane widget
    console.log(contentPane.id);
}

oscars.Form.hrefChanged = function(newUrl) {
   console.log(newUrl);
}