What is Dijit?

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.

Back to top

Rich user interface components

The primary feature of Dijit is the suite of rich user interface components it offers. Most web application developers will be all too familiar with the limitations of basic HTML elements and form components as well as the difficulty involved with laying out an application using elements such as <div> and CSS rules. This is where Dijit is really useful. It provides a series of components that are not available in HTML (without writing them yourself, of course) including:

• Calendar
• Color palette
• Dialog box (modal or non-modal)
• Rich text editor
• Inline editor
• Menu bars and context menus
• Progress bars
• Accordions and panels
• Toolbars
• Tooltips
• Trees

In addition to the previous list, the DojoX extension library boasts an array of additional components, including grids, charts, video players, lightboxes, and more. Figure 1 provides examples of many of the Dijit components, including a button, dialog box, tab container, calendar, color palette, menu, rich text editor, and progress bar.

In addition to UI components, Dijit also provides a series of improved form fields, which offer more flexibility and functionality than the regular HTML form elements. These form controls include:

• Various text box controls for specific data formats including currency, date, number, and time
• Number spinner
• Auto-expanding text area
• Auto-completion combo box
• Multi-selection list boxes
• Buttons with drop-down menus
• Toggle buttons (switch on/off)
• Slider

Figure 2 shows some of these form controls in action.

Dijit also includes various layout components, which make organizing your web application's layout a breeze. No more messing around with tables or CSS floats, Dijit lets you define complex structures for your application layout. The layout components Dijit offers include:

• Accordion container
• Stack container
• Border container
• Tab container
• Content panes

As you have seen, Dijit has a wealth of user interface components that would normally take ages for developers to write themselves. Using Dijit, you can reduce the development time for your applications, as you don't need to worry about designing or developing complex user interface components.

Back to top

Theming

In the previous section, you saw some examples of Dijit's user interface components, all of which were using the "Claro" theme that comes with Dijit. Dijit also includes several other themes out of the box, allowing you more scope to fit Dijit components to the styling of your application. Figure 3 illustrates some examples of other Dijit themes in action.

If the themes included with Dijit are not a good fit for your application, you can easily define your own theme and customize all of Dijit's components to your exact requirements. Creating Dijit themes would justify an entire article of its own, and is covered in great detail in the Dojo toolkit documentation. See Resources for a link to the theming section of the Dojo documentation.

Back to top

Getting started with Dijit

To create Dijit applications, you need to include the Dojo library itself, the CSS file for the theme you are using, and a reference to your theme selection on the body element of your HTML document. You then load the Dijit components that you are going to include in your application using the dojo.require function.

Let's start off with a basic template for a Dijit application that uses the Claro theme. For the purpose of this article, I am assuming you are loading Dojo from the Google Content Delivery Network (CDN), rather than from your own server or computer. Open your favorite text editor and add the contents of Listing 1 to it.

<!doctype html>
<html lang="en" dir="ltr">
    <head>
        <title>Dijit Template</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs
/dojo/1.5/dijit/themes/claro/claro.css" />
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>
    <body class="claro">
        <!-- HTML content here -->
        <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dijit.dijit");
            //Add Dijit components you are using here using dojo.require
	
            dojo.addOnLoad(function() {		
                //JavaScript content here
            });
        </script>
    </body>
</html>

As you can see in Listing 1, the claro.css stylesheet is loaded from the Google CDN. Also, it is important to give your <body> element a class name that matches the name of the theme you are using. In this case, I'm using the Claro theme, so I've given the class name claro. You might think that to include Dijit you need to include a series of JavaScript files in addition to the base Dojo toolkit. This is not the case; you can use Dojo's loading system to dynamically load the elements of the Dijit framework you need using dojo.require. One thing that I have added, however, is the djConfig="parseOnLoad: true" attribute to the <script> tag that loads Dojo. This basically tells Dojo that it should use its HTML parser to look for HTML elements with the attribute dojoType. You will see more about this in the next section. Finally, inside the main application script, I have added a dojo.require declaration for "dijit.dijit", which optimizes the loading of Dijit. With the template defined, you are now ready to use Dijit components in your application.

