Links
Archives
Google Search
Syndicate This Blog
Calendar
|
September '10 | |||||
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | |||
Thursday, June 12. 2008
Creating Custom Widget in Dojo - Part 1
Did you know that the Edujini Gang is working on Dojo for more than a year now! Surprising right? Since there has been not a single entry on Dojo until the recent the recent announcement of the Project DWT (Dojo on Google Web Toolkit).
Introduction
Dojo Toolkit offers a simple yet powerful architecture to be able to create custom widgets. In Part 1 of the series of articles, we look at how to create a custom widget - probably with minimal styling and functionality.
Downloads
Yo! Buddy. The downloads are available in the downloads area.
What you should know...
Well, you should be very comfortable with the following:
- JavaScript - By the way, did you know that JavaScript is Object Oriented? No? Ok... Will provide some articles soon.
- Defining custom objects (I will not use the term class) in JavaScript using Dojo Toolkit. If not, you can have a peek in at Dojo Documentation.
Getting Started
Well, the first thing that you will need it Dojo Toolkit itself. You can download it from Dojo Downloads. And then, just a simple vanilla text editor - Notepad, TextPad, EditPlus, Notepad++ - just anything. 
Widget Definition
Let us create a simple widget that will just say "Hello, World!" (hard-coded) to start with, and subsequently, the content will be customizable.
Widget Implementation
I assume that the Dojo Toolkit library (downloaded earlier) has been extracted in the folder /home/edujini/eduzine/dojo. Let us create another folder /home/edujini/eduzine/dojo/edujini. I will not discuss, here in this article, on how to specify a custom location for custom definitions in Dojo. That is out of scope of this article.
Within this sub-folder, create a file CustomWidget.js with the following contents:
/**
* Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
*
* Downloads available at http://downloads.edujini-labs.com
*
* (C) 2008, Edujini Labs Pvt Ltd
* http://www.edujini-labs.com
*/
dojo.provide('edujini.CustomWidget');
dojo.require('dijit._Widget');
dojo.declare("edujini.CustomWidget", dijit._Widget,
{
postCreate : function()
{
this.domNode.innerHTML = 'Hello, World!';
}
});
One of the more important functions of the object dijit._Widget is postCreate. We override the method to provide our implementation and that is to simply set the innerHTML of the container to the text Hello, World!.
Using Custom Widget
Ok... now that we have got the widget, we do not know how and if it works. So, let's just write a simple test page (HTML) to use it. Create a file /home/edujini/eduzine/custom-widget-test.html with the following contents.
<html>
<head>
<title>Edujini Custom Widget Test</title>
<script type="text/javascript" language='javascript' src="dojo/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type='text/javascript' language='javascript'>
dojo.require('dijit.form.Button');
dojo.require('edujini.CustomWidget');
</script>
</head>
<body>
<!--
/**
* Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
*
* Downloads available at http://downloads.edujini-labs.com
*
* (C) 2008, Edujini Labs Pvt Ltd
* http://www.edujini-labs.com
*/
-->
<div id='w1' dojoType='edujini.CustomWidget'></div>
</body>
</html>
With this, the response that we expect is something as given below (I've highlighted the output using the red-ellipse. You'll not get it):
Customizing the Widget
The next step is to customize the Hello, World! with a user defined content. Let's say that the default value of the content to be displayed is Hello, World!. To this effect, update the CustomWidget.js as follows (changes highlighted in bold):
dojo.declare("edujini.CustomWidget", dijit._Widget,
{
text: 'Hello, World!',
postCreate : function()
{
this.domNode.innerHTML = this.text;
}
});
Simultaneously, we update the custom-widget-test.html file to as follows:
<body>
<div id='w1' text='Hello, Edujini World!' dojoType='edujini.CustomWidget'></div>
</body>
And that's it! Look at the HTML file in the browser...
Summary
In this article, we learnt:
- To create a custom widget using Dojo Toolkit.
- To create a property that can be used subsequently in the widget.
- Had a brief venture into the method
postCreate- one of the key methods. It it called after all entries from the HTML have been read and parsed. We shall look into the details of this method later on when we explore the lifecycle of Dojo Widgets.
-Gaurav
http://www.edujini.com
Quicksearch
Yahoo! Groups
Categories
Blog Administration
Technorati
Google Analytics
Powered by
Crestor discount. Crestor. Crestor generic name. Reaction between botox and crestor. Muscle twitching with crestor.
Tracked: Aug 07, 06:38