򔻐򗗠򙳰

Developing with Dojo widgets

ii Developing with Dojo widgets
Contents
Chapter 1. Developing with the EGL DojoCurrencyTextBox . . . . . . . . . . . 12
Dojo widgets . . . . . . . . . . . . 1 DojoDateTextBox . . . . . . . . . . . . 13
Migrating from EGL Dojo version 0.6.0 to version DojoDialog . . . . . . . . . . . . . . 13
0.7.1.1. . . . . . . . . . . . . . . . . 2 DojoGrid . . . . . . . . . . . . . . . 14
Preparation for using the EGL Dojo widgets . . . . 2 DojoHorizonalSlider . . . . . . . . . . . 15
Themes to use with your application . . . . . . 3 DojoLineGraph . . . . . . . . . . . . . 16
Coding an application by using Dojo widgets . . . 5 DojoMenu . . . . . . . . . . . . . . . 17
DojoMenuItem . . . . . . . . . . . . 17
DojoPieChart . . . . . . . . . . . . . . 18
Chapter 2. Dojo widget library . . . . . 7 PieChartData . . . . . . . . . . . . . 19
DojoAccordionContainer . . . . . . . . . . 7 DojoProgressBar . . . . . . . . . . . . . 19
DojoContentPane . . . . . . . . . . . . 8 DojoRadioGroup . . . . . . . . . . . . 20
DojoBarGraph . . . . . . . . . . . . . . 9 DojoTabContainer . . . . . . . . . . . . 20
DojoBubbleChart . . . . . . . . . . . . . 9 DojoTimeTextBox . . . . . . . . . . . . 21
BubbleChartData . . . . . . . . . . . 10 DojoTitlePane. . . . . . . . . . . . . . 21
DojoButton . . . . . . . . . . . . . . 10 DojoTree . . . . . . . . . . . . . . . 22
DojoCheckbox . . . . . . . . . . . . . 11 DojoTreeNode . . . . . . . . . . . . 23
DojoColorPalette. . . . . . . . . . . . . 11
DojoComboBox . . . . . . . . . . . . . 11
DojoContextMenu . . . . . . . . . . . . 12
Index . . . . . . . . . . . . . . . 25

iii
iv Developing with Dojo widgets
Chapter 1. Developing with the EGL Dojo widgets
The Dojo widgets for EGL Rich UI are a set of Dojo widgets that are ready to use
in 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 widgets represent a set of commonly used widgets that
extend the Rich UI widget library.

The package contents

The EGL Rich UI Dojo widget download file is located on EGL Café. To use this
version of the EGL Rich UI Dojo widgets, you must have Rational Business
Developer, version 7.5.1.4 installed.

There are five projects inside the project interchange file.

com.ibm.egl rui.dojo.runtime.local_1.3.2.1
Contains the IBM Dojo Toolkit version 1.3.2. This project ensures
development of EGL Dojo applications can occur without the need for an
internet connection.
com.ibm.egl.rui.dojo.runtime.aol_1.3.2.1
Contains connection information to use AOL for remote accessing of the
Dojo Toolkit during runtime.
com.ibm.egl.rui.dojo.runtime.google_1.3.2.1
Contains connection information to use Google for remote accessing of the
Dojo Toolkit during runtime.
com.ibm.egl.rui.dojo.widgets_0.7.1.1
Contains the EGL Dojo widget code
com.ibm.egl.rui.dojo.samples_0.7.1.1
Contains sample Rich UI handlers for each Dojo widget that you can use
to familiarize yourself with the widgets.

Accessing the Dojo widgets

To access and use the Dojo widgets.

