CODEWITHSUNDEEP
javascriptdojo
Aadi Droid
Aadi Droid

Reputation: 1739

Adding dojo widget inside custom widget

I am making a small dojo widget, basically extending the dailog widget and want to add simple widgets like a text input a few labels etc. How do i go about this? I am following a tutorial,

Dojo how to make a widget

Please help me out.

Thanks

Upvotes: 3

Views: 4691

Answers (2)

belzebu
belzebu

Reputation: 820

If I understood correctly, you are asking about how to include another widgets within your custom widget. If that's the case, then we have to modify OammieR's answer a bit, as it's not complete in regards to your question. To include other widgets within your custom widget, you should include them in your widget declaration:

dojo.provide("gissoft.dijit.widgetOam"); 

dojo.require("dijit.form.Button"); //<- this the standard widget you want to have in your widget
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("gissoft.dijit.widgetOam", [dijit._Widget, dijit._Templated], {
    widgetsInTemplate: true,
    basePath: dojo.moduleUrl("gissoft.dijit"),
    templatePath: dojo.moduleUrl("gissoft.dijit", "templates/widgetOam.html"),

particularly important is the "widgetsInTemplate: true" part which tells the parser to expect the widgets inside the widget.

Then you just include the HTML markup for the particular widget you'd like to include in your widget's template.

<div> <!-- do not add tag <html> , <head> , <body> but must have <div> first -->
    <button data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="_innerWidget" data-dojo-attach-event="ondijitclick:_onClick">Yo!</button>
</div>

dojoAttachPoint is useful so you can get a reference to this widget straightaway in your widget's implementation without getting a reference via dijit.byId('').

Hope this helps.

Upvotes: 3

OammieR
OammieR

Reputation: 2870

First. I'am not good at english, but will do at my best.

This is the path of my widget.

enter image description here

Here. The important code in the js file that must declare.

dojo.provide("gissoft.dijit.widgetOam"); 

dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("gissoft.dijit.widgetOam", [dijit._Widget, dijit._Templated], {
    widgetsInTemplate: true,
    basePath: dojo.moduleUrl("gissoft.dijit"),
    templatePath: dojo.moduleUrl("gissoft.dijit", "templates/widgetOam.html"),

    constructor: function () {

    },

    postMixInProperties: function () { 

    },

    postCreate: function () {

    },

    startup: function () {

    }

});

And in file widgetOam.html(templatePath)

<div> <!-- do not add tag <html> , <head> , <body> but must have <div> first -->
    Hello World.
</div>

And this is how to call widget from my Default.aspx

You must add this before you call the dojo library

<script>
   djConfig = {
       parseOnLoad: true,
       baseUrl: './',
       modulePaths: { 'gissoft.dijit': 'js/gissoft/dijit' }
   };
</script>

And in the body

<body class="tundra">
    <form id="form1" runat="server">
    <div>
        <div data-dojo-type="gissoft.dijit.widgetOam"></div>
    </div>
    </form>
</body>

Upvotes: 7

Related Questions