From Forum Nokia Wiki

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.

Contents 1 Introduction 2 Button controls 3 Basic input controls 4 Drop down selection controls 5 Textarea controls 6 Slider control 7 Calender control 8 ColorPicker control 9 Dialog 10 Standby 11 Tab control 12 Title pane 13 Toaster 14 Toolbar 15 Tree control 16 Popup menu 17 Progress bar

Introduction

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

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

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

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

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

Dialog

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.

Standby

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 control works just as any other Tab control, the example usage for it is shown in the File:Dojo Tab.zip example.

Title pane

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.

Toaster

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.

Toolbar

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 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 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 bar is simple to use graphical progress bar, an example usage of it is shown in the File:Dojo Progress.zip example.