Dojo Toolkit create dynamic widget at runtime

Question

I'm pretty new to Dojo and working version 1.10. I'm looking for a solution to create a widget at runtime, based on data requested from a server.

The application has a tree. If you click on a item in the tree a new tab should be created and a script should be executed to get the data from the server and create the widget. (In most cases its a form, the data from the server describes the types of inputs). The location of the script is stored in the tree node.

At the moment in my application I can click on the tree node -> a contentpane is created and added as a tab. In the contentpane the href-attribute is set to static .html-site like this:

dynWidget.html?scriptlocation=abc

In the .html file I tried to read the parameters from the URL via the location attribute. This, of course, does not work, because the location attribute contains the URL of the complete site not the URL attached in the content pane.

Is there a possibility to get the href-attribute from the contentpane? Is there a completely diffrent solution for this problem?

Any help appreciated! Thank you very much!

Answer 1

Your question could do with more detail, but maybe you need:

var node = dojo.byId("contentpane");
var value = domAttr.get(node, "href-attribute");

Answer 2

• Save data about tree items in dedicated store
• Use Object Pool Pattern for saving opened tabs list

• Use require and Widget.addChild()

  // Custom name for click event handler. Replace to own.
  onItemClick: function(item) {
      // Getting data from store. Any item have full path to widget.
      var dataItem = store.get(item.id),
          requirePath = dataItem.requirePath; // Full path to widget
  
      // Load widget via require function
      require([ requirePath ], function(LoadedWidget){
          var newTab = new ContentPane({}),
              newWidget = new LoadedWidget({});
  
          // Append tab in the global tabs store
          desktop.tabs.add(newTab);
  
          // Place new widget to tab
          newTab.addChild(newWidget);
  
          // Run new widget:
          newWidget.startup();
      });
  }
  

Also example for creating widget in runtime:

define([
    "dojo/dom-construct",
    "dojo/_base/declare",
    "dijit/_WidgetBase"
], function(
    domConstruct,
    declare,
    _WidgetBase
){
    return declare(
        "My.Widget.Name", 
        _WidgetBase,
        {
            buildRendering: function(){
                this.inherited(arguments); // Call parent method
                this.domNode = domConstruct.create("div", {
                    // Detail properties of DOM element
                });
                this._button = domConstruct.create("button", {
                    label: "OKAY"
                });
            },

            _okBtnHandler: function(event) {
                // Handler for click by OKAY button

                console.log(this); // Instance of widget, not button DOM node
            },

            startup: function(){
                this.inherited(arguments);

                // Connect handlers to widget dom elements
                // Also, "this" for handler now is My.Widget.Name instance, not DOM Button element
                this.connect(this._button, "onClick", "_okBtnHandler"); 
            }
        }
 );
});