CODEWITHSUNDEEP
dojo
rgamber
rgamber

Reputation: 5849

Dojo beginner question: How do I get my custom widget to render?

I am trying to write a simple Dojo HelloWorld Widget, but I cannot see the output in the browser. The directory Structure:

tutorial
  dojotoolkit
      dijit
      dojo
      dojox
      my_ext
         HelloWorldWidget.js
  test.html

Below are the codes:

HelloWorldWidget.js

dojo.provide("my_ext.HelloWorldWidget");

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

dojo.declare(
"my_ext.HelloWorldWidget",[dijit._Widget,dijit._Templated], {
    templateString: '<div>This is a test</div>'
});

test.html

<html>
    <head>

    <script type="text/javascript">
        var djConfig = {
        isDebug:true, parseOnLoad:true
        };
    </script>

    <script type="text/javascript" src="dojotoolkit/dojo/dojo.js"></script>

    <script language="JavaScript" type="text/javascript">
        dojo.require("my_ext.HelloWorldWidget");
    </script>

    </head>
    <body>
       <!-- as an HTML element with dojoType attribute -->
       <div dojoType="HelloWorldWidget"></div>
    </body>
</html>

It'll be really helpful if someone can point out the mistake. I have spent quite some time fruitlessly on this. Thanks.

Upvotes: 1

Views: 379

Answers (2)

Andrei
Andrei

Reputation: 4237

First of all, move this js block from head to body:

<script language="JavaScript" type="text/javascript">
  dojo.require("my_ext.HelloWorldWidget");
</script>

The second use full name of your widget in dojoType attr:

<body>
    <script language="JavaScript" type="text/javascript">
        dojo.require("my_ext.HelloWorldWidget");
    </script>
    <div dojoType="my_ext.HelloWorldWidget"></div>
</body>

Upvotes: 2

peller
peller

Reputation: 4543

Have you checked the console for error messages?

Your widget is called my_ext.HelloWorldWidget dojoType needs that fully qualified name to find the widget.

Upvotes: 3

Related Questions