developing with dojo widgets - ibm€¦ · chapter 1, “developing with the egl dojo widgets,”...

29
Developing with Dojo widgets

Upload: others

Post on 23-May-2020

18 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Developing with Dojo widgets

���

Page 2: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

ii Developing with Dojo widgets

Page 3: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Contents

Chapter 1. Developing with the EGLDojo widgets . . . . . . . . . . . . 1Preparation for using the EGL Dojo widgets . . . . 1

Loading the Dojo Toolkit into your localenvironment . . . . . . . . . . . . . 2Defining the connection to use the Dojo Toolkitremotely . . . . . . . . . . . . . . . 3

Themes to use with your application . . . . . . 3Coding an application by using Dojo widgets . . . 4

Chapter 2. Dojo widget library . . . . . 7DojoAccordionContainer . . . . . . . . . . 8

DojoContentPane . . . . . . . . . . . . 8DojoBarGraph . . . . . . . . . . . . . . 8DojoBubbleChart . . . . . . . . . . . . . 9

BubbleChartData . . . . . . . . . . . . 9DojoButton . . . . . . . . . . . . . . 10DojoCalendar. . . . . . . . . . . . . . 10DojoCheckbox . . . . . . . . . . . . . 10DojoColorPalette. . . . . . . . . . . . . 11DojoComboBox . . . . . . . . . . . . . 11DojoContextMenu . . . . . . . . . . . . 11DojoCurrencyTextBox . . . . . . . . . . . 12

DojoDateTextBox . . . . . . . . . . . . 12DojoDialog . . . . . . . . . . . . . . 13DojoEditor. . . . . . . . . . . . . . . 13DojoGrid . . . . . . . . . . . . . . . 14DojoHorizonalSlider . . . . . . . . . . . 14DojoLineGraph . . . . . . . . . . . . . 15DojoMenu . . . . . . . . . . . . . . . 16

DojoMenuItem . . . . . . . . . . . . 16DojoPieChart . . . . . . . . . . . . . . 17

PieChartData . . . . . . . . . . . . . 17DojoProgressBar . . . . . . . . . . . . . 17DojoRadioGroup . . . . . . . . . . . . 18DojoStackContainer. . . . . . . . . . . . 18DojoTabContainer . . . . . . . . . . . . 19DojoTimeTextBox . . . . . . . . . . . . 19DojoTitlePane. . . . . . . . . . . . . . 20DojoToggleButton . . . . . . . . . . . . 21DojoTooltip . . . . . . . . . . . . . . 21DojoTooltipDialog . . . . . . . . . . . . 21DojoTree . . . . . . . . . . . . . . . 22

DojoTreeNode . . . . . . . . . . . . 22

Index . . . . . . . . . . . . . . . 25

iii

Page 4: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

iv Developing with Dojo widgets

Page 5: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

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 usein an EGL Rich UI application.

The Dojo Toolkit is an open source toolkit that contains JavaScript™ widgets. Formore information about the Dojo Toolkit, see http://dojotoolkit.org.

The ready-to-use EGL Dojo version 1.4 widgets represent a set of commonly usedwidgets that extend the Rich UI widget library.

Related concepts

“Preparation for using the EGL Dojo widgets”“Themes to use with your application” on page 3Related 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 4Related reference

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

Preparation for using the EGL Dojo widgetsYou can develop with the EGL Dojo widgets by using either a local or remoteversion of the Dojo Toolkit. In either case, you must specify the Dojo Toolkitprovider on your EGL build path.

Local The Dojo Toolkit must be imported into your workspace to provide thenecessary code for the EGL Dojo widgets to run locally.

RemoteThe Dojo Toolkit is accessed by using a provider connection project. To usethe Dojo Toolkit remotely, you must connect to the toolkit though aprovider, such as Google or AOL. The provider hosts the Dojo Toolkit foruse by Dojo developers.

You might use a local version of the toolkit instead of a remote version for manyreasons. To learn about the advantages and disadvantages of local and remoteaccess, see Table 1 on page 2.

One development scenario is to develop by using a remote version of the toolkitand to deploy by using a local version. With this scenario, you have the fastestdevelopment experience and can control the version of the Dojo toolkit because itis hosted on your server when you deploy.

