Category: "Dojo"

Using Crystal Icons with dojo's dijit tundra theme

The link above is a demonstration of the use of Crystal Project icons with dojo’s dijit tundra theme.

Crystal Project icons allow you to extend and customize tundra. Adding icons to inputs has the following advantages:

  • Many people can quickly look at the icon and enter the correct type of data, without reading the label or prompt. Obviously, this works best with familiar data types, such as times, dates, email addresses, and search strings.
  • If the inputs are in a table, the distance between the labels (column or row headings) and the inputs may be great enough that a quick visual reminder is valuable assistance for the user.
  • Multi-lingual applications almost always benefit from the addition of images.
  • The image are beautiful, they make the page look better.

The images chosen may have been intended for different uses. It is up to the designer to select the ones that work best.

There is also some overhead involved, each additional image is another HTTP request. The easiest way to improve perfomance is using browser caching, the next step would be to use ImageMagick to create sprites.

convert +append cp/16x16/apps/xclock.png cp/16x16/apps/yahoo_protocol.png new.png

dojo / ImageMagick Gradient Generator

Choose a color, enter a length, click ‘Create Gradients’. Page will generate 4 gradients (.pngs), from the selected color to transparent, along 4 axes, in both directions.

dojo ColorPicker Demo

The above link illustrates the use of the dojo ColorPicker widget.

Select a color, font, and enter some text. Clicking Create Image will display a corresponding image.

ImageMagick ( is used to create the image.

dijit ContentPane Demo - With Refresh and Terminate

The link above demonstrates the use of a dijit ContentPane to request content from the server with a client-side request refresh, and error detection that allows the server to indicate when the requests should be stopped.

The intended use is to allow graceful monitoring of background scripts on a server.

Basic approach:

  • Use the ContentPane to display the content. A quote script is used to illustrate the content change.
  • Use a javascript timer to request a refresh every 5 seconds
  • Have the server-side code count and issue a 303 See Other when processing has completed.
  • Have the client-side code catch the 303 and act accordingly. In this case, it changes the displayed text to reflect the status, puts up an alert box, and clears the timer.

Use View Source to view the client-side code, server-side code is listed at the bottom of the page.

This is a nice way to implement a refreshing iframe with dojo.

Customizing dijit tundra

dijit’s (dojo - tundra theme is excellent.

Notes on customizing it:

  • Copy dojo.css, dijit.css, tundra.css, and the supporting images out of the dojo tree and into the application’s CSS directory. Place the images in a directory under CSS, that way, the paths don’t have to be updated in the CSS files for those images. This risks later version conflicts with dojo, but also prevents inadvertant destruction of customization on upgrades. This also ensures you don’t affect other applications as you modify the files.
  • Update paths in the files (tundra.css imports dijit.css). Renaming tundra.css is a good idea, since it won’t be tundra after you change it.
  • Use icons from the Crystal Project (see link above). Be creative, the icons are beautiful and can be used in many ways to enhance the dijit theme.
  • Strive to avoid creating new images, unless you can create them quickly. Tiny images can take a surprising amount of time. Since the majority of tundra is grey, with blue highlights, simply removing the blue images and adjusting the remainder can provide a neutral color scheme.
  • Augment the tundra colors with those from you application. If you use the same hue, you can adjust the brightness and saturation to add variety to the color scheme.
  • Change as little as possible, because tundra already looks great. Try to preserve the dojo CSS file structures, so that if you need to merge in changes after an upgrade, it is not too difficult.
  • Use at least four other CSS files, base.css which contains application common basic layout, color.css, which contains application common color settings, ie.css for IE, and ff.css for FF specific settings. Additional page-specific CSS files, as well as some embedded style tags may be helpful as well. Configure caching to reduce the impact of these files, consider compression or bundling them together if necessary. Keep CSS as lean as possible, place design images in HTML, where they don’t incur overhead unless they are used.
  • Spend time looking at the Crystal icons. Even if the icon is named ‘urgent_mailmessage.png’, if it looks good where you want to use it - use it there.
  • Install the Crystal icons in DocumentRoot, then link to them with a symlink from the images directory, which should be at the same level as the CSS directory. That way, the icons can be shared by all applications and sites on the server.