There are two ways of working with Dijit components in your application. The first way is to add your components declaratively. This means adding to your page HTML elements that use the dojoType attribute to indicate a component should be parsed by Dojo and rendered as a Dijit component. You will see how this works in the next section. The other way of adding components is to use JavaScript to define your components programmatically. You will see more about this shortly.

Back to top

Working with Dijit declaratively

A very useful feature Dijit provides that is not available in most other major JavaScript component libraries is a method of using widgets in a declarative way—in other words, using regular HTML elements. The obvious advantage of this is that it lets you design your application using HTML syntax, as you would expect in a web application, keeping your application logic separate in JavaScript.

Using Dijit this way is very straightforward. Let's take a look at an example of creating a calendar component. First, in the <body> section of your template, find the comment <!-- HTML content here -->, and replace it with the following line: <div dojoType="dijit._Calendar"></div>.

Next, below the line dojo.require("dijit.dijit");, add the following line: dojo.require("dijit._Calendar");.

Save this file and load it in your favorite web browser. You should see something similar to the screenshot in Figure 4. Pretty neat, huh?

Declaring Dijit components in this way is by far the easiest way to add Dojo to your applications. You can add widgets inside other widgets where applicable (for example you could add a color palette inside a TitlePane), and you can even attach event handlers to your components in a fairly simple way.

First, let's nest a widget inside another widget, as described in the previous paragraph. Replace the calendar line in the HTML section with the snippet in Listing 2.

<div dojoType="dijit.TitlePane" title="Color Picker">
    <div dojoType="dijit.ColorPalette"></div>
</div>

Next, replace the calendar's dojo.require call with the code in Listing 3.

dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

Save the file and reload your web browser. You should see something like Figure 5.

As you can see, the color palette appears inside the title pane component, and if you collapse the title pane, the color palette will not appear. Now, let's add an event handler to the color palette in two ways. First, use an inline onClick attribute that shows an alert window with the selected value when a user selects a color. To do this, change the HTML element for your dojo.ColorPalette object to the following: <div dojoType="dijit.ColorPalette" onChange="alert(this.value);"></div>.

Save the file and load it in your browser, and try clicking on a color. You should see an alert window with the hex value of the color you selected shown. Inline event handlers are fine for one-line actions, but if you wanted to do something a bit more complex, it would not be so useful. Thankfully, you can declare dojo/method <script> blocks to add JavaScript code to your Dijit components.

Replace the line you changed a moment ago with the code in Listing 4.

<div dojoType="dijit.ColorPalette">
    <script type="dojo/method" event="onChange" args="evt">
         alert(this.value);
    </script>
</div>

Save the file and reload your browser, and you'll see that it does the same thing. This time, however, you have added a <script> block inside the Dijit component HTML element. Rather than the traditional text/javascript type value, you've given it a value of dojo/method, which tells the Dojo parser to parse this block of code. It uses the event attribute to define what event it should bind this code to, and uses the args attribute to pass any arguments to the function.

The declarative syntax is one of my personal favorite features of Dojo, as it makes it extremely simple to mock-up fairly complex application designs. It also provides a means of developing complex web applications for those who are not so comfortable with JavaScript. In the next section, you'll see how you can do all of this using JavaScript.

Back to top

Working with Dijit using JavaScript

Although not as basic as using Dijit in a declarative manner, adding components programmatically is also pretty simple. Let's start off by creating the basic calendar example, like the one created in the previous section. Starting from your basic Dijit template (Listing 1), add the following line to your main HTML section (replacing the comment <!-- HTML content here -->): <div id="myCalendar"></div>.

Now, after the line dojo.require("dijit.dijit");, add the following: dojo.require("dijit.Calendar");.

Finally, inside the dojo.addOnLoad function block, add the following line: var calendar = new dijit.Calendar({}, "myCalendar");.

Save the file and load it in your browser. You should see the same calendar that you saw in Figure 4. In this instance, you have added a basic placeholder element to your HTML code with the ID myCalendar. Then, you created your calendar programmatically using the expression new dijit.Calendar. The first argument to this function is a configuration object (which is empty in this example). The second argument is the ID of the HTML element the component should bind to, in this case myCalendar. Easy as cake, right?

What about nested components? Let's go ahead and write the example where you had a color palette inside a title pane. First, the HTML section should contain: <div id="myTitlePane"></div>.

Next, you need the following dojo.require statements in Listing 5 (in addition to dijit.dijit, of course).

dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

And, finally, the code in Listing 6 should be placed inside the dojo.addOnLoad block.

var colorPalette = new dijit.ColorPalette({});
var titlePane = new dijit.TitlePane({
    content: colorPalette,
    title: "Color Picker"
}, "myTitlePane");

Save and load the file in your browser, and you'll get a result as shown in Figure 5. Before looking at event handling in programmatic Dijit components, let's see an alternative way of writing the above code. Replace the HTML block with the code in Listing 7.

<div id="myTitlePane">
    <div id="myColorPalette"></div>
</div>

And the dojo.addOnLoad block should contain the code in Listing 8.

var colorPalette = new dijit.ColorPalette({}, "myColorPalette");
var titlePane = new dijit.TitlePane({
    title: "Color Picker"
}, "myTitlePane");

In this version, you have added the color palette inside the title pane using the HTML elements they are bound to. In JavaScript, you then bind both components using IDs, meaning you don't have to add the color palette to the title pane using the content attribute. I prefer this method, as the HTML structure gives the page more semantic meaning and makes it easier to see the layout of the page from the HTML syntax.

Finally, let's see how to add event handling to Dijit components that are declared programmatically. Replace the line var colorPalette = new dijit.ColorPalette({}, "myColorPalette"); with the code in Listing 9.

var colorPalette = new dijit.ColorPalette({
    onChange: function(evt) {
        alert(this.value);
    }
}, "myColorPalette");

Save the file, reload your browser, click on one of the colors, and presto, you should see the hexadecimal value of the color you selected. Alternatively, you could have left the line as it was and added the code in Listing 10 below it.

dojo.connect(colorPalette, "onChange", null, function(evt) {
    alert(this.value);
});

It's important to point out that the name of the event is case sensitive in Dijit components. Dojo uses all lowercase for events on regular DOM objects, and camel case for events on Dijit components (camel case is where the first word is lowercase and any following words have the first letter capitalized), so be sure to use the latter when working with Dijit components.

Back to top

Using dijit.byId

If you read the first article in this series, you will be familiar with the dojo.byId function, which gets a reference to a DOM element. Similarly, Dojo provides a dijit.byId function that lets you get a handle on a Dijit component. This is particularly useful when you are creating components declaratively and want to interact with them in your JavaScript code. Let's look at an example.

From the basic Dijit template (Listing 1), add the following code to the HTML section: <button id="myButton" dojoType="dijit.form.Button">Push Me</button>.

Next, in your dojo.require section, add the lines in Listing 11.

dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

Finally, let's get a reference to the button using dijit.byId, and display a dialog box when the button is clicked. Add the code from Listing 12 inside the dojo.addOnLoad function block.

var button = dijit.byId("myButton");
dojo.connect(button, "onClick", null, function(evt) {
    var dialog = new dijit.Dialog({
        content: "You clicked the button!",
        title: "Message"
    }).show();
});

Save the file and open it in your browser. Click the button and you should see a pretty dialog box, as shown in Figure 6.

Back to top

Using Dijit's layout features

In addition to some very useful components and form controls, Dijit also provides an excellent layout framework, which makes it much easier to organize the interface of your application. This section explains how to use Dijit's various layout components. For the sake of brevity, all examples are provided using Dojo's declarative syntax, but it should be relatively straightforward to convert them to the programmatic method should you want to do so.

Content panes

Content panes are the most basic of Dijit's layout components. They allow you to define a section of content that is loaded either by supplying the HTML code directly to the content attribute, or is loaded asynchronously with an XmlHttpRequest call. In the case of the latter, the content pane will display a loading message while the content is being loaded from the server.

Let's take a look at a very basic example of a content pane in action. First, create a new file and name it something like content.html, and add the following code to it: <h1>content.html content here!</h1>.

Now, from your basic Dijit template (see Listing 1), add the code from Listing 13 to the HTML section of the template.

<button dojoType="dijit.form.Button" id="myButton">
    Load content using XHR
</button>
<div dojoType="dijit.layout.ContentPane" id="myContentPane">
    <h1>Static content here!</h1>
</div>

Next, add the code in Listing 14 to the dojo.require section

dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");

Finally, connect the button and the content pane to load content.html into the content pane. Add the code in Listing 15 inside dojo.addOnLoad.

