CODEWITHSUNDEEP
dojo
Kate
Kate

Reputation: 1576

How to parse a Dojo custom widget

I'm having some trouble with writing my own widget. I've created a widget that inherits from _WidgetBase, _TemplatedMixin and _WidgetsInTemplateMixin (as I'm also trying to build a UI where the widgets will contain other widgets). I'm loading the markup for the widget from a template using dojo/text. Here is a snippet:

define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/LayerManagerWidget.html"
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
    return declare("myApp.ui.platforms.desktop.widgets.LayerManagerWidget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

        // summary:
        //     This widget provides the layer manager user interface component

        // templateString: string
        //     Inherited from _TemplatedMixin, used to specify an HTML file to provide the markup
        templateString: template

    });

});

It's working to some degree and I think the problem is with parsing. Because the widgets aren't all required right from the start, I don't think they are being parsed. Some of the examples on the dojo widget tutorials include dojo/ready and dojo/parser in the widget and parse it but I haven't been able to work out how to do this: those same examples don't have a 'return' before the declare statement which I don't quite understand as then how do you then later instantiate the widget with something like var myWidget = new MyWidget(); ?

So I guess the main part of the question is, in the above example, where do I put a parser.parse() call (or in general, how do I make sure this widget gets parsed)?

Thanks!

Upvotes: 0

Views: 2681

Answers (2)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

In the widget code itself you shouldn't put stuff like parser.parse() or anything similar. To make sure a widget is being parsed, you have to import it in your main JavaScript file (one with a require() block) and parse it either automatically or manually.

So for example, if the widget is located in a file called MyWidget.js, you put something like this in your main JavaScript file (for example app.js):

require([ "custom/MyWidget", "dojo/parser" ]);

This will work just fine if you have configured Dojo to parse automatically. If you rather want to parse manually, you could use:

require([ "dojo/parser", "custom/MyWidget", "dojo/domReady!" ], function(parser) {
    parser.parse(); // Parses the entire DOM
});

If you want to programmatically create an instance of your widget, you don't need to parse at all, you just use:

require([ "custom/MyWidget", "dojo/domReady!" ], function(MyWidget) {
    var myWidget = new MyWidget({ }, "myDomNodeId");
});

For example: http://plnkr.co/edit/K3Zln6Q00g6v2DQeWcIM?p=preview

Upvotes: 2

sebilasse
sebilasse

Reputation: 4618

Did you read

http://dojotoolkit.org/reference-guide/1.9/quickstart/writingWidgets.html

->

ready(function(){
    // Call the parser manually so it runs after our widget is defined, and page has finished loading
    parser.parse();
});

Since you write a custom dijit widget, you can read about other functions in its lifecycle here:

http://dojotoolkit.org/documentation/tutorials/1.8/understanding_widgetbase/

-> "postCreate", "startup"

Upvotes: 1

Related Questions