Dojo UI controls

From Nokia Developer Wiki
Jump to: navigation, search

Notice: Note that these examples are tested only with N97, and most likely will not work with 3rd devices. Also to save some size all of the examples are using the Dojo javascript from the server, and to make the UI components to work faster, the required js files should be included in the wgz files.

Also the Theme is modified version of the standard tundra theme. All items are simply made double size to get the UI experience better with mobile devices. The theme is included full in all examples, thus the size could be reduced by removing non-essential parts out. Also the theme should be tweaked a bit more to make it work better, this example theme was just simply modified by doubling all sizes.



Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why it is sometimes refered as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

This article explains various Dojo UI controls.

Button controls

Dojo Buttons.jpg

There are four basic buttons with Dojo, normal button, DropDown button, combo button and toggle button, which all are shown in the File:Dojo Buttons.zip example.

Basic input controls

Dojo input.jpg

Dojo has several ways on using normal input boxes, each different type can be set to format the content of the input in specific ways. For example CurrencyTextBox can be used for showing the input with currency format, with DateTextBox the input can be formatted to show date in specified format, as well as it also includes a calendar control that is opened when the control is focused.

NumberSpinner includes arrow buttons for changing the value, TextBox can be used as normal text box, TimeTextBox will show the time in selected format, as well as when focused, it shows a time selection to ease the inputting. And with ValidationTextBox the input data can be validated so it would be only inputted in correct format.

An examples for all these input controls can be found from File:Dojo input.zip example

Drop down selection controls

Dojo Select.jpg

Dojo dropdown selection controls can be used for showing data to select as well as images, and example of their usage can be found from File:Dojo Select.zip example.

Textarea controls

Dojo textarea.jpg

Dojo text area controls can be used for adding a multiline text areas into a widget, and example usage is shown in the File:Dojo textarea.zip example.

Slider control

Dojo Slider.jpg

A Dojo slider control works only by clicking the desired point, the default implementation does not work with drag, however it still works. And example usage is illustrated in File:Dojo Slider.zip example.

Calender control

Dojo Calender.jpg

The calendar control can be opened used with DateTextBox, however, File:Dojo Calender2.zip also illustrates on using the standard dijit calendar without the DateTextBox. With the modified theme the standard Dijit calendar is rather big in size, thus you could also try out the Dojox Calendar control shown in File:Dojo Calender1.zip example.

ColorPicker control

Dojo ColorPicker.jpg

The Dojo ColorPicker control can be used to pick a color, a example usage is shown in File:Dojo ColorPicker.zip example.


Dojo Dialog.jpg

Dialogs are of course containers that has custom content, the example use case for File:Dojo Dialog.zip shows a password changing dialog with new password verification functionality.


Dojo Standby.jpg

Standby can be used to show a busy indicator, covering some parts or the whole screen, it also prevents user interaction that the part it is. And example usage is shown in File:Dojo Standby.zip example

Tab control

Dojo Tab.jpg

Dojo tab control works just as any other Tab control, the example usage for it is shown in the File:Dojo Tab.zip example.

Title pane

Dojo Titlepane.jpg

With Dojo title panel the widget area can be divided to separate Collapsible areas, and example use case is shown in the File:Dojo Titlepane.zip example.


Dojo Toaster.jpg

A toaster is a message box that is either dismissed by clicking it or by timer. It can be made to appear in any part of the screen on top of other controls. An example usage is shown in File:Dojo Toaster.zip example.


Dojo ToolBar.jpg

Dojo tool bar is a simple to use control that can be used as a tool bar, and example how to use it, is shown in the File:Dojo ToolBar.zip example.

Tree control

Dojo Tree.jpg

Dojo three control is a simple to use three control with as many levels of the branches as required by the application data, and example use case is shown in File:Dojo Tree.zip example.

Popup menu

Dojo PopUpMenu.jpg

Dojo Popup menu can be used as multilevel graphical menu and an example of its usage is shown in the File:Dojo PopUpMenu.zip example.

Progress bar

Dojo Progress.jpg

Dojo progress bar is simple to use graphical progress bar, an example usage of it is shown in the File:Dojo Progress.zip example.

This page was last modified on 30 July 2012, at 05:03.
111 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.