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