Dojo Tutorials

  • JSON Validation with JSON Schema

    It didn't take long for JSON to become the hottest thing since Pam Anderson slowly bounced her way down the BayWatch beaches. And why shouldn't it be? JSON is easy to understand visually, easy to parse on both the client and server sides, and is supported in just about every language except aborigine. There is however one problem I see with the way JSON is used by developers today: lack of validation. Most developers assume the JSON provide is not only error-free also in the proper format. Bad assumption. Let me show you how Kris Zyp's JSON Schema can help you validate JSON on both the client and server sides.

  • Generate Dojo GFX Drawings from SVG Files

    One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML, etc.) using a coherent, flexible API.  With GFX, you can create everything from static vector images to images that rotate, resize, animate, and basically anything you put your mind to creating.

  • Troubleshooting CSS Style Assignments within Dojo

    I was recently working on a Dojo project which used a series of JavaScript calculations to generate CSS style values. While calculating styles with JavaScript is quite common, especially when attempting to dynamically position HTML nodes, values aren't always cleansed the way that they should be. Safari and Firefox appear to ignore invalid style values but Internet Explorer tends to throw errors when a bad style or value is assigned to a node. After digging through tons of code to find a possible problem, I chose create a modified dojo.style snippet which would help me find problem styles.

  • JavaScript Events: Save the Bubbles!

    The more we work with advanced, accessible, and crawlable web applications, the more control we need over element events.  Mouseenter/leave events, keypress events, and the classic click event are probably the most-listened to events.  Unfortunately many people, including myself, have been incorrectly handling event stoppage.  In short:  a majority of JavaScript framework users are killing the bubbles without knowing it.

  • Create a Dojo-Powered WordPress Website View

    Yesterday I showed you WordPress' awesome JSON plugin named JSON API.  Now that I can get my blog posts in JSON format, it's time to create an awesome AJAX'ed web app with that data.  I've chosen to use the power of Dojo and Dijit to create a stylish, AJAX-powered web app which provides intelligent views of all of my blog posts.  You wont want to miss this post!

  • Creating Dojo Widgets Programmatically or Declaratively

    The Dojo Toolkit has an awesome UI framework called Dijit.  Dijit is an expansive set of Dojo widget that allow you to create highly themeable, functional forms, layouts, and much more.  One of the highlights of Dijit, from a developer's perspective, is that you may create widgets in two ways:  declaratively and programmatically.  This blog posts aims to show you an example of each widget creation method and discuss the advantages of each.

  • Organized Selector Chaos with dojo.behavior

    One of the most underrated parts of writing good JavaScript code is writing *maintainable* code:  readable, modular, and clean.  Just because you use a JavaScript framework doesn't mean your code is maintainable.  Quick the contrary could be true — some frameworks make JavaScript uglier.

  • Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and buzz.  One of the widgets I love is Twitter's "Follow" button.  Let me show you how you can implement this functionality with three popular JavaScript toolkits:  MooTools, jQuery, and Dojo.

  • Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit.  In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.

  • Dijit’s TabContainer Layout: Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content layout with minimal effort.  Keep reading to see what you can create in just 10 minutes!