Dojo Javascript Framework, Take your Web Apps to the Next Level

November 15, 2009 · 8 comments

by Lars

dojo

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.


ElegantThemes
ThemeForest

AdvertisementThe 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 Javascript Framework
  • 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. Dojo Javascript Framework
  • Demos
    The Dojo Team have published some examples of what you can achieve with DojoDojo Javascript Framework
  • 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.
    Dojo Javascript Framework
  • 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.Dojo Javascript Framework
  • 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.

Dojo Javascript Framework

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.

Dojo Javascript Framework

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 Javascript Framework

Dojo Hello World – Multilingual

Dojo Hello World – Smarter Multilingual

Dojo Hello World – On Demand

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”.

Dojo Javascript Framework

Fancy Rounded Corners

Make great looking rounded corners on your elements using only a single image.

Dojo Javascript Framework

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

Dojo Javascript Framework

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.

Dojo Javascript Framework

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.

Dojo Javascript Framework

Ajax with the Dojo Toolkit – Tutorial

This article describes the usage of the DOJO toolkit for JavaScript programming. Dojo is an Ajax toolkit.

Dojo Javascript Framework

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.

Dojo Javascript Framework

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?

Dojo Javascript Framework

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.)

Dojo Javascript Framework

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.

Dojo Javascript Framework

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.

Dojo Javascript Framework

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.

Let’s take a look at our final result first, to get you excited and to show what you will learn in this tutorial

Dojo Javascript Framework

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 Javascript Framework

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.

Dojo Javascript Framework

Books

{ 3 comments… read them below or add one }

Flex developer August 19, 2009 at 6:50 pm

Hmm… Great list. I think it’s very helpful as beginer and as expert :). Thanks

Reply

ignar August 1, 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 =)

Reply

TCP July 23, 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?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 5 trackbacks }

Previous post:

Next post:


Web Analytics