07 January 2011

Writing custom Dojo widgets

Key terms:

Dijit :a dijit is any Dojo class that inherits from a foundational class from Dijit called _Widget. This class is part of the toolkit’s foundational dijit module, so the fully qualified name of the class is dijit._Widget.

Dijit is collection of css, javascript and HTML code.
Directory structure may be like:
+  `--- customdijit
 +      `+--- TestDijit.js
 +       +--- templates
 +       +    `--- testdijit.html
 +       +--- themes 
 +             `--- testdijittheme.css
TestDijit.js contains the Dijit class that extends the dojo foundation class _Widget.
testdijit.html contains the html code.
testdijittheme.css applies the theme for the dijit.

Source code for TestDijit.js


dojo.declare("customwidget.TestDijit",  [dijit._Widget, dijit._Templated],
    // Template path for the template used for creating widget
    templatePath : dojo.moduleUrl('customwidget.template', 'testdijit.html'),

    // widget contains other Dojo widgets so set it to true
    widgetsInTemplate : true,

    // Language by default it is EN : English
    lang : 'EN',

     // This function is called after the widgets in templates are created
     // Hear we can add custom events, can used for initialization
     postCreate: function(args, frag)
         this.inherited('postCreate', arguments);
     // Function in widget will be called on button click 
      clickEvent : function()
         alert("Button Click event");

Sample template file: testdijit.html

<div id="${id}">
<!-- clickEvent will be fired when we click on button -->
<input dojoattachevent="onClick: clickEvent" dojotype="dijit.form.Button" label="Search" />


How to use the Dijit in HTML page

1. Load the module using dojo.require

<title>Testing Custom Widgets </title>
<link rel="stylesheet" type="text/css" href="/js/dojo/dojo/resources/dojo.css"/>
<link rel="stylesheet" type="text/css" href="/js/dojo/dijit/themes/tundra/tundra.css"/>
<script type="text/javascript" src="/js/dojo/dojo/dojo.js" djConfig="parseOnLoad:true"> </script>
<script type="text/javascript">


dojo.addOnLoad(function() {

<div dojoType='customwidget.TestWidget'/>

No comments:

Post a Comment