Creating template based iwidgets in Dojo.?

Question

I am learning Dojo And trying to create a iWidget on WebShere Application server.

I first tried to create Helloworld widget. Which got deployed.

Now i want to add template.

I create a LoginCmis.html in Template folder this template is gui for asking Username and password.

in CustomerInteraction.js i have created a template String . How to add this on onLoad.

 <div class = LoginCmis>
        <div dojotype="dijit.layout.BorderContainer" id="BorderContainer"
        design="headline" style="height: 250px; width: 400px" align="center">

            <div preload="true" dojotype="dijit.layout.ContentPane" 
                region="top">Login CMIS
            </div>
            <div preload="true" dojotype="dijit.layout.ContentPane" region="centre">

                <table class="form">
                    <tr>
                        <td>UserName</td>
                        <td><input type="text" dojotype="dijit.form.ValidationTextBox"
                            name="username" required="true" maxLength=64 trim="true"
                            style="width: 200px; text-align: left" 
                            dojoattachpoint="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" name="password" value=""
                            dojotype="dijit.form.ValidationTextBox" 
                            style="width: 200px; text-align: left"
                            dojoattachpoint="password"/>
                        </td>
                    </tr>
            </table>
        </div>
        </div>
    </div>

in my CustomerInteraction.xml (this was for Hello world do i have to make any changes here) fot the content

<iw:content mode="view">
        <![CDATA[
              <div id ="helloWorld" > Hello World ! </div>
       ]]>
 </iw:content>

In customerInteraction.js

    dojo.provide("helloWorldScope");
    dojo.require("dijit._Widget");
    dojo.require("dijit._Templated");
    dojo.declare("",[ dijit._Widget, dijit._Templated ],{

        templateString : dojo["cache"]("iWidget/widgets/CustomerInteraction", "Template/LoginCmis.html");


        msg1: "Hello World Class Loaded",
        msg2: "Hello World, again",


    onLoad:function() {
            alert(this.msg1);
        }
});

What are the change i have to make to view this template??

the folder design look this

Answer 1

Add this mixin _WidgetsInTemplateMixin to youre declaration.

A widget has no default onLoad function to call / bind. It will however as final stage of constructing itself, call startup

Make sure dojo knows where to look for youre module and make a div with type so that dojo.parser can reckognize it as a widget.

CustomerInteraction.xml:

 <script>
      dojo.registerModulePath("iWidgets", "/iWidget");
      dojo.require("iWidget.widgets.customerInteraction");
 </script>
 <div dojoType="iWidget.widgets.customerInteraction"></div> ... </body>

WebContent/iWidget/widgets/customerInteraction.js

dojo.declare("iWidget.widgets.customerInteraction",[ dijit._Widget, dijit._Templated, dijit._WidgetsInTemplateMixin ],{
     ....
     buildRendering: function() {
          // pre-parser point in flow of construction
          // add you code here
          this.inherited(arguments);
     },
     startup: function() {
          // 'post create' point in flow of construction
          // add you code here
          this.inherited(arguments);
     }
});