Rational Business Developer

Developing with Dojo widgets

V ersion 7 Release 5

Note Before using this information and the product it supports, read the information in Notices, on page 25.

This edition applies to version 7.5.1.5 of Rational Business Developer and to all subsequent releases and modifications until otherwise indicated in new editions. Copyright IBM Corporation 2009,2010. US Government Users Restricted Rights Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

Contents
Chapter 1. Developing with the EGL Dojo widgets . . . . . . . . . . . . 1
Preparation for using the EGL Dojo widgets . . . Loading the Dojo Toolkit into your local environment . . . . . . . . . . . . Defining the connection to use the Dojo Toolkit remotely . . . . . . . . . . . . . . Themes to use with your application . . . . . Coding an application by using Dojo widgets . . . 1 . 2 . 3 . 3 . 4 DojoEditor. . . . DojoGrid . . . . DojoHorizonalSlider DojoLineGraph . . DojoMenu . . . . DojoMenuItem . DojoPieChart . . . PieChartData . . DojoProgressBar . . DojoRadioGroup . DojoStackContainer. DojoTabContainer . DojoTimeTextBox . DojoTitlePane. . . DojoToggleButton . DojoTooltip . . . DojoTooltipDialog . DojoTree . . . . DojoTreeNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 14 14 15 16 16 17 17 17 18 18 19 19 20 21 21 21 22 22

Chapter 2. Dojo widget library . . . . . 7

DojoAccordionContainer DojoContentPane . . DojoBarGraph . . . . DojoBubbleChart . . . BubbleChartData . DojoButton . . . . DojoCalendar. . . . DojoCheckbox . . . DojoColorPalette. . . DojoComboBox . . . DojoContextMenu . . DojoCurrencyTextBox . DojoDateTextBox . . DojoDialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 . 8 . 9 . 9 . 10 . 10 . 10 . 11 . 11 . 11 . 12 . 12 . 12 . 13

Appendix. Notices . . . . . . . . . . 25
Programming interface information . Trademarks and service marks . . . . . . . . . . . . 27 . 27

Index . . . . . . . . . . . . . . . 29

Copyright IBM Corp. 2009,2010

iii

iv

Developing with Dojo widgets

Chapter 1. Developing with the EGL Dojo widgets

You can use the EGL Dojo widgets to develop an EGL Rich UI application. The Dojo Toolkit is an open source toolkit that contains JavaScript widgets. For more information about the Dojo Toolkit, see http://dojotoolkit.org. The ready-to-use EGL Dojo version 1.4 widgets represent a set of commonly used widgets that extend the Rich UI widget library. Related concepts Preparation for using the EGL Dojo widgets Themes to use with your application on page 3 Coding an application by using Dojo widgets on page 4 Related tasks Loading the Dojo Toolkit into your local environment on page 2 Defining the connection to use the Dojo Toolkit remotely on page 3 Coding an application by using Dojo widgets on page 4 Related reference Chapter 2, Dojo widget library, on page 7

Preparation for using the EGL Dojo widgets

You can develop with the EGL Dojo widgets by using either a local or remote version of the Dojo Toolkit. In either case, you must specify the Dojo Toolkit provider on your EGL build path. Local Remote You can access the Dojo Toolkit by using a provider connection point. To use the Dojo Toolkit remotely, you must connect to the toolkit though a provider, such as Google or AOL. The provider hosts the Dojo Toolkit for use by Dojo developers. You might use a local version of the toolkit instead of a remote version for many reasons. To learn about the advantages and disadvantages of local and remote access, see Table 1 on page 2. One development scenario is to develop by using a remote version of the toolkit and to deploy by using a local version. With this scenario, you have the fastest development experience and can control the version of the Dojo toolkit because it is hosted on your server when you deploy. The Dojo Toolkit must be imported into your workspace to provide the necessary code for the EGL Dojo widgets to run locally.

Copyright IBM Corp. 2009,2010