© Copyright IBM Corporation 2009 1

Page 6: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Table 1. Considerations for accessing the Dojo Toolkit locally or remotely

Local Remote

Flexibility

v You do not need the Internet to access tothe toolkit.

v You control where the toolkit is accessedfrom.

v You can develop new Dojo widgets anddebug the JavaScript.

Performance

v Performance is better because the browsercaches more resources.

v The integrated development environment(IDE) is faster because there are fewerthings in your workspace.

v You deploy your own application only,and you do not have to deploy the DojoToolkit files.

Slower deployment

v When you deploy your application, IBM®

Rational® EGL Community Edition mustcopy the Dojo Toolkit files to your Webserver.

v You must serve up the Dojo files fromyour server; this action might lead toextra bandwidth.

v The startup time for your applicationmight be slower because of browsercaching and performance characteristics.

Dependency on third parties

v You must be connected to the Internet. Ifyou do not have a fast speed connection,the first run can be slow.

v Hosted servers usually implement usagetracking, which you might want to avoid.

v You must rely on a third party tomaintain the integrity of the Dojo Toolkitlibraries.

Related concepts

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

“Loading the Dojo Toolkit into your local environment”“Defining the connection to use the Dojo Toolkit remotely” on page 3Related reference

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

Loading the Dojo Toolkit into your local environmentTo use the Dojo Toolkit locally, you must first load the toolkit into your localworkspace. The name of the local toolkit iscom.ibm.egl.rui.dojo.runtime.local_1.4. The EGL Dojo Toolkit is available onthe EG 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. Selectthe projects that you want to import and click Finish.

2. Update the EGL build path to specify the Rich UI project dependency. Rightclick your project and click Properties → EGL Build Path. On the Projects tab,select com.ibm.egl.rui.dojo.runtime.local_1.4. Click OK.Related concepts

“Preparation for using the EGL Dojo widgets” on page 1Related tasks

“Defining the connection to use the Dojo Toolkit remotely” on page 3Related reference

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

2 Developing with Dojo widgets

Page 7: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Defining the connection to use the Dojo Toolkit remotelyTo use a remote version of the Dojo Toolkit, you need a provider connectionproject in your workspace. You can import either of two provider connectionprojects into your workspace:v To use Google as the provider, import com.ibm.egl.rui.dojo.runtime.googlev 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 toimport and click Finish.

2. Update the EGL build path to specify the connection service that you are usingto access the Dojo Toolkit. Right click your project and click Properties → EGLBuild Path. On the Projects tab, select the provider project to use. Click OK.Related concepts

“Preparation for using the EGL Dojo widgets” on page 1Related tasks

“Loading the Dojo Toolkit into your local environment” on page 2Related reference

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

Themes to use with your applicationThe general look of your application is determined by a theme. Themes provide aconsistent appearance for all Dojo widgets in the application.

You can use three themes: Nihilo, Soria, and Tundra. The following examples showthe look of each theme.

Nihilo

Chapter 1. Developing with the EGL Dojo widgets 3

Page 8: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Soria

Tundra

The examples in this document uses the Tundra theme. To set a theme, use theDojoLib 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 widgetsTo create an application by using the Rich UI Dojo widgets, you must create a RichUI Handler part. You write your code in the Rich UI Handler part.

4 Developing with Dojo widgets

Page 9: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

The com.ibm.egl.rui.dojo.widgets project depends on the com.ibm.egl.ruiproject, which is created by default when you create a Rich UI project. Before youimport 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 UIHandler 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 applicationby using the Rich UI editor. The following example shows a simple applicationthat 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

Page 10: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

6 Developing with Dojo widgets

Page 11: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Chapter 2. Dojo widget library

The EGL Dojo widgets represent a set of commonly used widgets that extend theRich UI widget library. The EGL Dojo widgets are located in thecom.ibm.egl.rui.dojo.widgets project. To load the EGL Dojo widgets into yourenvironment import the com.ibm.egl.rui.dojo.widgets project available in theproject 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 1Related reference

