Building Web Applications

Using JavaScript, MochiKit and Dojo

Part III - Dojo

Anant Narayanan

Malaviya National Institute of Technology, Jaipur

Overview - Part III

• The Dojo Way
• Widgets
• Layout
• Animation
• Offline Storage
• AJAX and Programming

Introduction

• Lots of functionality rolled into one
• Nice packaging and build system
• Plenty of useful widgets and layout options
• Revolutionary offline storage system available

Using Dojo

• Allows you to import external code or create your own packages
• MochiKit can be imported as a Dojo package!
• Specialised packed versions available: eg) dojp-widgets or dojo-ajax
• Docs kind of skimpy, therefore slightly steep learning curve
• Not as well-thought as Mochikit, yet extremely powerful and popular

What is Dojo made up of?

Dojo Widgets

• A set of predefined widgets that can replace their HTML equivalents
• Make better-looking buttons, checkboxes and combo boxes
• More sophisticated widgets like DatePicker, TimePicker and ColorChooser
• Extensible architecture, you can define your own widgets!

Creating and modifying widgets

• Can be defined as HTML div tags with the dojoType parameter
• Need W3C compliant HTML? Use the dojo->widget< class
• Dojo parses HTML before it is loaded and replaces all such HTML with a battery of HTML and JavaScript that represents your widget
• Two-State approach, actual HTML differs from your Widget object, which can be modified
• For dynamic widgets, you can use the createWidget method to create and show widgets programmatically

Some more useful widgets

• Trees
• Menus
• Fisheye (Apple Dock style!)
• inlineEditBox (Think flickr!)
• Tooltips
• Charts
• Slideshows
• Google and Yahoo! Maps

Widget principles

• Work cross browser
• Gracefully degrades
• Accessible
• Supports i18n
• Extensible

Let's take a look at the Dojo General Widget Demo...

Form Validation

• Great validation features
• Integrate all your widgets into the form
• Results in a form that looks good AND validates!
• Autocompletion and regex supported

Defining Layout

• Those familiar with GUI programming will like this!
• HPanes and VPanes
• Tabs
• Containers
  • Really great concept
  • Acts and feel like iFrames
  • But are part of current Document!
  • Can load external content!
• Windows
• Wizards

Drag And Drop & Effects

• Readily sortable lists
• Define DragSources and DragDestinations
• DragMove allows widgets to be moved anywhere, eg: Windows
• Drag handles can be specified
• Visual effects have all the usual suspects:
  • Fade
  • Wipe
  • Slide

Animation

• Real good library
• Combined with effects, who needs Flash?!
• Complex stuff like Bezier curve based animation possible
• Lots of predefined animations like Highlight and Explode
• Slightly buggy, not entirely cross-browser, but great future!

Rich text editor

• Great replacement for the bland textarea
• Can edit Rich Text (HTML Output)
• Based on the Moxie Editor
• RichText widget available to just display
• Editor2 Framework under development (GSoC^TM), plugin system
• Enhances RTE's features, we are working on XML editing too

Offline Storage

• RTE capable of storing text offline!
• No server required!
• Uses the Flash engine for persistence, but other drivers like Cookies are possible
• The "New" web!
• Enables some really creative applications

Dojo and script.aculo.us better at this kind of stuff :)

You can do AJAX too!

• Dojo has powerful I/O system and Language Utilities
• Not well documented, buggy and doesn't make it as easy as MochiKit
• Can send data over alternate transports (other than XMLHttp)
• Has an RPC interface to manage multiple calls

Customising Dojo

• Nice modular architecture
• Define and customise widgets
• Create custom packages and builds (Uses Ant build system)

Summary

Great stand alone package

Although using MochiKit will make your programming life easier!

Picks the best of all JavaScript tookits, you usually don't need anything else

Any questions so far?