Table 1. Considerations for accessing the Dojo Toolkit locally or remotely Local Flexibility v You do not need the Internet to access to the toolkit. v You control where the toolkit is accessed from. v You can develop new Dojo widgets and debug the JavaScript. Remote Performance v Performance is better because the browser caches more resources. v The integrated development environment (IDE) is faster because there are fewer things in your workspace. v You deploy your own application only, and you do not have to deploy the Dojo Toolkit files. Dependency on third parties v You must be connected to the Internet. If you do not have a fast speed connection, the first run can be slow. v Hosted servers usually implement usage tracking, which you might want to avoid. v You must rely on a third party to maintain the integrity of the Dojo Toolkit libraries.

Slower deployment v When you deploy your application, the Dojo Toolkit files are copied to your web server. v You must access the Dojo files from your server; this action might lead to extra bandwidth. v The startup time for your application might be slower because of browser caching and performance characteristics.

Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related tasks Loading the Dojo Toolkit into your local environment Defining the connection to use the Dojo Toolkit remotely on page 3 Related reference Chapter 2, Dojo widget library, on page 7

Loading the Dojo Toolkit into your local environment

To use the Dojo Toolkit locally, you must first load the toolkit into your local workspace. The name of the local toolkit is com.ibm.egl.rui.dojo.runtime.local_1.4. The EGL Dojo Toolkit is available on the EGL Cafe in the form of a Project Interchange File. To load and configure your environment to use the local toolkit: 1. Under Import projects, click Project Interchange File. Select the name of the EGL Project Interchange file that was downloaded from the EGL Cafe. Select the projects that you want to import and click Finish. 2. Update the EGL build path to specify the local EGL Dojo runtime project dependency. Right click your project and click Properties EGL Build Path. On the Projects tab, select com.ibm.egl.rui.dojo.runtime.local_1.4. Click OK. Import projects Get the Dojo Toolkit project Related concepts Preparation for using the EGL Dojo widgets on page 1 Related tasks Defining the connection to use the Dojo Toolkit remotely on page 3 Related reference

Developing with Dojo widgets

Chapter 2, Dojo widget library, on page 7

Defining the connection to use the Dojo Toolkit remotely

To use a remote version of the Dojo Toolkit, you need a provider connection project in your workspace. You can import either of two provider connection projects into your workspace: v To use Google as the provider, import com.ibm.egl.rui.dojo.runtime.google v To use AOL as the provider, import com.ibm.egl.rui.dojo.runtime.aol To load and configure your environment to use a connection project: 1. Click File Project Interchange File. Select the EGL Dojo Project Interchange File that was downloaded from the EGL Cafe. Select the projects you want to import and click Finish. 2. Update the EGL build path to specify the connection service that you are using to access the Dojo Toolkit. Right click your project and click Properties EGL Build Path. On the Projects tab, select the provider project to use. Click OK. Related concepts Preparation for using the EGL Dojo widgets on page 1 Related tasks Loading the Dojo Toolkit into your local environment on page 2 Related reference Chapter 2, Dojo widget library, on page 7

Themes to use with your application

The appearance of your application is determined by a theme. Themes provide a consistent appearance for all Dojo widgets in the application. You can use three themes: Nihilo, Soria, and Tundra. The following examples show each theme. Nihilo

Chapter 1. Developing with the EGL Dojo widgets

Soria

Tundra

The examples in this document use the Tundra theme. To set a theme, use the DojoLib library from the initialization of your primary Rich UI handler:
DojoLib.setTheme("tundra");

Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1

Coding an application by using Dojo widgets

To create an application by using the Rich UI Dojo widgets, you must create a Rich UI Handler part. You write your code in the Rich UI Handler part.

Developing with Dojo widgets

The com.ibm.egl.rui.dojo.widgets project depends on the com.ibm.egl.rui project, which is created by default when you create a Rich UI project. Before you import the Dojo project into a clean workspace, create a Rich UI project. To create a Rich UI handler, click File New Rich UI Handler. Use the Rich UI Handler wizard to complete the creation of the Rich UI Handler part. After the Rich UI Handler part is created, you can start to code your application by using the Rich UI editor. The following example shows a simple application that contains a button:
import dojo.widgets.DojoLib; Handler DojoButtonSample Type RUIHandler { initialUI = [ MyFirstButton ], onConstructionFunction = init } MyFirstButton dojo.widgets.DojoButton { text = "Button" }; function init() DojoLib.setTheme("tundra"); end end

Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1