“DojoAccordionContainer” on page 8“DojoContentPane” on page 8“DojoBarGraph” on page 8“DojoBubbleChart” on page 9“BubbleChartData” on page 9“DojoButton” on page 10“DojoCalendar” on page 10“DojoCheckbox” on page 10“DojoColorPalette” on page 11“DojoComboBox” on page 11“DojoContentPane” on page 8“DojoContextMenu” on page 11“DojoCurrencyTextBox” on page 12“DojoDateTextBox” on page 12“DojoDialog” 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“DojoTooltip” on page 21“DojoTooltipDialog” on page 21“DojoTree” on page 22“DojoTreeNode” on page 22

7

Page 12: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

DojoAccordionContainerThe DojoAccordionContainer widget contains a set of panes in one pane of theuser interface. When an action is taken for an individual interface, another pane inthe interface is displayed. Each pane is defined by using the DojoContentPanewidget.

Properties

durationThe amount of time for the content pane to open after it is selected. Thevalue is in milliseconds.

selectionSpecifies 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 1Related reference

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

DojoContentPaneThe DojoContentPane defines the content of a tab pane. You must use this widgetwith either the DojoAccordionContainer or DojoTabContainer widgets.

Properties

childrenSpecifies the contents on the tab pane, such as an EGL box widget

closableIndicates whether the tab can be closed. Valid values are true and false.

selectedIndicates the tab that is initially active when the page is displayed. Validvalues are true and false. If true is specified for multiple tabs, the last tabwith selected=true is displayed.

title The name that is displayed on the tabRelated concepts

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

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

DojoBarGraphThe DojoBarGraph widget creates bar graphs. Use this widget to create vertical orhorizontal bar graphs.

8 Developing with Dojo widgets

Page 13: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Properties

barGapThe 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 arrayformat.

height The total height of the graph

themeColorThe color of the graph. You can use blue, red, cyan, green, orange, andpurple. The default value is blue.

verticalIndicates whether the bars are vertical or horizontal. The default value istrue.

true The bars are vertical.

false The bars are horizontal.

width The total width of the graphRelated concepts

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

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

DojoBubbleChartThe DojoBubbleChart widget creates bubble charts. Use this widget to show therelationship of three different sets of data.

Properties

data Required. The data that the chart represents. Data must be in array format.

themeColorThe background color of the chart

height The total height of the graph, specified in number of pixels. The defaultvalue 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 1Related reference

Chapter 2, “Dojo widget library,” on page 7“BubbleChartData”

BubbleChartDataDefines the data to be contained in a bubble chart.

Chapter 2. Dojo widget library 9

Page 14: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Properties

color The fill color of the bubble

size The size of the bubble

tooltipThe 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 graphRelated concepts

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

Chapter 2, “Dojo widget library,” on page 7“DojoBubbleChart” on page 9

DojoButtonThe DojoButton widget creates a button that invokes a function in response to auser's click.

Properties

text The text label for the button.

width The width of the button.

Events

onClickSpecifies an event that is to occur when the button is pressed

Relate concepts

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

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

DojoCalendarThe DojoCalendar widget creates a calendar widget.

Properties

value Defines the month and highlights the day for the calendar that isdisplayed.

Related concepts

Chapter 1, “Developing with the EGL Dojo widgets,” on page 1“Preparation for using the EGL Dojo widgets” on page 1Related reference

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

DojoCheckboxThe DojoCheckbox widget creates check boxes.

10 Developing with Dojo widgets

Page 15: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Properties

selectedIndicates that the check box can be selected. Valid values are true andfalse.

text The text label for the check box

Events

onChangeSpecifies an event that is to occur when the button is pressed. This event isa Rich UI event.

Related concepts

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

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

DojoColorPaletteThe 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 selectedRelated concepts

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

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

DojoComboBoxThe DojoComboBox widget creates combination boxes.

Properties

pageSizeThe number of items to be displayed at one time in the box

value The default value

values The list of valuesRelated concepts

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

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

DojoContextMenuYou can use the DojoContextMenu widget to create a context menu that is invokedby a right-mouse click.

Chapter 2. Dojo widget library 11

Page 16: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Properties