var button = dijit.byId("myButton");
var contentPane = dijit.byId("myContentPane");

dojo.connect(button, "onClick", null, function(evt) {
    contentPane.attr("href","content.html");
});

Save the file and load it in your web browser. You should see a message like Figure 7.

Now, click the button and the message should change.

Admittedly, this example is very simplistic, but it should illustrate just how easy it is to load dynamic content into a Dijit ContentPane component. This component is actually used in other Dijit components like Dialog, to render the content section. They are also more frequently used in layout containers like stack containers and tab containers, as you will see in a moment.

Stack containers

A stack container is a container that lets you have several different sub-containers, where only one is visible at a time (sometimes referred to as a card layout). This layout component is particularly useful if you are creating a step-by-step wizard. Let's take a look at how you would create a Dijit stack container, complete with a stack controller to navigate between stacks.

First, create a new file from the basic Dijit template (Listing 1). In the HTML code section, add the code from Listing 16.

<div dojoType="dijit.layout.StackContainer" id="stackContainer">
    <div dojoType="dijit.layout.ContentPane" title="Stack 1">
        This is the content in stack 1.
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Stack 2">
        This is the content in stack 2.
    </div>
</div>
<div dojoType="dijit.layout.StackController" 
containerId="stackContainer"></div>

Before you save, be sure to include the necessary dojo.require calls as required (see Listing 17).

dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.layout.StackController");
dojo.require("dijit.layout.ContentPane");

Save the file and load it in your browser. You should see a result like Figure 9. Clicking on the controller buttons lets you change the currently selected stack. All of this with no JavaScript required (other than the calls to dojo.require, of course)—pretty sweet, huh?

Tab containers

Like stack containers, tab containers let you have several views, with only a single view visible at a given time. However, unlike stack containers, tab containers present the options to move from each view in the form of tabs that appear above, below, or alongside the content. Furthermore, they do not require any separate controls, as they are built right into the component itself. As before, add the code in Listing 18 to the HTML section of your code.

<div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="Tab 1">
            This is the content in tab 1.
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Tab 2">
            This is the content in tab 2.
        </div>
    </div>
</div>

In this case, the tab container is wrapped in an outer <div> container, which simply defines the area the tab container can encompass. Of course, don't forget to add the relevant lines to your dojo.require block (see Listing 19).

dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

Save the file and load it in your browser; the result should look like Figure 10. You can swap between views by clicking on the relevant tab.

Back to top

Accordion containers

Yet another container that lets you display one section at a time is the accordion container. This usually takes the form of a vertical expand/collapse layout, where only one section can be open at a time, and expands to fill the entire space of the accordion container. The best way to see this is through an example, so let's go ahead and create one.

First, add the code in Listing 20 to the HTML section of your template.

<div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.AccordionContainer" style="width: 100%; 
height: 100%;">
         <div dojoType="dijit.layout.ContentPane" title="Blade 1">
             This is the content in blade 1.
         </div>
         <div dojoType="dijit.layout.ContentPane" title="Blade 2">
             This is the content in blade 2.
         </div>
        <div dojoType="dijit.layout.ContentPane" title="Blade 3">
            This is the content in blade 3.
        </div>
    </div>
</div>

And let's not forget your dojo.require references (see Listing 21).

dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");

Open this in your browser, and the results should be like Figure 11.

To switch between views, click on the title for the relevant section (or blade, as I like to call them).

BorderContainer layouts

Finally, let's look at border containers. If you have used a user interface library before, such as Swing, you might be familiar with the notion that border containers let you place components into four regions: north, south, east, and west. In Dojo, this same concept is available, but it is even more powerful as it can automatically provide splitters. As usual, it is best described by means of an example, so let's build one (see Listing 22).

<div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.BorderContainer" style="width: 100%; 
height: 100%;">
        <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
            This is the content in the top section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="left" style="width: 100px;" 
splitter="true">
            This is the content in the left section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
            This is the content in the center section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="right" style="width: 100px;" 
splitter="true">
            This is the content in the right section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">
             This is the content in the bottom section.
         </div>
     </div>
</div>

Listing 22 creates a layout with a top and bottom section, and left, right, and center sections in between. Before you try it out, add the following code (see Listing 23) to your dojo.require section.

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");

