Hi everybody, here is a small and quick tutorial for writing and mastering your own template based custom widgets using Dojo framework. In this example we will write a simple auto-complete search box by making use of Dojo bootstrap 3 Typeahead module (for auto-completing). Also with some basic CSS.
Follow these simple steps to create your first widget.
Pre-requisites(For this tutorial):
Make sure you have the following things ready before starting:
Follow these simple steps to create your first widget.
Pre-requisites(For this tutorial):
Make sure you have the following things ready before starting:
- IDE - Eclipse (or any other IDE, eclipse Mars is used in this tutorial)
- Download Dojo framework v 1.10.x or use online CDN
- Dojo Bootstrap (dbootstrap3)
- Apache Tomcat 8.0 (Recommended) or any HTTP preview server.
- Go to new project and select Dynamic Web Project.
- Give project name and click on finish, don't bother about other settings now just keep it default.
3. Create new home-page called index.htm inside Web Content folder.
4. Create new SearBoxWidget.js inside Web Content folder
5. Create another .html for defining template (Template.htm)
6. Finally the folder structure should look like this (important for Dojo Config.)
Now we are ready to go for coding.
First we will start with our template. Note: in template.htm there should be only one parent div comments also not allowed before parent div.
Template.htm
<div>
<div>
<input type="text" autocomplete="off" data-provide="typeahead"
data-items="10" class="typeahead searchBox"
data-source='["Mobile Phone", "iPad", "Laptop", "Desktop", "iPhone"]'>
</div>
</div>
SearchBoxWidget.js
/**
* Search box widget with bootstrap Typeahead module (for auto-completing).
*/
define([ "dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!/Search_Box/Template.htm",
"dojo/query",
"dojo/query",
"bootstrap/Typeahead",
"dojo/ready" ], function(declare, _WidgetBase, _TemplatedMixin, template, query, Typeahead) {
"dojo/ready" ], function(declare, _WidgetBase, _TemplatedMixin, template, query, Typeahead) {
return declare([ _WidgetBase, _TemplatedMixin ], {
templateString : template,
constructor : function() {
console.log("in constructor");
},
postCreate : function() {
console.log('in post create');
},
});
});
Here constructor and postCreate is not necessary since we are not using them now but still I gave messages just to make sure our widget is loading properly, these messages should visible in the console while running the project in browser.
index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Search Box Widget Demo</title>
<script type="text/javascript">
var dojoConfig = {
"async" : true,
"parseOnLoad" : false,
"packages" : [ {
"name" : "bootstrap",
"location" : "/Search_Box/dbootstrap",
"main" : "main"
} ]
};
</script>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
.searchBoxAlign {
font-family: sans-serif;
position: relative;
margin: 100px;
left: 50px;
}
.searchBox {
border: 3px double #CCCCCC;
width: 230px;
}
</style>
</head>
<body>
<h1>Dojo auto-complete search box widget with dojo bootstrap 3</h1>
<br>
<h2>Search for gadgets</h2>
<div id="WidgetContainer" class="searchBoxAlign"></div>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true">
</script>
<script type="text/javascript">
require([ "./SearchBoxWidget.js" ], function(searchBox) {
var widget = new searchBox();
widget.placeAt("WidgetContainer");
});
</script>
</body>
</html>
Now once the coding is done just save and run the project (for the first time if server is not configured it will ask for server select Apache Tomcat) and run.
When you run your project you should get the search box something like this
In this tutorial we are using HTML 5 data attribute to provide source for the search-box statically we can also write a function to give source dynamically.
No comments:
Post a Comment