Dojo from the ground up, Part 3: Creating rich user interfaces with the Dijit component framework

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.

Share:

Joe Lennon, Product Manager, Core International

Photo of Joe LennonJoe 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.



15 February 2011

Also available in Chinese Japanese

What is Dijit?

Develop skills on this topic

This content is part of a progressive knowledge path for advancing your skills. See Get started with Dojo development

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.


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.

Figure 1. Dijit components in action
Digit window with 3 tabs, a color palette, a text editing section, and a calendar.

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.

Figure 2. Dijit form controls in action
Registration form with a calendar, slider bars, radio buttons, and check boxes.

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.


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.

Figure 3. Tundra, Soria, and Nihilo themes
Same Dijit window with 3 panels, each with a little different styling.

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.


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.

Listing 1. Basic Dijit template
<!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.


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?

Figure 4. Dijit calendar component in action
A Dijit window showing a calendar from November 2010.

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.

Listing 2. Snippet for adding a color palette inside a title pane
<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.

Listing 3. Replacing the calendar's dojo.require call
dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

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

Figure 5. Color palette inside a title pane
Color palette inside a title pane.

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.

Listing 4. Dojo Method <script> blocks in action
<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.


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

Listing 5. dojo.require statements
dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

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

Listing 6. Creating a title pane and color palette programmatically
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.

Listing 7. Using nested HTML elements to lay out components
<div id="myTitlePane">
    <div id="myColorPalette"></div>
</div>

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

Listing 8. Binding nested components using just IDs
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.

Listing 9. Adding event handlers to programmatically created components
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.

Listing 10. Adding event handlers using dojo.connect
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.


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.

Listing 11. Use dojo-require
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.

Listing 12. Connecting to a button using dijit.byId
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.

Figure 6. Button and dialog box
Dialog box with the message 'You have clicked the button'.

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.

Listing 13. Using Dijit content panes
<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

Listing 14. Adding a content pane 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.

Listing 15. Connecting the button to the content pane
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.

Figure 7. Before loading via XHR
Window with a Load content using XHR button and the words Static content here.

Now, click the button and the message should change.

Figure 8. After loading via XHR
Widnow with a Load content using XHR button and the words content.html content here.

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.

Listing 16. Creating a stack container and controller
<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).

Listing 17. Adding stack container and controller to dojo.require
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?

Figure 9. Stack container and stack controller in action
Two buttons on the screen, one with Stack 1 and one with Stack 2.

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.

Listing 18. Creating a tab container
<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).

Listing 19. Adding tab container to dojo.require
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.

Figure 10. Tab container in action
Window showing two tabs: Tab 1 and Tab 2

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.

Listing 20. Creating an accordion container
<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).

Listing 21. Add accordian container to dojo.require
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");

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

Figure 11. Accordion container in action
3 horizontal tabs, with the first one expanded to fill the window and the other 2 collapsed.

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

Listing 22. Creating a border container
<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.

Listing 23. Adding border container to dojo.require
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.

Figure 12. Border container in action
Window with top and bottom sections and 3 sections in between.

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


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.

Figure 13. DojoX rating widget in action
Window with 5 stars, with 3 stars shaded in yellow.

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.


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.


Download

DescriptionNameSize
Article source codepart3.source.zip9KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=626930
ArticleTitle=Dojo from the ground up, Part 3: Creating rich user interfaces with the Dijit component framework
publish-date=02152011