Chapter 1. Developing with the EGL Dojo widgets

Developing with Dojo widgets

Chapter 2. Dojo widget library

The EGL Dojo widgets represent a set of commonly used widgets that extend the Rich UI widget library. The EGL Dojo widgets are located in the com.ibm.egl.rui.dojo.widgets project. To load the EGL Dojo widgets into your environment import the com.ibm.egl.rui.dojo.widgets project available in the project interchange file obtained from the EGL Cafe. The EGL Dojo widgets are located in the com.ibm.egl.rui.dojo.widgets project. This project is included during installation and when you open a new workspace. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference DojoAccordionContainer on page 8 DojoContentPane on page 8 DojoBarGraph on page 9 DojoBubbleChart on page 9 BubbleChartData on page 10 DojoButton on page 10 DojoCalendar on page 10 DojoCheckbox on page 11 DojoColorPalette on page 11 DojoComboBox on page 11 DojoContentPane on page 8 DojoContextMenu on page 12 DojoCurrencyTextBox on page 12 DojoDateTextBox on page 12 DojoDialog on page 13 DojoEditor on page 13 DojoGrid on page 14 DojoHorizonalSlider on page 14 DojoLineGraph on page 15 DojoMenu on page 16 DojoMenuItem on page 16 DojoPieChart on page 17 DojoProgressBar on page 17 DojoRadioGroup on page 18 DojoStackContainer on page 18 DojoTabContainer on page 19 DojoTimeTextBox on page 19 DojoTitlePane on page 20 DojoToggleButton on page 21 DojoTooltip on page 21 DojoTooltipDialog on page 21
Copyright IBM Corp. 2009,2010

DojoTree on page 22 DojoTreeNode on page 22

DojoAccordionContainer
The DojoAccordionContainer widget contains a set of panes in one pane of the user interface. When an action is taken for an individual interface, another pane in the interface is displayed. Each pane is defined by using the DojoContentPane widget.

Properties
duration The amount of time for the content pane to open after it is selected. The value is in milliseconds. selection Specifies the pane that initially opens width The total width of the container height The total height of the container

Functions
resize Resize the entire accordion container. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Preparation for using the EGL Dojo widgets on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoContentPane
The DojoContentPane defines the content of a tab pane. You must use this widget with either the DojoAccordionContainer or DojoTabContainer widgets.

Properties
children Specifies the contents on the tab pane, such as an EGL box widget closable Indicates whether the tab can be closed. Valid values are true and false. selected Indicates the tab that is initially active when the page is displayed. Valid values are true and false. If true is specified for multiple tabs, the last tab with selected=true is displayed. title The name that is displayed on the tab Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references DojoAccordionContainer DojoTabContainer on page 19 Chapter 2, Dojo widget library, on page 7

Developing with Dojo widgets

DojoBarGraph
The DojoBarGraph widget creates bar graphs. Use this widget to create vertical or horizontal bar graphs.

Properties
barGap The gap, in number of pixels, between the bars. The default value is 5. data Required. The data that the graph represents. Data must be in array format.

height The total height of the graph themeColor The color of the graph. You can use blue, red, cyan, green, orange, and purple. The default value is blue. vertical Indicates whether the bars are vertical or horizontal. The default value is true. true false The bars are vertical. The bars are horizontal.

width The total width of the graph Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoBubbleChart
The DojoBubbleChart widget creates bubble charts. Use this widget to show the relationship of three different sets of data.

Properties
data Required. The data that the chart represents. Data must be in array format. themeColor The background color of the chart height The total height of the graph, specified in number of pixels. The default value is 350. maxX maxY minX minY The maximum value for the x axis The maximum value for the y axis The minimum value for the x axis The minimum value for the y axis

width The total width of the graph, in number of pixels. The default value is 350. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7 BubbleChartData on page 10
Chapter 2. Dojo widget library

BubbleChartData
The BubbleChartData record defines the data to be contained in a bubble chart.

Properties
color size tooltip The text that is displayed when the cursor is positioned over the bubble x y The value of the horizontal axis of the graph The value of the vertical axis of the graph Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7 DojoBubbleChart on page 9 The fill color of the bubble The size of the bubble

