Joe Lennon

The third and final part of my IBM developerWorks article series on the Dojo Toolkit was published today. It covers the Dijit component framework that allows you to build rich user interfaces in a declarative or programmatic way. This article introduces you to the various UI widgets available, and shows you the different ways of using them in your applications. It also introduces you to using Dijit to layout your application, and the DojoX extension library.

The Dojo toolkit lets Web application developers create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Ajax to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Asynchronous JavaScript and XML (Ajax)-powered Web applications. If the functions you are looking for are not included in Dojo itself, it’s highly likely that you can find it in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In Part 3 of this three-part series on developing rich web-based applications using the Dojo toolkit, learn about the Dijit rich user interface component framework, which lets you build powerful interfaces with minimal effort.

Dijit is the Dojo Toolkit’s user interface library of rich components. These components are fully theme-able, and can be declared either declaratively using HTML-style tags or programmatically using JavaScript. This section provides a brief explanation of Dijit, explains the components it has to offer, and describes the various themes that are available out of the box.

Read the article in full on IBM developerWorks at http://www.ibm.com/developerworks/web/library/wa-ground3/

This post is designed to be a no-frills introduction to using HTML5 local storage. It assumes that you are using the latest version of Mozilla Firefox and the Firebug plug-in.

1. Checking for browser support

Open the Firebug console and enter the following command:

'localStorage' in window;

You should see the following output:

>>> 'localStorage' in window;
true

2. Storing data

HTML5 local storage stores data in named key/value pairs. The key must be a String, and the value can be any JavaScript data type, although it will be stored as a String. To store data, you use localStorage.setItem:

localStorage.setItem("name", "Joe");

Alternatively, you can use the square bracket syntax to store data:

localStorage["age"] = 25;

Or, you can use dot notation if you prefer:

localStorage.location = "Ireland";

If the key you use already exists, the existing key/value pair will be overwritten without warning.

3. Retrieving data

To retrieve data you can use getItem:

localStorage.getItem("name");

Output:

>>> localStorage.getItem("name");
"Joe"

Alternatively, you can also use square bracket syntax:

localStorage["age"];

Output:

>>> localStorage["age"];
"25"

Or, you can use dot notation:

localStorage.location;

Output:
>>> localStorage.location;
"Ireland"

4. Removing data

There are two ways to remove data in local storage. Firstly, you can delete a single key:

localStorage.removeItem("age");

Alternatively, you can clear all local storage data as follows:

localStorage.clear();

5. Finding data

You can get the number of key/value pairs stored in local storage using the length property:

localStorage.length;

To get the name of a key at a particular index, you can use the key method:

localStorage.key(0);

You can combine the two to iterate over the local storage data as follows:

for(var i=0, len=localStorage.length; i<len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key];
    console.log(key + " => " + value);
}

6. Events

You can keep track of changes to local storage using event handling. The “storage” event is fired any time data changes in local storage. This event is fired by the window object. For example (Note: this won’t work in IE):

window.addEventListener("storage", function(e) {
    console.log("Local storage was modified");
}, false);

The above will log a message to the Firebug console any time that the local storage data is modified (when adding, removing or replacing keys, clearing a non-empty storage, etc). At the time of writing, Firefox 3.6 did not include support for the storage event object properties key, oldValue, newValue and url.

7. Summary

So there you have it, a quick introduction to using HTML local storage. If you have any questions, leave a comment.

The second part of my IBM developerWorks series on getting started with Dojo development was published yesterday. This part focuses on Dojo’s class-based object-orientation features, which help make JavaScript OO a little more bearable for traditional class-based OO developers with backgrounds in the likes of Java and C++.

The Dojo toolkit enables web application developers to create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Asynchronous JavaScript and XML (Ajax) to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Ajax-powered web applications. If the functions you are looking for are not included in Dojo itself, it’s likely that you can find them in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In Part 2 of this three-part series on developing rich web-based applications using the Dojo toolkit, you will learn about JavaScript’s object-orientation features, and how they differ from a traditional class-based object-oriented programming language. You will then see how Dojo bridges this gap by offering a class-based system of its own.

Object-oriented programming (OOP) is a software development paradigm that is based on the definition of data structures called objects, which consist of data properties and functions. These properties (member variables) and functions (or methods) define the potential interaction that a piece of software can perform with that object. The primary benefit of OOP is that it helps with code re-use and maintenance by making it easier to organize your code.

Read the full article on IBM developerWorks: http://www.ibm.com/developerworks/library/wa-ground2/

One “feature” that drives me insane about Mac OS X is that it doesn’t allow you to tab between all types of UI controls by default. For example, if a dialog box appears with options “Save”, “Don’t Save” and “Cancel”, you can’t use the tab key to switch between the different options. Other quirky annoyances that this causes are not being able to use checkbox fields in a Web form because it doesn’t focus when you tab to it. It appears as though you have to use your mouse to click on these fields, which is ridiculous.

In case you didn’t know it is very easy to change this behaviour to act they way you would probably expect it to (this is the first thing I do whenever I reinstall Mac OS). Hold down the Ctrl key and hit F7, and magically you will be able to tab between controls to your heart’s content. Want to revert? Just hit Ctrl+F7 again.

If you prefer, you can use System Preferences. The option is available under Keyboard -> Keyboard Shortcuts. Under the “Full Keyboard Access” section, make sure “All controls” is selected and not “Text boxes and lists only”. See the screenshot below:

System preferences Keyboard pane

My latest developerWorks was published earlier this week. This is the first of a 3 part series on the Dojo JavaScript framework. Part 1 of the series is titled “Dojo from the ground up, Part 1: Getting started with Dojo development” and covers the basics of working with the Dojo toolkit. Part 2 covers Dojo’s excellent object-orientation features, and Part 3 covers the Dijit user interface component library. Parts 2 and 3 will be available in the coming weeks.

The Dojo toolkit enables web application developers to create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Asynchronous JavaScript and XML (Ajax) to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Ajax-powered web applications. If the functions you are looking for are not included in Dojo itself, it’s highly likely that you can find them in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In this article series, learn how to develop Dojo-powered applications from the ground up, covering the basics, Dojo’s great object-orientation features, and the Dijit user interface library. By the end of this series, you will be well prepared to develop Dojo applications of your own.

Dojo was created in 2004 to make the process of developing DHTML and JavaScript web applications easier, hiding much of the cross-browser inconsistencies that are prevalent in modern web browsers. This enabled the focus to be placed on implementing functions rather than tweaking code to make it work on every browser. Dojo is owned by the Dojo foundation, which was founded in 2005 by Alex Russell and Dylan Schiemann. Dojo is open source software (OSS) and is available under a dual-license (you can pick which one you want to adhere to) with both the Academic Free License (AFL) and a modified BSD license available.

Read the full article at IBM developerWorks: http://www.ibm.com/developerworks/web/library/wa-ground/index.html