1. Download the interchange project file that contains the widgets. The file is
named com.ibm.egl.rui.dojo_0.7.1.1.zip.
2. If you do not have the com.ibm.egl.rui_1.0.2 project in your workspace, create a
new Rich UI project. The com.ibm.egl.rui.dojo.widgets_0.7.1.1 project depends
on the com.ibm.egl.rui_1.0.2 project, which is created automatically when a new
Rich UI project is created.
3. Import the project interchange file into your workspace. For information about
importing into your workspace, see “Preparation for using the EGL Dojo
widgets” on page 2 to determine which files you will import.
4. Update the EGL build path of your Rich UI project to include the location of
the Dojo Toolkit (local, Google, or AOL).

© Copyright IBM Corporation 2009 1

 Right click your project and click Properties → EGL Build Path. On the Projects
tab, select the local Dojo Toolkit or the Dojo Toolkit provider connection project
that you want to use. Click OK.
5. (Optional) In the Rich UI handler, set the theme for your application. There are
several supplied themes that you can use. For information about available
themes, see “Themes to use with your application” on page 3. The default
theme is tundra.

To open one of the samples in the com.ibm.egl.rui.dojo.samples project,

1. Right mouse click the sample.
2. Click Open with → EGL Rich UI Editor.

Note: Simply double-clicking one of the EGL files, opens the sample with the
default EGL source editor.

The following example shows a simple application that contains a Dojo button:
Handler DojoButtonSample Type RUIHandler { initialUI = [ MyFirstButton ]}
MyFirstButton dojo.widgets.DojoButton { text = "Button" };
end
Related concepts
“Preparation for using the EGL Dojo widgets”
“Migrating from EGL Dojo version 0.6.0 to version 0.7.1.1”
“Themes to use with your application” on page 3
Related tasks
“Coding an application by using Dojo widgets” on page 5
Related reference
Chapter 2, “Dojo widget library,” on page 7

Migrating from EGL Dojo version 0.6.0 to version 0.7.1.1

The current ELG Dojo widget version 0.7.1.1 release contains significant changes
from version 0.6.0.

The current EGL Dojo widgets version 0.7.1.1 are for Rational Business Developer
version 7.5.1.4. Any existing EGL applications using the version 0.6.0 widgets may
require a change. That said, the current API has been firmly defined and will not
experience significant changes in future releases.
Related concepts
Chapter 1, “Developing with the EGL Dojo widgets,” on page 1
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 The Dojo Toolkit must be imported into your workspace to provide the
necessary code for the EGL Dojo widgets to run locally.
Remote
The Dojo Toolkit is accessed by using a provider connection project. To use

2 Developing with Dojo widgets

 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.

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.
Table 1. Considerations for accessing the Dojo Toolkit locally or remotely
Local Remote
Flexibility Performance
v You do not need the Internet to access to v Performance is better because the browser
the toolkit. caches more resources.
v You control where the toolkit is accessed v The integrated development environment
from. (IDE) is faster because there are fewer
v You can develop new Dojo widgets and things in your workspace.
debug the JavaScript. v You deploy your own application only,
and you do not have to deploy the Dojo
Toolkit files.
Slower deployment Dependency on third parties
v When you deploy your application, v You must be connected to the Internet. If
Rational Business Developer must copy you do not have a fast speed connection,
the Dojo Toolkit files to your Web server. the first run can be slow.
v You must serve up the Dojo files from v Hosted servers usually implement usage
your server; this action might lead to tracking, which you might want to avoid.
extra bandwidth. v You must rely on a third party to
v The startup time for your application maintain the integrity of the Dojo Toolkit
might be slower because of browser libraries.
caching and performance characteristics.

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

Themes to use with your application

The general look 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
the look of each theme. If you do not specify a theme, Tundra is the default.

Chapter 1. Developing with the EGL Dojo widgets 3

 Nihilo

Soria

4 Developing with Dojo widgets

 Tundra

The examples in this document uses the Tundra theme. To set a theme, use the
DojoLib library from the initialization of your primary Rich UI handler.
function start()
DojoLib.setTheme("soria");
end
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.

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

MyFirstButton dojo.widgets.DojoButton { text = "Button" };
end
Related concepts
Chapter 1, “Developing with the EGL Dojo widgets,” on page 1