DojoButton
The DojoButton widget creates a button that invokes a function in response to a user's click.

Properties
text The text label for the button. width The width of the button.

Events
onClick Specifies an event that occurs when the button is pressed Relate concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoCalendar
The DojoCalendar widget creates a calendar.

Properties
value Defines the month and highlights the day for the calendar that is displayed.

Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Preparation for using the EGL Dojo widgets on page 1 Related reference Chapter 2, Dojo widget library, on page 7

10

Developing with Dojo widgets

DojoCheckbox
The DojoCheckbox widget creates check boxes.

Properties
selected Indicates that the check box can be selected. Valid values are true and false. text The text label for the check box

Events
onChange Specifies an event that occurs when the button is pressed. This event is a Rich UI event. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoColorPalette
The DojoColorPalette widget creates a color palette.

Properties
small The size of the palette True False value The palette is three rows and four columns The palette is seven rows and ten columns

The color that is currently selected

Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoComboBox
The DojoComboBox widget creates combination boxes.

Properties
pageSize The number of items to be displayed at one time in the box value The default value

values The list of values Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

Chapter 2. Dojo widget library

11

DojoContextMenu
The DojoContextMenu widget creates a context menu that is invoked by a right-mouse click.

Properties
children Contains an array of DojoMenuItem records; each record represents a choice on the menu. text targets An array of Box widgets Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoMenu on page 16 DojoMenuItem on page 16 The text label for the menu box

DojoCurrencyTextBox
The DojoCurrencyTextBox widget creates text input fields that supply numeric currency values.

Properties
value The value of the input field currency The currency to be used. See ISO-4217 for list of valid currency codes. International Organization for Standardization (ISO) standards at http://www.iso.org/iso/. errorMessage The message that is displayed when the input is not valid width The size of the currency text box Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 http://www.iso.org/iso/support/currency_codes_list-1.htm

DojoDateTextBox
The DojoDateTextBox widget creates a date input field.

Properties
errorMessage The message that is displayed when the input is not valid formatLength The format of the displayed data; for example, Monday, March 16, 2009

12

Developing with Dojo widgets

versus 2009/03/16 versus 03/09. The length of the date might be restricted by region and available storage. Specify a value of short, medium, long, or full. value The value of the entered date

Functions
setValue clear Clear the current value. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoDialog
The DojoDialog widget creates a pop-up dialog box.

Properties
title The title that is displayed on the top of the dialog box children Contains the code that defines the content that is in the dialog box. The box can contain anything that can be included in the Box widget; for example, HTML or a DateBox widget. draggable Specifies whether the dialog box can be dragged. Valid values are true and false. closable Specifies whether the dialog box can be closed. Valid values are true and false.

Functions
showDialog Opens the dialog box. You can close the box by clicking the x on the right top corner, or by pressing the Esc key. hideDialog Hides the dialog box Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoEditor
The DojoEditor widget creates a text box that has editing functions.

Properties
editorHeight The height of the editor. Specify the value as an integer.

Chapter 2. Dojo widget library

13

editorWidth The width of the editor. Specify the value as an integer.

Functions
getContents Gets the HTML contents of the editor. setContents Sets the HTML contents of the editor. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Preparation for using the EGL Dojo widgets on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoGrid
The DojoGrid widget displays data in a table.

Properties
behaviors Defines the function that is invoked for each cell columns Defines the columns in the table data An array of records that contains information to put into the table. Specify as data=(array_name as any[]), where array_name is the name of the array.

headerBehaviors Defines the function that is invoked for each header cell

Events
onGridRowClick The action to occur when the row is selected

Functions
addRow Adds a row to the table removeRow Removes a row from the table Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoHorizonalSlider
The DojoHorizonalSlider widget creates a horizontal ruler.

Properties
maximum The maximum value of the ruler

14

Developing with Dojo widgets

minimum The minimum value of the ruler step The increments of the values between the minimum and maximum values of the ruler

showLabels Indicates whether to show the labels of the minimum, maximum, and steps values. Valid values are true and false. value The current value for the ruler

width The size of the ruler in pixels Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoLineGraph
The DojoLineGraph widget displays line graphs.

