egl_dojo_widgets_0711
TRANSCRIPT
Developing with Dojo widgets
���
ii Developing with Dojo widgets
Contents
Chapter 1. Developing with the EGLDojo widgets . . . . . . . . . . . . 1Migrating from EGL Dojo version 0.6.0 to version0.7.1.1. . . . . . . . . . . . . . . . . 2Preparation for using the EGL Dojo widgets . . . . 2Themes to use with your application . . . . . . 3Coding an application by using Dojo widgets . . . 5
Chapter 2. Dojo widget library . . . . . 7DojoAccordionContainer . . . . . . . . . . 7
DojoContentPane . . . . . . . . . . . . 8DojoBarGraph . . . . . . . . . . . . . . 9DojoBubbleChart . . . . . . . . . . . . . 9
BubbleChartData . . . . . . . . . . . 10DojoButton . . . . . . . . . . . . . . 10DojoCheckbox . . . . . . . . . . . . . 11DojoColorPalette. . . . . . . . . . . . . 11DojoComboBox . . . . . . . . . . . . . 11DojoContextMenu . . . . . . . . . . . . 12
DojoCurrencyTextBox . . . . . . . . . . . 12DojoDateTextBox . . . . . . . . . . . . 13DojoDialog . . . . . . . . . . . . . . 13DojoGrid . . . . . . . . . . . . . . . 14DojoHorizonalSlider . . . . . . . . . . . 15DojoLineGraph . . . . . . . . . . . . . 16DojoMenu . . . . . . . . . . . . . . . 17
DojoMenuItem . . . . . . . . . . . . 17DojoPieChart . . . . . . . . . . . . . . 18
PieChartData . . . . . . . . . . . . . 19DojoProgressBar . . . . . . . . . . . . . 19DojoRadioGroup . . . . . . . . . . . . 20DojoTabContainer . . . . . . . . . . . . 20DojoTimeTextBox . . . . . . . . . . . . 21DojoTitlePane. . . . . . . . . . . . . . 21DojoTree . . . . . . . . . . . . . . . 22
DojoTreeNode . . . . . . . . . . . . 23
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 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 widgets represent a set of commonly used widgets thatextend the Rich UI widget library.
The package contents
The EGL Rich UI Dojo widget download file is located on EGL Café. To use thisversion of the EGL Rich UI Dojo widgets, you must have Rational BusinessDeveloper, 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.1Contains the IBM Dojo Toolkit version 1.3.2. This project ensuresdevelopment of EGL Dojo applications can occur without the need for aninternet connection.
com.ibm.egl.rui.dojo.runtime.aol_1.3.2.1Contains connection information to use AOL for remote accessing of theDojo Toolkit during runtime.
com.ibm.egl.rui.dojo.runtime.google_1.3.2.1Contains connection information to use Google for remote accessing of theDojo Toolkit during runtime.
com.ibm.egl.rui.dojo.widgets_0.7.1.1Contains the EGL Dojo widget code
com.ibm.egl.rui.dojo.samples_0.7.1.1Contains sample Rich UI handlers for each Dojo widget that you can useto 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 dependson the com.ibm.egl.rui_1.0.2 project, which is created automatically when a newRich UI project is created.
3. Import the project interchange file into your workspace. For information aboutimporting into your workspace, see “Preparation for using the EGL Dojowidgets” 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 ofthe Dojo Toolkit (local, Google, or AOL).
© Copyright IBM Corporation 2009 1
Right click your project and click Properties → EGL Build Path. On the Projectstab, select the local Dojo Toolkit or the Dojo Toolkit provider connection projectthat you want to use. Click OK.
5. (Optional) In the Rich UI handler, set the theme for your application. There areseveral supplied themes that you can use. For information about availablethemes, see “Themes to use with your application” on page 3. The defaulttheme 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 thedefault 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 3Related tasks
“Coding an application by using Dojo widgets” on page 5Related reference
Chapter 2, “Dojo widget library,” on page 7
Migrating from EGL Dojo version 0.6.0 to version 0.7.1.1The current ELG Dojo widget version 0.7.1.1 release contains significant changesfrom version 0.6.0.
The current EGL Dojo widgets version 0.7.1.1 are for Rational Business Developerversion 7.5.1.4. Any existing EGL applications using the version 0.6.0 widgets mayrequire a change. That said, the current API has been firmly defined and will notexperience significant changes in future releases.
Related concepts
Chapter 1, “Developing with the EGL Dojo widgets,” on page 1Related 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 use
2 Developing with Dojo widgets
the 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.
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.
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,Rational Business Developer must copythe Dojo Toolkit files to your Web server.
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 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. 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 theDojoLib 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 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.
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 ]}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 theRich 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 1Related 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
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.
7
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 2Related reference
“DojoContentPane”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 tab
Example
The following example shows the code and outcome for the DojoTabContainer andDojoContentPane 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 1Related references
8 Developing with Dojo widgets
“DojoTabContainer” on page 20Chapter 2, “Dojo widget library,” on page 7
DojoBarGraphThe DojoBarGraph widget creates bar graphs. Use this widget to create vertical orhorizontal bar graphs.
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 graph
Example
The following example shows the code and output for a bar graph that containsfour 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 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.
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 1Related reference
Chapter 2, “Dojo widget library,” on page 7“BubbleChartData”
BubbleChartDataDefines the data to be contained in a bubble chart.
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
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 1Related reference
Chapter 2, “Dojo widget library,” on page 7
DojoCheckboxThe DojoCheckbox widget creates check boxes.
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.
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 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.
Chapter 2. Dojo widget library 11
Properties
pageSizeThe 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 thatcontains three items.ComboBox DojoComboBox{values=["Dogs","Cats","Birds"],value="Cats"};
Related 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.
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 17“DojoMenuItem” on page 17
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/.
12 Developing with Dojo widgets
errorMessageThe 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 DojoCurrencyTextBoxwidget.textField DojoCurrencyTextBox{ value="$100.00",currency="USD"};
Related 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
Functions
setValue
Example
The following example shows the code and output for the DojoDateTextBoxwidget.dateBox DojoDateTextBox{errorMessage="The format of the date is incorrect.",
formatLength="long"};
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.
Chapter 2. Dojo widget library 13
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
Example
The following example shows the code and output for the DojoDialog widget. Theexample 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 1Related reference
Chapter 2, “Dojo widget library,” on page 7
DojoGridThe DojoGrid widget displays data in a table.
14 Developing with Dojo widgets
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
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 1Related reference
Chapter 2, “Dojo widget library,” on page 7
DojoHorizonalSliderThe DojoHorizonalSlider widget creates a horizontal ruler.
Properties
maximumThe maximum value of the ruler
minimumThe minimum value of the ruler
Chapter 2. Dojo widget library 15
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 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 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
16 Developing with Dojo widgets
themeColorThe color of the graph. The color can be blue, red, cyan, green, orange, orpurple.
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 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.
Chapter 2. Dojo widget library 17
iconClassSpecifies the CSS style class for the icon that is associated with the menuitem
text The text of the item within the menu list
Example
The following example shows the code and output for a menu item that containsthree 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
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” on page 19
18 Developing with Dojo widgets
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.
Example
The following example shows the code and output for a pie chart that containsfour 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
DojoProgressBarThe DojoProgressBar widget displays progress bars.
Properties
maximumThe maximum value of the progress
progressThe 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 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.
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 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
20 Developing with Dojo widgets
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.
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.
Chapter 2. Dojo widget library 21
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
Chapter 1, “Developing with 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” on page 23
22 Developing with Dojo widgets
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 node
Example
The following example shows the code and output for a tree diagram that containstwo nodes: North America and Europe. The nodes are defined by the TreeNoderecord, 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 1Related 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
Aapplications
Dojo widgets 5
BBubbleChartData
Dojo 10
Ddojo
widgetsDojoLineGraph 16DojoTimeTextBox 21
Dojowidgets
BubbleChartData 10coding 5ContextMenu 12DojoAccordionContainer 8DojoBarGraph 9DojoBubbleChart 9DojoButton 10DojoCheckbox 11DojoColorPalette 11DojoComboBox 12DojoContentPane 8DojoCurrencyTextBox 12DojoDateTextBox 13DojoDialog 14DojoGrid 15DojoHorizonalSlider 15DojoMenu 17DojoMenuItem 17DojoPieChart 18
Dojo (continued)widgets (continued)
DojoProgressBar 19DojoRadioGroup 20DojoTabContainer 20DojoTitlePane 22DojoTree 22DojoTreeNode 23library 7migration 2overview 1PieChartData 19preparation 2themes 3
DojoBarGraphDojo 9
DojoBubbleChartDojo 9
DojoButtonDojo 10
DojoCheckboxDojo 11
DojoContentPaneDojo 8
DojoContextMenuDojo 12
DojoCurrencyTextBoxDojo 12
DojoDateTextBoxDojo 13
DojoDialogDojo 14
DojoGridDojo 15
DojoLineGraphDojo 16
DojoMenuDojo 11, 12, 15, 17
DojoMenuItemDojo 17
DojoPieChartDojo 18
DojoProgressBarDojo 19
DojoRadioGroupDojo 20
DojoTabContainerDojo 20
DojoTimeTextBoxDojo 21
DojoTitlePaneDojo 22
Llibrary
Dojo 7
PPieChartData
Dojo 19
Wwidgets
Dojo 8coding 5migration 2overview 1preparation 2themes 3
25