Fire up your browser and open the file you just saved. You should see something like the window in Figure 12.

Not only has this created a very structured layout for your application, but it is also customizable, as the user can drag the center handle on each pane and drag it to resize that particular part of the application. Pretty impressive for an application that doesn't even use JavaScript yet (except for the dojo.require calls).

As you have seen in this section, Dijit makes it extremely easy to create advanced layouts for your applications, with no complex JavaScript code required. All of the layout components used in this section can also be created programmatically. For good examples of this, check out the Dojo documentation (see Resources).

Back to top

DojoX: Dojo's bundled library of extensions

In addition to the Dojo Base, Dojo Core, and Dijit libraries, Dojo also provides support for DojoX, a set of experimental and supplementary components and features that did not make it into other parts of the framework. Reasons for this can vary from the code not being quite ready for production, to being too large to include by default, or simply that the extension is not as widely used or required as the features that are included in the main part of the Dojo toolkit. As a result, you should be careful when using DojoX components, as some of them may not be heavily tested or certified to have support for accessibility or internationalization.

DojoX includes a wide variety of additional functions. The following list is a sample of what's available in DojoX:

• Audio/Video playback
• Charting
• Comet client
• A wide range of data stores for different data sources including CouchDB databases, CSV files, web APIs such as Flickr, Google Search, Amazon S3, and more
• Vector drawing APIs
• Additional form widgets
• Data grid
• Image widgets (including galleries, slide shows, and lightboxes)
• JSON querying
• More layout containers
• RPC support
• Various other widgets including gauges, alternative calendars and color pickers, fish eye widgets, file pickers, ad banner rotators, and many more

Including DojoX extensions in your application is really simple. Unlike other JavaScript libraries, where you would need to browse a repository, download additional files, upload them to your server, and reference these files in your code, DojoX works pretty much the same way as Dijit components. As always, it's easiest to show this by means of an example. Let's create a new page that has uses DojoX's Ratings form widget.

First, create a new page using your basic Dijit template from Listing 1. Below the line that includes the claro.css file near the top, add a second <link> tag for loading the rating widget CSS file: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/form/resources/Rating.css" />.

Next, in the HTML section of the code, add the following line to add a rating control with 5 stars available, with 3 stars selected by default: <div dojoType="dojox.form.Rating" numstars="5" value="3"></div>.

Finally, where you loaded Dijit components using dojo.require earlier, add the following line: dojo.require("dojox.form.Rating");.

And you're done. Really, that's all there is to using DojoX components in your application. Of course, some of the more complex widgets (like grids and so on) may take a bit more work than this basic component, but the basic steps required are the same. The end result should look something like Figure 13.

For more detailed information on DojoX and all of the features it offers, see the Dojo documentation. A link to the latest version of the documentation is provided in Resources.

Back to top

Conclusion

As you have learned in this article, Dojo is a lot more than just a JavaScript framework. The Dijit component library boasts a large number of easy-to-use widgets that can seriously enhance the usability of your application, saving the developer from needing to write these components from scratch. In addition, all Dijit components are completely theme-friendly, making it easy to use Dojo to build functionality that fits right in with your own applications. In this article, you learned how to use Dijit to create components declaratively and programmatically as well as how to define which theme you want to use. You also learned how to create impressive layouts with just a few lines of code. Finally, you discovered just how simple it is to add the extended features DojoX has to offer to your applications, without requiring additional plug-ins to be downloaded and configured.

Back to top

Download

Information about download methods

Resources

Learn