Properties
data The data that is plotted on the graph height The height of the graph in pixels maxX maxY minX minY The maximum value to be displayed at the left of the x axis of the graph. The default is based on the number of elements in the data property. The maximum value to be displayed at the top of the y axis of the graph. The default is based on the value of the data property. The minimum value to be displayed at the right of the x axis of the graph. This property defaults to 0. The minimum value to be displayed at the bottom of the y axis of the graph. This property defaults to 0.

showMarkers Defines whether a marker, or point, is shown on the line for the data that is being graphed. Valid values are true and false. true false A marker is shown on the line for each of the items being graphed. A marker is not shown on the line for each of the items being graphed.

showShadows Defines if a shadow for the graph line is shown. Valid values are true and false. true false tension Sets the curvature of the graph themeColor The color of the graph. The color can be blue, red, cyan, green, orange, or purple. Graph shadow is shown. Graph shadow is not shown.

Chapter 2. Dojo widget library

15

width The width of the graph in pixels Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoMenu
Along with one or more DojoMenuItem widgets, the DojoMenu widget creates menu items. To create complex menus, you can nest the DojoMenu and DojoMenuItem widgets.

Properties
children An array of records that contains information to add to the menu. Specify as children=(array_name as any[]), where array_name is the name of the array. text The text label for the menu box

Events
onMenuItemSelected The event that is called when a menu item is selected Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoMenuItem

DojoMenuItem
The DojoMenuItem widget describes the items that are associated with a menu. Code a DojoMenuItem widget for each menu item.

Properties
disabled Indicates whether the menu item is disabled. If a menu item is disabled, it is gray. Valid values are true and false. iconClass Specifies the CSS style class for the icon that is associated with the menu item text The text of the item within the menu list Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoMenu

16

Developing with Dojo widgets

DojoPieChart
Along with one or more PieChartData records, the DojoPieChart widget creates pie charts.

Properties
data The name of the PieChartData record that contains the data for the pie chart

fontColor The color of the pie chart. It can be blue, red, cyan, green, orange, or purple. height The height of the pie chart, in pixels labelOffSet The offset of the labels from the center. For a radius of 100, a value of value of 40 is optimal. radius The radius of the pie chart, in pixels. A value of 100 is optimal. width The total width of the pie chart, in pixels Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 PieChartData

PieChartData
The PieChartData record describes the sections within a pie chart. Code a PieChartData record for each section of the pie chart.

Properties
color The color that is associated with the section of the chart that you are defining

fontColor The color of the font for the text label text y The text that is to be placed inside the section

The numeric value that was used to calculate the amount of space this data record occupies in the chart related to the other data records. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoPieChart

DojoProgressBar
The DojoProgressBar widget displays progress bars.

Chapter 2. Dojo widget library

17

Properties
maximum The maximum value of the progress progress The current progress width The width of the progress bar Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoRadioGroup
The DojoRadioGroup widget defines radio buttons.

Properties
options The text label for the button selected Specifies whether the radio button can be selected. Valid values are true and false. vertical Specifies whether the list of buttons is horizontal or vertical. Valid values are true and false. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoStackContainer
The DojoStackContainer widget creates a container that has multiple children. Only one child is displayed at a time.

Properties
height The total height of the container width The total width of the container controller The controller for the stack. selection The index of the currently selected stack.

Events
onStackSelected Notifies users when the specified stack is selected.

18

Developing with Dojo widgets

Functions
nextStack Moves to the next stack. prevousStack Moves to the previous stack. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoTabContainer
The DojoTabContainer widget creates tab folders.

Properties
children An array of DojoContentPane widgets that represent the tabs height The height of the tab folder, in pixels selection Returns the index of the currently selected tab tabPosition The position of the tab locations. Valid values are top, left, bottom, and right. width The width of the tab folder, in pixels

Events
onTabSelected The event that occurs when the tab is selected

Functions
showTab Displays the specified tab Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoContentPane on page 8

DojoTimeTextBox
The DojoTimeTextBox creates a time input field.

Properties
clickableIncrement The increment that is shown on the time selection menu. Increments range from 5 minutes to 24 hours. The default value is 15 minutes. For example: TIMEBOX_ONE_QUARTER The increment is 15 minutes.
Chapter 2. Dojo widget library

19

