Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Dojo UI controls

From 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 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 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 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 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 example.

Calender control

Dojo Calender.jpg

The calendar control can be opened used with DateTextBox, however, File:Dojo 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 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 example.


Dojo Dialog.jpg

Dialogs are of course containers that has custom content, the example use case for File:Dojo 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 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 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 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 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 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 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 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 example.

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