Chapter 1. Developing with the EGL Dojo widgets 5

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

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”
“DojoBarGraph” on page 9
“DojoBubbleChart” on page 9
“BubbleChartData” on page 10
“DojoButton” 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 13
“DojoDialog” on page 13
“DojoGrid” on page 14
“DojoHorizonalSlider” on page 15
“DojoLineGraph” on page 16
“DojoMenu” on page 17
“DojoMenuItem” on page 17
“DojoPieChart” on page 18
“DojoProgressBar” on page 19
“DojoRadioGroup” on page 20
“DojoTabContainer” on page 20
“DojoTimeTextBox” on page 21
“DojoTitlePane” on page 21
“DojoTree” on page 22
“DojoTreeNode” on page 23

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.

7
 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
Related concepts
Chapter 1, “Developing with the EGL Dojo widgets,” on page 1
“Preparation for using the EGL Dojo widgets” on page 2
Related reference
“DojoContentPane”
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

Example

The following example shows the code and outcome for the DojoTabContainer and
DojoContentPane widgets.
blueBox Box {background="#0099FF",height="100%",columns=1,
children = [new HTML {marginLeft=10, paddingTop=11,
text = "List of townhouses "}

DojoTabContainer {width="100%",height=300,
tabPosition=positionCombo.values[positionCombo.selection],
onTabSelected ::= TabSelected,onTabRemoved ::= TabRemoved,
children =[
new DojoContentPane {title="Apartments",children=[yellowDiv] },
new DojoContentPane {title="Houses",closable=true,children=[orangeDiv] },
new DojoContentPane {title="Townhouses",selected=true,children=[blueBox] }]
};

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

8 Developing with Dojo widgets

 “DojoTabContainer” on page 20
Chapter 2, “Dojo widget library,” on page 7

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 The bars are vertical.
false The bars are horizontal.
width The total width of the graph

Example

The following example shows the code and output for a bar graph that contains
four columns:
dbg DojoBarGraph {barGap=5,vertical=true, data=[4, 1,5,3], ThemeColor="blue",
width=350, height=350};

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.

Chapter 2. Dojo widget library 9

 maxX The maximum value for the x axis
maxY The maximum value for the y axis
minX The minimum value for the x axis
minY 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”

BubbleChartData
Defines the data to be contained in a bubble chart.

Properties
color The fill color of the bubble
size The size of the bubble
tooltip
The text that is displayed when the cursor is positioned over the bubble
x The value of the horizontal axis of the graph
y 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

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 is to occur when the button is pressed

Example

The following example shows the code and outcome for a button that is labeled
″My Button″.
new DojoButton {text="My Button"}

10 Developing with Dojo widgets

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

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 is to occur when the button is pressed. This event is
a Rich UI event.

Example

The following example shows the code and outcome for a check box.
DojoCheckbox {text = "My Checkbox", selected = true};

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 The palette is three rows and four columns
False The palette is seven rows and ten columns
value 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.

Chapter 2. Dojo widget library 11

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

Example

The following example shows the code and output for a combination box that
contains three items.
ComboBox DojoComboBox{values=["Dogs","Cats","Birds"],value="Cats"};

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

DojoContextMenu
You can use the DojoContextMenu widget to create 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 The text label for the menu box
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 17
“DojoMenuItem” on page 17

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 are on the
following Web site: http://www.iso.org/iso/.

12 Developing with Dojo widgets

 errorMessage
The message that is displayed when the input is not valid
width The size of the currency text box

Example

The following example shows the code and output for the DojoCurrencyTextBox
widget.
textField DojoCurrencyTextBox{ value="$100.00",currency="USD"};

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
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,
and full.
value The value of the entered date

Functions
setValue

Example

The following example shows the code and output for the DojoDateTextBox
widget.
dateBox DojoDateTextBox{errorMessage="The format of the date is incorrect.",
formatLength="long"};

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.

Chapter 2. Dojo widget library 13

 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

Example

The following example shows the code and output for the DojoDialog widget. The
example contains HTML text and a button.
new DojoDialog{title="Test Dialog Box",innerBox=box};

Related concepts
Chapter 1, “Developing with 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.

14 Developing with Dojo widgets

 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

Example

The following example shows the code and output for the DojoGrid widget.
DojoGrid {marginLeft=20, behaviors = [ addEditors, centerColumns ],
headerBehaviors = [ resize, centerColumns ],
columns = [new DojoGridColumn {name="SelectQuote",displayName="X",width=17},
new DojoGridColumn {name="Symbol"},
new DojoGridColumn {name="Quote",displayName="Price"},
new DojoGridColumn {name="NumShares", displayName="Shares"}],
data = [new Stock{Symbol="Company1",Quote=100,NumShares=4,SelectQuote=false},
new Stock{Symbol="Company2",Quote=200,NumShares=100,SelectQuote=false},
new Stock{Symbol="Company3",Quote=200,NumShares=15,SelectQuote=false},
new Stock{Symbol="Company4",Quote=120,NumShares=10,SelectQuote=true},
new Stock{Symbol="Company5",Quote=200,NumShares=20,SelectQuote=false}]}

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
minimum
The minimum value of the ruler

Chapter 2. Dojo widget library 15

 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

Example

The following example shows the code and outcome for a horizontal slider.
DojoHorizontalSlider { width="300",value="80",step="10",showLabels=true}

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 The maximum value to be displayed at the left of the x axis of the graph.
Default is based on number of elements in data property.
maxY The maximum value to be displayed at the top of the y axis of the graph.
Default is based on value of data property.
minX The minimum value to be displayed at the right of the x axis of the graph.
Defaults to 0.
minY The minimum value to be displayed at the bottom of the y axis of the
graph. Defaults to 0.
showMarkers
Defines whether a marker (point) is shown on the line for the data that is
being graphed. Valid values are true and false.
true A marker is shown on the line for each of the items being graphed.
false 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 Graph shadow is shown.
false Graph shadow is not shown.
tension
Sets the curvature of the graph

16 Developing with Dojo widgets

 themeColor
The color of the graph. The color can be blue, red, cyan, green, orange, or
purple.
width The width of the graph in pixels

Example

The following example shows the code and output for a line graph.
new DojoLineGraph{data=[1.5, 2.8, 5.4, 3.6, 6 ,7.9 ], themeColor="blue",
showMarkers=false, showShadows=false, tension="0",
width="400", height="400" };

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

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

Properties
children
An array of records that contains information to put into 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.

Chapter 2. Dojo widget library 17

 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

Example

The following example shows the code and output for a menu item that contains
three items.
DojoMenu {text = "Edit", children =
[DojoMenuItem {text="Cut",onClick ::= handleCut,iconClass="dijitEditorIcon dijitEditorIconCut"},
DojoMenuItem {text="Copy",onClick ::=handleCopy,iconClass="dijitEditorIcon dijitEditorIconCopy"},
DojoMenuItem {text="Paste",disabled=true,iconClass="dijitEditorIcon dijitEditorIconPaste"},
DojoMenuItem {text="Paste Special",children =[
DojoMenu {children =[createMenuItem("As HTML"),createMenuItem("As plain text")]}
]}

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 17

DojoPieChart
Use the DojoPieChart widget with one or more PieChartData records to create 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” on page 19

18 Developing with Dojo widgets

 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 The text that is to be placed inside the section
y 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.

Example
The following example shows the code and output for a pie chart that contains
four sections. A PieChartData record defines each section.
DojoPieChart {radius=100,width="300",height="300",
labelOffset=50,fontColor="black",
data = [
new PieChartData{ y=1, text="SUVs",color="green"},
new PieChartData{ y=2, text="sedans",color="yellow"},
new PieChartData{ y=2, text="hybrids",color="#3300FF"},
new PieChartData{ y=2, text="hatchbacks",color="#9900FF"}]
}

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

Related references
Chapter 2, “Dojo widget library,” on page 7
“DojoPieChart” on page 18

DojoProgressBar
The DojoProgressBar widget displays progress bars.

Properties
maximum
The maximum value of the progress
progress
The current progress
width The width of the progress bar

Example

The following example shows the code and output for a progress bar.
dpb DojoProgressBar{maximum="100",progress="50",width="300"};

Chapter 2. Dojo widget library 19

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

DojoRadioGroup
Use the DojoRadioGroup widget to define 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.

Example

The following example shows the code and outcome for a group of radio buttons,
which are labeled soda, coffee, and tea.
radio DojoRadioGroup {vertical=true,options=["soda","coffee","tea" ],selected="coffee",onChange ::=chooseDrink };

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

20 Developing with Dojo widgets

 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 a full day. The default value is 15 minutes. For example:
TIMEBOX_ONE_QUARTER
The increment is 15 minutes.
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.

Chapter 2. Dojo widget library 21

 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 for 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
Chapter 1, “Developing with 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 is to occur 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” on page 23

22 Developing with Dojo widgets

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

Properties
children
Define the sub-elements of the node, enclose the sub-elements in brackets,
and separate 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
text The name of the node

Example

The following example shows the code and output for a tree diagram that contains
two nodes: North America and Europe. The nodes are defined by the TreeNode
record, which is pointed to by the treeNodes property.
DojoTree { text="World",onClick ::= handleCity,children=[
DojoTreeNode {id="NA",text="North America",children=[
DojoTreeNode {id="CA",text="Canada"},
DojoTreeNode {id="US",text="USA"} ]},

DojoTreeNode {id="EU",text="Europe",children= [
DojoTreeNode {id="GR",text="Greece"},
DojoTreeNode {id="IT",text="Italy"}]}

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
Index
A Dojo (continued)
widgets (continued)
DojoMenuItem
Dojo 17
applications DojoProgressBar 19 DojoPieChart
Dojo widgets 5 DojoRadioGroup 20 Dojo 18
DojoTabContainer 20 DojoProgressBar
DojoTitlePane 22 Dojo 19
B DojoTree 22 DojoRadioGroup
BubbleChartData DojoTreeNode 23 Dojo 20
Dojo 10 library 7 DojoTabContainer
migration 2 Dojo 20
overview 1 DojoTimeTextBox
D PieChartData 19
preparation 2
Dojo 21
DojoTitlePane
dojo themes 3 Dojo 22
widgets DojoBarGraph
DojoLineGraph 16 Dojo 9
DojoTimeTextBox 21
Dojo
DojoBubbleChart
Dojo 9
L
widgets library
DojoButton
BubbleChartData 10 Dojo 7
Dojo 10
coding 5 DojoCheckbox
ContextMenu 12 Dojo 11
DojoAccordionContainer 8 DojoContentPane P
DojoBarGraph 9 Dojo 8 PieChartData
DojoBubbleChart 9 DojoContextMenu Dojo 19
DojoButton 10 Dojo 12
DojoCheckbox 11 DojoCurrencyTextBox
DojoColorPalette 11
DojoComboBox 12
Dojo 12
DojoDateTextBox
W
DojoContentPane 8 widgets
Dojo 13
DojoCurrencyTextBox 12 Dojo 8
DojoDialog
DojoDateTextBox 13 coding 5
Dojo 14
DojoDialog 14 migration 2
DojoGrid
DojoGrid 15 overview 1
Dojo 15
DojoHorizonalSlider 15 preparation 2
DojoLineGraph
DojoMenu 17 themes 3
Dojo 16
DojoMenuItem 17 DojoMenu
DojoPieChart 18 Dojo 11, 12, 15, 17

25