Dojo Toolkit is an open-source JavaScript toolkit useful for building dynamic web applications. It aims to shorten the timespan between idea and implementation by providing a well conceived API and set of tools for assisting and fixing the issues experienced in everyday web development. It is fast, robust, and supplies a solid set of tools for DOM manipulation, animations, Ajax, event and keyboard normalization, internationalization (i18n) and accessibility (a11y). Dojo Base is a single, lightweight 26KB entity “across the wire.” Dojo is completely free, liberally licensed (AFL or BSD), and transparently developed by an active group of developers with a strong community presence.
Besides Dojo you will find Dijit and DojoX. Dijit is a powerful widget engine providing Skinnable, template-driven widgets with accessibility and localization built right in. From accordions to tabs you will find the gui building blocks you need. With DojoX you can visualize your data with grids and charts etc. Take your apps offline. Cross-browser vector drawing. And a lot more. Dojo and its companions certainly make up a feature rich framework for modern web development and should be considered before you start your next big development project.
The primary goal for most of the Javascript frameworks available is that they dramatically reduce the amount of code that needs to be written compared to pure Javascript. This leads to less development time, more readable code and code that is generally easier to maintain and extend. Generally one of the main purposes of using a Javascript framework is to avoid dealing with browser differences yourself and that part should not be underestimated and make it easier to focus on building good functionality that performs and lives up to users expectations. The other important frameworks available currently are jQuery, prototype (and script.aculo.us) and mootools. I recently posted an article covering jQuery that you should consider reading. 60+ Must Have jQuery Toolbox.
Dojo resources
The Dojo website is really great. You can find most of what you need there. Another great resource is sitepen.com where you can find guides and good tutorials.
- First you need to download Dojo or find a way to access the library online.
Download dojo.js and serve it as part of your web application with a simple <SCRIPT> tag, or download nothing and simply pull Dojo from a CDN near you:
AOL: <SCRIPT TYPE=”text/javascript” SRC=”http://o.aolcdn.com/dojo/1.3/dojo/dojo.xd.js”></SCRIPT>
Google: <SCRIPT TYPE=”text/javascript” SRC=”http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js”></SCRIPT> - Dojo QuickStart Guide – Learn the basics.
- Dojo Feature Explorer
Not sure if Dojo can do what you need? This is the place to look! Wow some of the things here are really cool.
- Demos
The Dojo Team have published some examples of what you can achieve with Dojo
- Spotlight
Spotlight on Dojo tells you about the people, companies, and projects that use the Dojo Toolkit and other Dojo Foundation efforts. There are some really amazing showcases of uses of Dojo. The applications being build using Dojo is really complex and I think it demonstrates the power of the framework. Sojo makes it possible to create web applications that look and feel almost as desktop applications.
- Documentation
- Forums
This is where you get help from the community - API Viewer
This is a great tool to get an overview of the library. It isn’t huge but still tools like this makes our life so much easier.
- Foundation, License, and Contributor License Agreements
Here you can se some of the major companies using and supporting Dojo. You can also get an overview of the really interesting open source projects relying on Dojo. - Companies and organisations using Dojo: IBM, Apple store, Nasa, Google, SUN and more
Getting started tutorials
Introduction to the Dojo toolkit, Part 1: Setup, core, and widgets
Great tutorial for getting started, installing, configuring etc.
Developing widgets with Dojo 1.x
The goal of this article is to give you the basics for developing HTML widgets using the Dojo JavaScript toolkit, starting from version 1.0. The article also describes several examples, beginning with simple widgets and moving up to more complex ones, while solving common issues you might encounter in widget development.
Hello World – With & Without Dojo
This is as simple as it gets but it is a very good tutorial to start with. There are four good intro tuts at this site that you should check out if you’re new to Dojo.
Dojo Hello World – Multilingual
Dojo Hello World – Smarter Multilingual
Functional Ajax with Dojo
“Does Dojo have an Ajax method that updates a div?”. The answer is that there’s no Dojo-approved way of doing something like this. Updating a div is such an easy process, that implementing a de-facto solution is not only extra code, but you also hit a wall as soon as you want to do “something more”.
Fancy Rounded Corners
Make great looking rounded corners on your elements using only a single image.
Advanced tutorials
Dojo Zoomer
This is a great application and it illustrated the power of Dojo quite well. The demo is broken into clearly separated roles of content and presentation. The Markup is valid, with two external <script> tags are loading progressive enhancements to an otherwise plain list of anchors and thumbnails. There is a single CSS file, though as can be seen in the source file, it is being concatenated from a couple different .css files as part of the build process. Demo
Stocker: Advanced Dojo Made Easy
Tutorial showing Stocker, which demonstrates some of the more advanced capabilities of Dojo, including the newly released DataChart, the DataGrid, Data Store, Comet, Persevere, and BorderContainer.
Introducing DojoX DataChart
DataChart. Its primary purpose is to make connecting a chart to a Data Store a simple process. There are also other benefits with DataChart: less parameters are needed to create a basic chart, and more defaults and convenience methods get you up and running quickly with Dojox Charting.
Ajax with the Dojo Toolkit – Tutorial
This article describes the usage of the DOJO toolkit for JavaScript programming. Dojo is an Ajax toolkit.
Dojo Drag and Drop, Part 1: dojo.dnd
Most anyone who’s looked at the feature list knows that one of Dojo’s core features is a drag and drop framework. What’s not immediately obvious is that Dojo actually has two drag and drop APIs. The first, dojo.dnd, is designed to manage the process of dragging items between two or more containers, including multiple selection, item acceptance filtering on drop targets, and other behavioral tweaks. The second API, dojo.dnd.move, is a bit lower-level in scope; it’s designed to manage the process of moving single objects around, without the concept of attaching items to containers. Both of these are very useful features to have at your disposal. In this article, we’ll cover dojo.dnd.
Getting Started with Adobe AIR
As previously announced by Dylan Schiemann, SitePen has released the Dojo Extensions for Adobe AIR (dAIR) project that help make it simple to use Dojo into an AIR application. These extensions also simplify some of the more difficult AIR APIs by wrapping them and adding some syntactic sugar.
Dojo and Air, a fancy file uploader
How many times have you had trouble uploading files to your favorite CMS? How many times did a client say “I am not happy with uploading one file at a time”? And last but not least, how many times did you implement a third party plugin/software/piece of magic to implement efficient file uploading?
Usable directory listings with a little Dojo
This tutorial shows you how to upgrade those plain vanilla pages to make getting around a little faster and along the way introduce you to some of the most useful bits of Dojo, and practical techniques for working with them. We’ll touch on: dojo.query, dojo.data, the dojo parser and dijit (specifically the FilteringSelect widget.)
Styling Dijit Form Elements
Dijit has a tremendous wealth of high quality and feature-rich form elements providing key functionality including validation, time calculation, spinner controls, calendars, and much more. Furthermore, Dijit gives you a set of themes to choose from: Tundra, Soria, Noir, and Nihilo.
This post will show you how to set up your form with the proper style sheets, and do some minimalist CSS targeting to adjust each form so they’ll all be the proper size. The result will be a style sheet base that you can use and modify to create custom Dijit forms.
Easily listen for events
Custom events and Dom Events are all well and good for method-to-method functionality. It is a really common use case to connect some event happening to call another function, but when you get into really ambiguous, large applications, you need some mechanism to just say “hey, something has happened, act accordingly” … dojo.publish and dojo.subscribe provide just that mechanism.
Rounded tabs with dijit Theming
Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes.
Separating Content from Presentation
One of the cool things about Dojo is the dojo.xhrGet() function. It’s powerful because it makes transparent the browser dependent transports that make AJAX possible. In this cookie, we’re going to explore a simple use case in Dojo to separate content from the presentation of a page.
Creating a Dojo Calendar
“Creating a Dojo Calendar,” from eKrantz.com. Discusses the goals to be accomplished, the files needed and how to download them, calendar entries, time zones, changing a date for a calendar enrty, and adding a new calendar entry.
Dojo Tree Tutorials
A series of three tutorials including: “Introducing the Dojo Tree Widget,” discusses installing Dojo, trying out the Dojo tree widget, adding a context menu, making the context menu work, explanation of the code, building the menu programmatically and adding drag-and-drop capabilities; “Adding Dojo Tree Nodes with AJAX,” discusses building a tree programmatically, adding child tree nodes with AJAX, and dynamically adding children; and “Customizing the Dojo Tree,” discusses changing icons, custom icons for HTML tree, custom icons for the programmatic tree, properties and CSS.
Books
- Dojo, the Definitive Guide (book)
- Dojo: Using the Dojo JavaScript Library to Build AJAX Applications (book)
- Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (book)
- Concise Guide to Dojo
- Practical Dojo Projects
Related posts
- 30+ Essential Javascript Framework Supported Navigation Techniques Navigation is key to any web site or blog....
- Top 10 JavaScript Frameworks by Google JavaScript – an indispensable part for developing websites and...
- More jQuery and General Javascript Tips to Improve Your Code This post pick up on my previous post “jQuery...
- 120+ Javascript, Ajax, jQuery Mega Toolbox In this article tripwire magazine provides a huge Javascript, Ajax...
- 16 Stunning Mootools scripts for enhancing your html forms Forms are one of the most important part of...
Submit
More Links
July 23rd, 2009 at 2:34 am
very cool & good tip, thank you very much for sharing.
I see the design of examples look very good, all examples executed on safari/Mac?
August 1st, 2009 at 1:06 am
>Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (book)
This book is very good.
PS: I love Dojo =)
August 19th, 2009 at 6:50 pm
Hmm… Great list. I think it’s very helpful as beginer and as expert
. Thanks