childrenContains an array of DojoMenuItem records; each record represents achoice on the menu.

text The text label for the menu box

targetsAn array of Box widgets

Related concepts

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

Chapter 2, “Dojo widget library,” on page 7“DojoMenu” on page 16“DojoMenuItem” on page 16

DojoCurrencyTextBoxThe DojoCurrencyTextBox widget creates text input fields that supply numericcurrency values.

Properties

value The value of the input field

currencyThe currency to be used. See ISO-4217 for list of valid currency codes.International Organization for Standardization (ISO) standards are on thefollowing Web site: http://www.iso.org/iso/.

errorMessageThe message that is displayed when the input is not valid

width The size of the currency text boxRelated concepts

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

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

http://www.iso.org/iso/support/currency_codes_list-1.htm

DojoDateTextBoxThe DojoDateTextBox widget creates a date input field.

Properties

errorMessageThe message that is displayed when the input is not valid

formatLengthThe format of the displayed data; for example, Monday, March 16, 2009versus 2009/03/16 versus 03/09. The length of the date might be restrictedby region and available storage. Specify a value of short, medium, long,and full.

value The value of the entered date

12 Developing with Dojo widgets

Page 17: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Functions

setValue

clear Clear the current value.Related concepts

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

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

DojoDialogThe DojoDialog widget creates a pop-up dialog box.

Properties

title The title that is displayed on the top of the dialog box

childrenContains the code that defines the content that is in the dialog box. Thebox can contain anything that can be included in the Box widget; forexample, HTML or a DateBox widget.

draggableSpecifies whether the dialog box can be dragged. Valid values are true andfalse.

closableSpecifies whether the dialog box can be closed. Valid values are true andfalse.

Functions

showDialogOpens the dialog box. You can close the box by clicking the x on the righttop corner, or by pressing the Esc key.

hideDialogHides the dialog box

Related concepts

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

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

DojoEditorThe DojoEditor widget creates text box with editing function.

Properties

editorHeightThe height of the editor. Specify the value as an integer.

editorWidthThe width of the editor. Specify the value as an integer.

Chapter 2. Dojo widget library 13

Page 18: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Functions

getContentsGrab the HTML contents of the editor.

setContentsSet 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 1Related reference

“DojoContentPane” on page 8Chapter 2, “Dojo widget library,” on page 7

DojoGridThe DojoGrid widget displays data in a table.

Properties

behaviorsDefines the function that is invoked for each cell

columnsDefines the columns in the table

data An array of records that contains information to put into the table. Specifyas data=(array_name as any[]), where array_name is the name of the array.

headerBehaviorsDefines the function that is invoked for each header cell

Events

onGridRowClickThe action to occur when the row is selected

Functions

addRowAdds a row to the table

removeRowRemoves a row from the table

Related concepts

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

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

DojoHorizonalSliderThe DojoHorizonalSlider widget creates a horizontal ruler.

Properties

maximumThe maximum value of the ruler

14 Developing with Dojo widgets

Page 19: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

minimumThe minimum value of the ruler

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

showLabelsIndicates whether to show the labels of the minimum, maximum, and stepsvalues. Valid values are true and false.

value The current value for the ruler

width The size of the ruler in pixelsRelated concepts

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

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

DojoLineGraphThe 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 thegraph. Defaults to 0.

showMarkersDefines whether a marker (point) is shown on the line for the data that isbeing 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 beinggraphed.

showShadowsDefines if a shadow for the graph line is shown. Valid values are true andfalse.

true Graph shadow is shown.

false Graph shadow is not shown.

tensionSets the curvature of the graph

themeColorThe color of the graph. The color can be blue, red, cyan, green, orange, orpurple.

Chapter 2. Dojo widget library 15

Page 20: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

width The width of the graph in pixelsRelated concepts

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

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

DojoMenuUse the DojoMenu widget with one or more DojoMenuItem widgets to createmenu items. To create complex menus, you can nest the DojoMenu andDojoMenuItem widgets.

Properties

childrenAn array of records that contains information to put into the menu. Specifyas children=(array_name as any[]), where array_name is the name of thearray.

text The text label for the menu box