TIMEBOX_HALF_HOUR The increment is 30 minutes. TIMEBOX_FULL_DAY The increment is 24 hours. errorMessage The message that is displayed when the input is not valid timePattern The expected format pattern for the time to be entered TIMEBOX_FORMAT_12HR The time format is between 12:00 - 11:59 AM and 12:00-11:59 PM. TIMEBOX_FORMAT_24HR The time format is 0 - 24. value The value of the time that is selected

visibleIncrement The increment in which the time is displayed in the time selection menu. The difference between the times that are displayed and what is shown when someone clicks the input field. visibleRange The range of the times to be displayed in the time selection menu at one time. To view additional times, use the scroll bar. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoTitlePane
The DojoTitlePane widget creates a collapsible container with a title bar.

Properties
children The box in the pane that contains information about the pane duration The number of milliseconds that an animation runs isOpen Controls whether the area is expanded or open by default title The title of the pane

width The width of the title pane

Functions
setContent Specifies the pane that is to be displayed setTitle Specifies the title of the pane toggle Opens and closes the pane Related concepts

20

Developing with Dojo widgets

Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoToggleButton
The DojoToggleButton widget creates a button and the text of the button changes when clicked.

Properties
text The text label for the button. checkedText The text label for when clicked.

Functions
isChecked Returns true if the button is checked. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Preparation for using the EGL Dojo widgets on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoTooltip
The DojoTooltip widget creates a pop-up window that contains information. You can use the DojoTooltip with any element that uses the ID property.

Properties
contents The text that is displayed in the pop-up window. target The ID of the element to which the pop-up window is to attach. defaultPosition The location where the pop-up window is to be displayed. delay The amount of time before the pop-up window is displayed. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Preparation for using the EGL Dojo widgets on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoTooltipDialog
The DojoTooltipDialog widget creates a tooltip that contains a dialog.

Properties
children The contents of the dialog.
Chapter 2. Dojo widget library

21

text

The text label for the button.

Functions
hide Hides the dialog box. Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Preparation for using the EGL Dojo widgets on page 1 Related reference Chapter 2, Dojo widget library, on page 7

DojoTree
The DojoTree widget works with an array of DojoTreeNode records to create trees.

Properties
children Identifies the nodes that compose a tree. Points to an array of DojoTreeNode records that define the tree nodes. text The name of a top-level root node

Events
onClick Specifies an event that occurs when the tree node is clicked

Functions
addTreeNode Adds a tree node to the tree removeTreeNode Removes a tree node from the tree updateTreeNode Changes a tree node in the tree Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoTreeNode

DojoTreeNode
The DojoTreeNode record creates the elements that compose a tree.

Properties
children Defines the sub-elements of the node, encloses the sub-elements in brackets, and separates each DojoTreeNode record with a comma.
children = [ new DojoTreeNode { id = node_id, text = node_text }, new DojoTreeNode { id = node_id, text = node_name } ]

id

The required identifier for this tree node

22

Developing with Dojo widgets

text The name of the node Related concepts Chapter 1, Developing with the EGL Dojo widgets, on page 1 Related references Chapter 2, Dojo widget library, on page 7 DojoTree on page 22

Chapter 2. Dojo widget library

23

24

Developing with Dojo widgets

Appendix. Notices
This information was developed for products and services offered in the U.S.A. IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service. IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing of this document does not grant you any license to these patents. You can send license inquiries, in writing, to: IBM Director of Licensing IBM Corporation North Castle Drive Armonk, NY 10504-1785 U.S.A. For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property Department in your country or send inquiries, in writing, to: IBM World Trade Asia Corporation Licensing 2-31 Roppongi 3-chome, Minato-ku Tokyo 106-0032, Japan The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement may not apply to you. This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice. Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk. Licensees of this program who wish to have information about it for the purpose of enabling: (i) the exchange of information between independently created

Copyright IBM Corp. 2009,2010

25

