Developing with Dojo widgets

Rational Business Developer
Developing with Dojo widgets
Version 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
Chapter 2. Dojo widget library . . . . . 7
DojoAccordionContainer
DojoContentPane . .
DojoBarGraph . . . .
DojoBubbleChart . . .
BubbleChartData .
DojoButton . . . .
DojoCalendar. . . .
DojoCheckbox . . .
DojoColorPalette. . .
DojoComboBox . . .
DojoContextMenu . .
DojoCurrencyTextBox .
DojoDateTextBox . .
DojoDialog . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
© Copyright IBM Corp. 2009,2010
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. 8
. 8
. 9
. 9
. 10
. 10
. 10
. 11
. 11
. 11
. 12
. 12
. 12
. 13
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
Appendix. Notices . . . . . . . . . . 25
Programming interface information .
Trademarks and service marks . . .
.
.
.
.
.
.
.
.
. 27
. 27
Index . . . . . . . . . . . . . . . 29
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
The Dojo Toolkit must be imported into your workspace to provide the
necessary code for the EGL Dojo widgets to run locally.
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.
© Copyright IBM Corp. 2009,2010
1
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
the toolkit.
v Performance is better because the browser
caches more resources.
v You control where the toolkit is accessed
from.
v The integrated development environment
(IDE) is faster because there are fewer
things in your workspace.
v You can develop new Dojo widgets and
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, the
Dojo Toolkit files are copied to your web
server.
v You must be connected to the Internet. If
you do not have a fast speed connection,
the first run can be slow.
v You must access the Dojo files from your
server; this action might lead to extra
bandwidth.
v Hosted servers usually implement usage
tracking, which you might want to avoid.
v The startup time for your application
might be slower because of browser
caching and performance characteristics.
v You must rely on a third party to
maintain the integrity of the Dojo Toolkit
libraries.
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
2
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
3
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.
4
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
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. 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
7
“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
8
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
The bars are vertical.
false
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
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” on page 10
Chapter 2. Dojo widget library
9
BubbleChartData
The BubbleChartData record 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
The value of the horizontal axis of the graph
x
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 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
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.
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
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 16
“DojoMenuItem” on page 16
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
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.
maxY
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.
minX
The minimum value to be displayed at the right of the x axis of the graph.
This property defaults to 0.
minY
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
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
themeColor
The color of the graph. The color can be blue, red, cyan, green, orange, or
purple.
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
22
Developing with Dojo widgets
The required identifier for this tree node
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
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
© Copyright IBM Corp. 2009,2010
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
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
29