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:
+--dojo
+ `--- customdijit + `+--- TestDijit.js + +--- templates + + `--- testdijit.html + +--- themes + `--- testdijittheme.css +--dijit
+--dojox
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.provide('customwidget.TestDijit')
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" />
</div>
How to use the Dijit in HTML page
1. Load the module using dojo.require
<head>
<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.require("customwidget.TestWidget");
dojo.addOnLoad(function() {
});
</script>
</head>
<body>
<div dojoType='customwidget.TestWidget'/>
</body>
No comments:
Post a Comment