Events

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

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

Properties

disabledIndicates whether the menu item is disabled. If a menu item is disabled, itis gray. Valid values are true and false.

iconClassSpecifies the CSS style class for the icon that is associated with the menuitem

text The text of the item within the menu listRelated 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

Page 21: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

DojoPieChartUse the DojoPieChart widget with one or more PieChartData records to create piecharts.

Properties

data The name of the PieChartData record that contains the data for the piechart

fontColorThe color of the pie chart. It can be blue, red, cyan, green, orange, orpurple.

height The height of the pie chart, in pixels

labelOffSetThe offset of the labels from the center. For a radius of 100, a value ofvalue 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 pixelsRelated concepts

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

Related references

Chapter 2, “Dojo widget library,” on page 7“PieChartData”

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

Properties

color The color that is associated with the section of the chart that you aredefining

fontColorThe 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 datarecord 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”

DojoProgressBarThe DojoProgressBar widget displays progress bars.

Chapter 2. Dojo widget library 17

Page 22: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Properties

maximumThe maximum value of the progress

progressThe current progress

width The width of the progress barRelated concepts

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

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

DojoRadioGroupUse the DojoRadioGroup widget to define radio buttons.

Properties

optionsThe text label for the button

selectedSpecifies whether the radio button can be selected. Valid values are trueand false.

verticalSpecifies whether the list of buttons is horizontal or vertical. Valid valuesare true and false.

Related concepts

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

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

DojoStackContainerThe DojoStackContainer widget creates a container that has multiple children. Onlyone child is displayed at a time.

Properties

height The total height of the container

width The total width of the container

controllerThe controller for the stack.

selectionThe index of the currently selected stack.

Events

onStackSelectedNotify users when the specified stack is selected.

18 Developing with Dojo widgets

Page 23: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Functions

nextStackMove to the next stack.

prevousStackMove to the previous stack.

Related concepts

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

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

DojoTabContainerThe DojoTabContainer widget creates tab folders.

Properties

childrenAn array of DojoContentPane widgets that represent the tabs

height The height of the tab folder, in pixels

selectionReturns the index of the currently selected tab

tabPositionThe position of the tab locations. Valid values are top, left, bottom, andright.

width The width of the tab folder, in pixels

Events

onTabSelectedThe event that occurs when the tab is selected

Functions

showTabDisplays the specified tab

Related concepts

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

Chapter 2, “Dojo widget library,” on page 7“DojoContentPane” on page 8

DojoTimeTextBoxThe DojoTimeTextBox creates a time input field.

Properties

clickableIncrementThe increment that is shown on the time selection menu. Increments rangefrom 5 minutes to a full day. The default value is 15 minutes. For example:

TIMEBOX_ONE_QUARTERThe increment is 15 minutes.

Chapter 2. Dojo widget library 19

Page 24: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

TIMEBOX_HALF_HOURThe increment is 30 minutes.

TIMEBOX_FULL_DAYThe increment is 24 hours.

errorMessageThe message that is displayed when the input is not valid

timePatternThe expected format pattern for the time to be entered

TIMEBOX_FORMAT_12HRThe time format is between 12:00 - 11:59 AM and 12:00-11:59 PM.

TIMEBOX_FORMAT_24HRThe time format is 0 - 24.

value The value of the time that is selected

visibleIncrementThe increment in which the time is displayed in the time selection menu.The difference between the times that are displayed and what is shownwhen someone clicks the input field.

visibleRangeThe range of the times to be displayed in the time selection menu at onetime. To view additional times, use the scroll bar.

Related concepts

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

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

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

Properties

childrenThe box in the pane that contains information about the pane

durationThe number of milliseconds that an animation runs

isOpenControls whether the area is expanded or open by default

title The title for the pane

width The width of the title pane

Functions

setContentSpecifies the pane that is to be displayed

setTitleSpecifies the title of the pane

toggle Opens and closes the paneRelated concepts

20 Developing with Dojo widgets

Page 25: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

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

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

DojoToggleButtonThe DojoStackContainer widget contains a xxxx

Properties

durationThe amount of time for the content pane to open after it is selected. Thevalue is in milliseconds.

