24 May 2012

Creating a custom Dojo Widget with Dojo 1.7


Dojo widgets can be placed under dojo root directory.
Sample directory strcuture for creating a sample widget is like

dojo
  - dijit
  - dojo
  - dojox
  - mywidget
      - TestWidget.js
      - widget.tmpl



Sample widget code ( TestWidget.js)

require (
// Define the dependancies
    [
        "dojo/_base/declare", "dojo/parser", "dojo/ready",
        "dijit/_WidgetBase",  "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin",
        "dijit/layout/BorderContainer",
        "dijit/layout/AccordionContainer",
        "dijit/layout/TabContainer",
        "dijit/layout/ContentPane"
    ],
   
    // Pass them as argument to declare function

    function(declare, parser, ready, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
   
        // Actual Widget body goes here
        declare("mywiget.TestWidget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {

            // gives the path for template to use
            templatePath: "js/dojo/mywidget/widget.tmpl",
   
           // If want to use template String instead
           // templateString: "<div>MyWidget<div>;

            widgetsInTemplate : true,

            postCreate : function (args, farg)
            {
                //this.inherited('postCreate', arguments);
            },

            }
        });

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



Sample widget template code (widget.tmpl)

<div id="${id}" style='height:100%; width:100%'>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="liveSplitters:false, design:'sidebar'" style='height:100%; width:100%'>
        <div data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 300px;">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">
                    Tab 1 Content
            </div>
        </div>
        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">
                Tab 1 content
            </div>
        </div>
    </div>
</div>




Using Widget in html page:

<html>
<head>
    <title> My widget : test</title>

    <link rel="stylesheet" type="text/css" href="js/dojo/dojo/resources/dojo.css"/>
    <link rel="stylesheet" href="js/dojo/dijit/themes/tundra/tundra.css"></link>

    <script src="js/dojo/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>

    <script type='text/css'>
    </script>

    <script type='text/javascript'>
        require(["dijit/registry", "dojo/parser", "mywidget/TestWidget",
                "dojo/domReady!"], function(registry, parser) {
                    // Explicitly parse the page
                    //parser.parse();

        });
    </script>
   
</head>
    <body class='tundra'>
        <span data-dojo-type="mywidget.TestWidget"></span>
    </body>
</html>


No comments:

Post a Comment