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

  - 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",
    // 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);


            // Call the parser manually so it runs after our
           //  widget is defined, and page has finished loading

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 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

Using Widget in html page:

    <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 type='text/javascript'>
        require(["dijit/registry", "dojo/parser", "mywidget/TestWidget",
                "dojo/domReady!"], function(registry, parser) {
                    // Explicitly parse the page

    <body class='tundra'>
        <span data-dojo-type="mywidget.TestWidget"></span>

No comments:

Post a Comment