Creating a Dojo widget
Tags: Dojo
Ok it has been far to long, and I am going to start a very simple tutorial over a few parts to show you how easy it is to create your very own widget in dojo. The first thing we will need to do is create a directory called myWidgets (you can call it anything, but for now this will be easier for this tutorial.) inside the dojo directory, which should also contain the directory src. It might not make sense right now, but it will further on down the track.The beauty about dojo is that it is template driven, and can be styled with normal style sheets, so what we need to do know is create another directory called widgetTest. This will be the directory that will hold the data for our widget.
Note: at this point there is a few options available, but we will do it this way for now so that you can get the hang of it then later on I'll show you another way that you can attack this.
Ok now we will create 3 files, called widget1.css, widget1.html, widget1.js these are the files that will be needed to define our widget.
Ok lets finish Part one of this tutorial, with what needs to go into the widget1.js file. As with most languages, you can define a package or import others into the widget. So lets look at the creating the package name first.
So what we have done now, is to say that when we want to use this widget, we can reference the widget as myWidgets.widget1 in our webpage.
Now seeing as we are creating a basic widget for now, we only need to include a few includes. The first one just allows us to reference normal widget definitions and methods, and the second one allows us to create this widget as a html widget.
dojo.require("dojo.widget.HtmlWidget");
Now comes the constructor type stuff, and properties and methods that we need to define. So lets do that now.
dojo.widget.HtmlWidget,
{
widgetId: "HelloWorld",
fillInTemplate: function(args, frag) {
myWidgets.widget1.superclass.fillInTemplate.apply(this, arguments);
}
}
);
Ok thats pretty much it to define a widget, and althoug this doesn't do much at this stage it does define a few things that are of interest. the first being the fillInTemplate, this tells dojo to define the widget and setup properties etc., and of course we call the super emthod in the HtmlWidget so that we can get all of its properties and methods as well.
In the next part we will design the look and feall of this widget.
There are no comments for this entry.
TweetBacks