A Dojo primer
A Dojo primer
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
DojoCampus is the main source for up-to-date documentation and working examples of this library. You should definitely refer to it when introducing new Dojo components in your applications. The official site has a reference manual and the generated Api documentation - but it is usually not enough to manage the versatility of the various widgets.
Dojo is divided in namespaces, to deal with all the different components it features. These namespaces have cryptic names, but every object (and function) provided by this library is kept in the global objects dojo, dijit or dojox.
Dojo is the main namespace, which comprehends the dojo.js basic file, and other standard functionalities like DOM querying and manipulation, AJAX support, and event handling built over the browser's native mechanism. The standard components consist in I/O classes and animations.
Dijit is the Ui library of Dojo. It contains form controls like validated text box for dates or numbers, or expanding textareas, or buttons. But also layout containers and panes for easy tabbing in the browser, or build accordion containers to save space.
DojoX is the namespace for extensions of any type. It is both an incubator for code that may be moved into the other components, and a repository for subprojects at various level of maturity.
- play videos and songs (dojox.av)
- charting (dojox.charting)
- handle any data source and provide it as feed for Dojo widgets (dojox.data). dojox.data is enormous, and besides adapters for your web service endpoints, it provides adapters also for public web services like Google and Amazon ones.
- build WYSIWYG customized editors (dojox.editor)
- add form widgets such as raters and file uploaders (dojox.form)
- add animations (dojo.fx)
- build grids to display, sort and filter data at the same time (dojox.grid)
- manage html and images functionalities (dojox.html and dojox.image)
- introduce more layout widgets like draggable content panes (dojox.layout)
- communicate easily with back end servers (dojox.rpc)
- validate data (dojox.validate), and more.
Selling points of Dojo
If you have explored the documentation a little, you will have noticed that ease of use or simple syntax is not a great point of Dojo and its widgets. But there are different advantages in using it.
Mainly, every component is on AOL/Google 's CDN, so you'll never strictly need to upload anything to your web server. Every time you need a new component, just add a:
in your scripts. You won't need additional <script> tags, nor dependencies issues: the Dojo module system automatically resolves these dependencies by analyzing metadata provided by the different widgets.
Even when you do not find the component you want, you can always build your own, mainly by extending Dojo or Dijit classes. By adding some simple dojo.require() and dojo.provide() calls to your JS files and respecting the Dojo folder structure, you can easily hook them in the module system.
Dojo data API
Some time ago in a managerial application, a select that contained Italian cities was hanging during its loading phase - it had about 8000 elements. It was already using a FilteringSelect, a classic widget where you can filter options by typing part of their labels. The issue was all the data were transmitted during the loading page: the overall size of the page was on the order of a megabyte.
I promptly changed the configuration of the FilteringSelect to use a REST-like API made up on the moment instead of a local data store. Basically, the widget now queries the web service when the user stops typing to find the subset of option that match the current content of the select widget, and loads in under a second.
Opinions expressed by DZone contributors are their own.