• Visit the home page for the Dojo Toolkit.
  
  
• Check out some Dojo Toolkit Demos.
  
  
• Introducing The Dojo Toolkit: Read an excellent introduction to the Dojo Toolkit from the Opera developer site.
  
  
• Read the Dijit page from the Dojo documentation site.
  
  
• Learn about Dijit Themes and Theming from the Dojo documentation site.
  
  
• Introduction to the Dojo toolkit, Part 1: Setup, core, and widgets: Read another fine introduction to the Dojo toolkit from Javaworld.
  
  
• Dojo 1.5: Ready to power your web app: Learn about some of the new features in Dojo 1.5 from this article on Sitepen.
  
  
• Introduction to the Dojo Toolkit: Tutorial: Read an introductory tutorial from Ajax Matters.
  
  
• Read about Dijit's TabContainer Layout: Easy Tabbed Content on David Walsh's blog.
  
  
• Read A Localization Primer for Dojo Dijit and Dojox Controls, by Rob Gravelle, for an overview of requirements and general considerations to localize a web form using Dojo's Dijit and Dojox widgets.
  
  
• Basic Dijit knowledge in Dojo, by Peter Svensson, is another excellent introduction to Dijit.
  
  
• "Internationalizing web applications using Dojo" (developerWorks, August 2008): Discover a way to perform native language support in the context of web sites and web applications using the i18n feature of the Dojo toolkit.
  
  
• "Consuming web services with the Dojo Toolkit" (developerWorks, September 2010): Learn how to consume services using the Dojo Toolkit to enable Ajax on a web page.
  
  
• Learn about Prototypal Inheritance in JavaScript from Douglas Crockford.
  
  
• Read Nathan Toone's entry on Understanding dojo.declare, dojo.require, and dojo.provide from DojoCampus.org.
  
  
• Read Dojo Confessions (Or: How I gave up my jQuery Security Blanket and Lived to Tell the Tale) by Rebecca Murphey to learn how the author made the switch from jQuery to Dojo.
  
  
• Enterprise Dojo by Dan Lee shows you how to write highly cohesive code with JavaScript using Dojo.
  
  
• Dojo: Using the Dojo JavaScript Library to Build Ajax Applications by James E. Harmon from Addison-Wesley Professional.
  
  
• Getting StartED with Dojo by Kyle Hayes and Peter Higgins from friends of ED.
  
  
• "Writing a custom Dojo application" (developerWorks, December 2008): Find out much more about Dojo in this developerWorks article.
  
  
• "Develop HTML widgets with Dojo" (developerWorks, October 2006): Explore Dojo's extensibility in this developerWorks article.
  
  
• "Using the Dojo Toolkit with WebSphere Portal" (developerWorks, November 2007): Learn how to install, configure, use, and leverage the Dojo Toolkit in WebSphere Portal applications.
  
  
• The developerWorks Web Development zone specializes in articles covering various web-based solutions.
  
  

Get products and technologies

• Download the Dojo Toolkit. Version 1.5 was used in this article.
  
  
• Access the Dojo Toolkit API documentation.
  
  
• Get Firefox.
  
  
• Get Firebug.
  
  
• IBM - Dojo Extension sample: The Dojo Extension Feature Set can be used to enable a IBM WebSphere Portlet Factory model to leverage functionality provided by the Dojo JavaScript Toolkit.
  
  
• Download IBM product evaluation versions, and get your hands on application development tools and middleware products from DB2, Lotus, Rational, Tivoli, and WebSphere.
  
  

Discuss

• Create your My developerWorks profile today and set up a watchlist on Dojo. Get connected and stay connected with My developerWorks.
  
  
• Find other developerWorks members interested in web development.
  
  
• Share what you know: Join one of our developerWorks groups focused on web topics.
  
  
• Roland Barcia talks about Web 2.0 and middleware in his blog.
  
  
• Follow developerWorks' members' shared bookmarks on web topics.
  
  
• Get answers quickly: Visit the Web 2.0 Apps forum.
  
  

About the author

Joe Lennon is a 25-year-old mobile and web application developer from Cork, Ireland. Joe works for Core International, where he leads the development of Core's mobile HR self service solutions. Joe is also a keen technical writer, having written many articles and tutorials for IBM developerWorks on topics such as DB2 pureXML, Flex, JavaScript, Adobe AIR, .NET, PHP, Python and much more. Joe's first book, Beginning CouchDB was published in late 2009 by Apress. In his spare time, Joe enjoys travelling, reading and video games.

Rate this article

Comments

Back to top

Table of contents

• What is Dijit?
• Rich user interface components
• Theming
• Getting started with Dijit
• Working with Dijit declaratively
• Working with Dijit using JavaScript
• Using dijit.byId
• Using Dijit's layout features
• Accordion containers
• DojoX: Dojo's bundled library of extensions
• Conclusion
• Download
• Resources
• About the author
• Comments

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Buy: WebSphere Portal Express

Dig deeper into Web development on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers