Dojo: A Slideshow Widget Example
Abstract: This article demonstrate you how to build the slide-show widget. There's not a ton of code to it, but we'll start with the smallest possible (loads but doesn't do anything) version of the widget
If you like, you can stop here and go add a slideshow to your pages. But odds
are you want to build a widget yourself. This article will show you how you can
do that and use Dojo to go from idea to upgrade-able interface. Fast.
Intro
A key feature of the Dojo widget system is the ability to prototype, test, and
tweak the component's UI and interactions. Dojo provides "templates" that you
can use to rapidly prototype your UI in HTML and CSS and expose your widgets as
markup on the pages you include them on. Dojo ensures that your work in prototyping
isn't thrown away when it comes time for deployment. Incremental performance
optimizations to be discussed in another article ensure that your widget is as
fast as you need it to be.
Prototype
Templates in Dojo place HTML and CSS fragments into files which are consulted
when a widget is constructed. The setup of event handlers and the creation of
references to DOM nodes is handled through some extra attributes on your HTML
markup.
In this article, we're going to show you how we built the slide-show widget you
see above. There's not a ton of code to it, but we'll start with the smallest
possible (loads but doesn't do anything) version of the widget. Here it is:
// tell the package system what classes get defined here
dojo.provide("dojo.widget.SlideShow");
// load dependencies
dojo.require("dojo.widget.*");
// define the widget class
dojo.widget.SlideShow = function(){
// inheritance
// see: http://www.cs.rit.edu/~atk/JavaScript/manuals/jsobj/
dojo.widget.HtmlWidget.call(this);
this.templatePath = dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.html");
this.templateCSSPath = dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.css");
this.widgetType = "SlideShow";
}
// complete the inheritance process
dj_inherits(dojo.widget.SlideShow, dojo.widget.HtmlWidget);
// make it a tag
dojo.widget.tags.addParseTreeHandler("dojo:slideshow");
Most things in this class are boilerplate, and only those properties that are
necessary are given values. Every Dojo widget you'll create comes from a class
constructor like this one.
|