programs and other programs (including this one) and (ii) the mutual use of the information which has been exchanged, should contact: Intellectual Property Dept. for Rational Software IBM Corporation 3600 Steeles Avenue East Markham, ON Canada L3R 9Z7 Such information may be available, subject to appropriate terms and conditions, including in some cases, payment of a fee. The licensed program described in this document and all licensed material available for it are provided by IBM under terms of the IBM Customer Agreement, IBM International Program License Agreement or any equivalent agreement between us. Any performance data contained herein was determined in a controlled environment. Therefore, the results obtained in other operating environments may vary significantly. Some measurements may have been made on development-level systems and there is no guarantee that these measurements will be the same on generally available systems. Furthermore, some measurements may have been estimated through extrapolation. Actual results may vary. Users of this document should verify the applicable data for their specific environment. Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products. All statements regarding IBM's future direction or intent are subject to change or withdrawal without notice, and represent goals and objectives only. This information contains examples of data and reports used in daily business operations. To illustrate them as completely as possible, the examples include the names of individuals, companies, brands, and products. All of these names are fictitious and any similarity to the names and addresses used by an actual business enterprise is entirely coincidental. COPYRIGHT LICENSE: This information contains sample application programs in source language, which illustrate programming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operating platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs. Each copy or any portion of these sample programs or any derivative work, must include a copyright notice as follows: (your company name) (year). Portions of this code are derived from IBM Corp. Sample Programs. Copyright IBM Corp. _enter the year or years_. All rights reserved.

26

Developing with Dojo widgets

If you are viewing this information softcopy, the photographs and color illustrations may not appear.

Programming interface information

Programming interface information is intended to help you create application software using this program. General-use programming interfaces allow you to write application software that obtain the services of this program's tools. However, this information may also contain diagnosis, modification, and tuning information. Diagnosis, modification and tuning information is provided to help you debug your application software. Warning: Do not use this diagnosis, modification, and tuning information as a programming interface because it is subject to change.

Trademarks and service marks

IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. These and other IBM trademarked terms are marked on their first occurrence in this information with the appropriate symbol ( or ), indicating US registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at www.ibm.com/legal/copytrade.html. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Linux is a trademark of Linus Torvalds in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. UNIX is a registered trademark of The Open Group in the United States and other countries. Other company, product or service names, may be trademarks or service marks of others.

Appendix. Notices

27

28

Developing with Dojo widgets

Index A
applications Dojo widgets 5 Dojo (continued) widgets (continued) DojoStackContainer 18 DojoTabContainer 19 DojoTitlePane 20 DojoToggleButton 21 DojoTooltip 21 DojoTooltipDialog 21 DojoTree 22 DojoTreeNode 22 library 7 local 2 overview 1 PieChartData 17 preparation 1 remote 3 themes 3 DojoBarGraph Dojo 9 DojoBubbleChart Dojo 9 DojoButton Dojo 10 DojoCheckbox Dojo 11 DojoContentPane Dojo 8 DojoContextMenu Dojo 12 DojoCurrencyTextBox Dojo 12 DojoDateTextBox Dojo 12 DojoDialog Dojo 13 DojoGrid Dojo 14 DojoLineGraph Dojo 15 DojoMenu Dojo 11, 14, 16 DojoMenuItem Dojo 16 DojoPieChart Dojo 17 DojoProgressBar Dojo 18 DojoRadioGroup Dojo 18 DojoTabContainer Dojo 19 DojoTimeTextBox Dojo 19 DojoTitlePane Dojo 20

B
BubbleChartData Dojo 10

D
dojo widgets DojoLineGraph 15 DojoTimeTextBox 19 Dojo widgets BubbleChartData 10 coding 5 ContextMenu 12 DojoAccordionContainer 8 DojoBarGraph 9 DojoBubbleChart 9 DojoButton 10 DojoCalendar 10 DojoCheckbox 11 DojoColorPalette 11 DojoComboBox 11 DojoContentPane 8 DojoCurrencyTextBox 12 DojoDateTextBox 12 DojoDialog 13 DojoEditor 13 DojoGrid 14 DojoHorizonalSlider 14 DojoMenu 16 DojoMenuItem 16 DojoPieChart 17 DojoProgressBar 18 DojoRadioGroup 18

L
library Dojo 7

P
PieChartData Dojo 17

T
trademarks 27

W
widgets Dojo 8, 10, 13, 18, 21 coding 5 local 2 overview 1 preparation 1 remote 3 themes 3

Copyright IBM Corp. 2009,2010

29