Dynamically loading widgets in Dojo ContentPanes

Question

I have a JSP page with 6 custom widgets in a TabContainer. The code looks something like this:

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', gutters:false">
    <div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>">
        <div data-dojo-type="my/custom/Widget"></div>
    </div>
    ...(5 more ContentPanes like this)
</div>

When the page loads, each tab loads each widget and it's pretty slow. Most of the time, I only need to access one of those tabs and don't care about the others, so I decided I want to load this content dynamically.

When the href property is specified for a Dojo ContentPane, that content will not be loaded or parsed until that tab is selected. The only problem is, that means I would have to create 6 new .html files that have nothing besides in them. It's like a declarative way to programmatically load widgets... kind of weird.

Is there a way I can simply tell the ContentPane I just want it to dynamically load my custom widget instead of having to create html markup? Currently, I created a Spring controller method that accepts a String with a "widget" property and returns a string that is a div with the data-dojo-type set to the widget name, which is a programmatic way define declarative markup to be loaded programatically... it just keeps getting weirder! So now all of my content panes look like this:

<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>" data-dojo-props='href:"rest/dynamicWidgetHtml/my.custom.Widget/"'></div>

Where "my.custom.Widget" is a spring controller path variable.

Any way to simplify this and eliminate the need for calling the server to build the div so the widget can be dynamically loaded when the tab is selected?

frank frank · Accepted Answer · 2014-06-07T12:23:29

Would like to know how familiar are you with JavaScript and Dojo widgets.?

I have tried to answer the questions with some assumptions.
1) Assuming that data-dojo-type="my/custom/Widget" is a custom dojo widget i.e dojo widget contained in a javascript file.
2) You are able to attach a function to the onShow event of the ContentPane as shown below.

First is you need to attach a function to the contentPane "onShow" event. say myFirstTabContentPaneShowAction() and specify a element tag with a unique ID. I have used widget1 as an example below. The onShow event will be fired when you select the tab.

<div dojoType="dijit.layout.ContentPane" onShow="myFirstTabContentPaneShowAction()">
    <div id="widget1" ></div>
</div>

The myFirstTabContentPaneShowAction() will be as follows.

function myFirstTabContentPaneShowAction()  {

require (  ["dojo/parser", "dojo/dom", "my/custom/Widget"] , function ( parser, dom) {

    widgetHandle = parser.instantiate([dom.byId("widget1")], {data-dojo-type: "my.custom.Widget"});

});

Hope it helps.

Dynamically loading widgets in Dojo ContentPanes

1 Answers