selectionSpecifies the pane that initially opens

width The total width of the container

height The total height of the containerRelated concepts

Chapter 1, “Developing with the EGL Dojo widgets,” on page 1“Preparation for using the EGL Dojo widgets” on page 1Related reference

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

DojoTooltipThe DojoTooltip widget is used to create a pop-up window containing information.The DojoTooltip can be used with any element that uses the ID property.

Properties

contentsThe text that is displayed in the tooltip.

target The ID of the element that the tooltip is to be attached.

defaultPositionThe preferred location for the tooltip to display.

delay The amount of time before the tooltip is displayed.Related concepts

Chapter 1, “Developing with the EGL Dojo widgets,” on page 1“Preparation for using the EGL Dojo widgets” on page 1Related reference

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

DojoTooltipDialogThe DojoTooltipDialog widget creates a tooltip containing a dialog.

Properties

childrenthe contents of the dialog to show.

text The text label for the button.

Chapter 2. Dojo widget library 21

Page 26: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Functions

hide Hides the dialog.Related concepts

Chapter 1, “Developing with the EGL Dojo widgets,” on page 1“Preparation for using the EGL Dojo widgets” on page 1Related reference

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

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

Properties

childrenIdentifies the nodes that compose a tree. Points to an array ofDojoTreeNode records that define the tree nodes.

text The name of a top-level root node

Events

onClickSpecifies an event that is to occur when the tree node is clicked

Functions

addTreeNodeAdds a tree node to the tree

removeTreeNodeRemoves a tree node from the tree

updateTreeNodeChanges a tree node in the tree

Related concepts

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

Chapter 2, “Dojo widget library,” on page 7“DojoTreeNode”

DojoTreeNodeThe DojoTreeNode record creates the elements that compose a tree.

Properties

childrenDefine 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 nodeRelated concepts

22 Developing with Dojo widgets

Page 27: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

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

Chapter 2, “Dojo widget library,” on page 7“DojoTree” on page 22

Chapter 2. Dojo widget library 23

Page 28: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

24 Developing with Dojo widgets

Page 29: Developing with Dojo widgets - IBM€¦ · Chapter 1, “Developing with the EGL Dojo widgets,” on page 1 Coding an application by using Dojo widgets To create an application by

Index

Aapplications

Dojo widgets 5

BBubbleChartData

Dojo 10

Ddojo

widgetsDojoLineGraph 15DojoTimeTextBox 19

Dojowidgets

BubbleChartData 10coding 5ContextMenu 12DojoAccordionContainer 8DojoBarGraph 9DojoBubbleChart 9DojoButton 10DojoCalendar 10DojoCheckbox 11DojoColorPalette 11DojoComboBox 11DojoContentPane 8DojoCurrencyTextBox 12DojoDateTextBox 12DojoDialog 13DojoEditor 13DojoGrid 14DojoHorizonalSlider 14DojoMenu 16DojoMenuItem 16DojoPieChart 17DojoProgressBar 18

Dojo (continued)widgets (continued)

DojoRadioGroup 18DojoStackContainer 18DojoTabContainer 19DojoTitlePane 20DojoToggleButton 21DojoTooltip 21DojoTooltipDialog 21DojoTree 22DojoTreeNode 22library 7local 2overview 1PieChartData 17preparation 1remote 3themes 3

DojoBarGraphDojo 9

DojoBubbleChartDojo 9

DojoButtonDojo 10

DojoCheckboxDojo 11

DojoContentPaneDojo 8

DojoContextMenuDojo 12

DojoCurrencyTextBoxDojo 12

DojoDateTextBoxDojo 12

DojoDialogDojo 13

DojoGridDojo 14

DojoLineGraphDojo 15

DojoMenuDojo 11, 14, 16

DojoMenuItemDojo 16

DojoPieChartDojo 17

DojoProgressBarDojo 18

DojoRadioGroupDojo 18

DojoTabContainerDojo 19

DojoTimeTextBoxDojo 19

DojoTitlePaneDojo 20

Llibrary

Dojo 7

PPieChartData

Dojo 17

Wwidgets

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

25