Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "EDT:Declaring widgets"
(→Combo) |
(→DataGrid and related types) |
||
Line 99: | Line 99: | ||
<source lang="java"> | <source lang="java"> | ||
− | + | package client; | |
+ | import org.eclipse.edt.rui.widgets.Box; | ||
+ | import org.eclipse.edt.rui.widgets.DataGrid; | ||
+ | import org.eclipse.edt.rui.widgets.DataGridColumn; | ||
+ | import org.eclipse.edt.rui.widgets.DataGridTooltip; | ||
+ | import org.eclipse.edt.rui.widgets.TextArea; | ||
+ | import eglx.ui.rui.RUIHandler; | ||
+ | |||
+ | Record Stock | ||
+ | Symbol STRING; | ||
+ | Quote DECIMAL(5,2); | ||
+ | NumShares INT; | ||
+ | end | ||
+ | |||
+ | handler MyHandler type RUIhandler { initialUI = [ grid ], | ||
+ | onConstructionFunction = start } | ||
+ | stockList Stock[] = [ | ||
+ | new Stock{Symbol = "Company1", Quote = 100.00, NumShares = 40 }, | ||
+ | new Stock{Symbol = "Company2", Quote = 200.00, NumShares = 10 }, | ||
+ | new Stock{Symbol = "Company3", Quote = 100.00, NumShares = 40 } ]; | ||
+ | |||
+ | grid DataGrid { | ||
+ | data = stockList as any[], | ||
+ | behaviors = [myDataGridToolTip.setToolTips], | ||
+ | pageSize = 15, | ||
+ | columns = [ | ||
+ | new DataGridColumn { name = "Symbol", displayName = "Symbol Display"}, | ||
+ | new DataGridColumn { name = "Quote", displayName = "Quote Display"}, | ||
+ | new DataGridColumn { name = "NumShares", displayName = "NumShares Display" }]}; | ||
+ | |||
+ | myDataGridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 }; | ||
+ | |||
+ | tooltipBox Box{columns=1, width=475}; | ||
+ | |||
+ | function start() | ||
+ | |||
+ | end | ||
+ | |||
+ | function tooltipText (rowData any in, fieldName String in, td Widget in) returns (Box) | ||
+ | |||
+ | tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 }; | ||
+ | tooltipBox.children = [ tooltipArea ]; | ||
+ | tooltipArea.text = | ||
+ | "In function tooltipText (a tooltip provider):" + | ||
+ | "\n o fieldName is the column name ('"+fieldName+"')." + | ||
+ | "\nYou can access cell content:" + | ||
+ | "\n o td.innerText is '"+td.innerText+"'." + | ||
+ | "\n o rowData["+fieldName+"] is '"+rowData[fieldName] + "'."; | ||
+ | return (tooltipBox); | ||
+ | end | ||
+ | end | ||
+ | </source> | ||
== DateTextBox (DojoDateTextBox) == | == DateTextBox (DojoDateTextBox) == |
Revision as of 15:14, 14 February 2012
When you write a Rich UI application, the typical process is as follows:
- Create a Handler type of stereotype RUIHandler.
- Declare the widgets and customize them; for example, by assigning and coding event handlers.
- Display a given widget by including it either in the initialUI array of the Rich UI handler or in the children array of another widget.
- Write initialization code in the on-construction function.
The following sections give examples of widget use and are in the same order as the sections of the Rich UI palette: Display and input, Layout, and Visualization.
Contents
- 1 Display and input
- 1.1 Button
- 1.2 Button (DojoButton)
- 1.3 Calendar (DojoCalendar)
- 1.4 Checkbox
- 1.5 Checkbox (DojoCheckbox)
- 1.6 ColorPalette (DojoColorPalette)
- 1.7 Combo
- 1.8 ComboBox (DojoComboBox)
- 1.9 CurrencyTextBox (DojoCurrencyTextBox)
- 1.10 DataGrid and related types
- 1.11 DateTextBox (DojoDateTextBox)
- 1.12 Editor (DojoEditor)
- 1.13 Grid (DojoGrid)
- 1.14 HorizontalSlider (DojoHorizontalSlider)
- 1.15 HTML
- 1.16 Hyperlink
- 1.17 Image
- 1.18 List
- 1.19 ListMulti
- 1.20 Menu
- 1.21 Menu (DojoMenu)
- 1.22 PasswordTextField
- 1.23 ProgressBar (DojoProgressBar)
- 1.24 RadioGroup
- 1.25 RadioGroup (DojoRadioGroup)
- 1.26 Shadow
- 1.27 Span
- 1.28 TextArea
- 1.29 TextArea (DojoTextArea)
- 1.30 TextField
- 1.31 TextField (DojoTextField)
- 1.32 TextLabel
- 1.33 TimeTextBox (DojoTimeTextBox)
- 1.34 ToggleButton (DojoToggleButton)
- 1.35 Tooltip (DojoTooltip)
- 1.36 TooltipDialog (DojoTooltipDialog)
- 1.37 Tree (DojoTree) and related types
- 2 Layout
- 2.1 AccordionContainer (DojoAccordionContainer)
- 2.2 BorderContainer (DojoBorderContainer)
- 2.3 Box
- 2.4 ContentPane (DojoContentPane)
- 2.5 ContextMenu (DojoContextMenu)
- 2.6 Dialog (DojoDialog)
- 2.7 Div, FloatLeft, and FloatRight
- 2.8 GridLayout and related types
- 2.9 Grouping
- 2.10 StackContainer (DojoStackContainer)
- 2.11 TabContainer (DojoTabContainer)
- 2.12 TitlePane (DojoTitlePane)
- 3 Visualization
Display and input
Button
Button (DojoButton)
Calendar (DojoCalendar)
Checkbox
Checkbox (DojoCheckbox)
ColorPalette (DojoColorPalette)
Combo
The user of the next example selects a combo entry and places the selected value in a text field:
package client; import org.eclipse.edt.rui.widgets.Box; import org.eclipse.edt.rui.widgets.Combo; import org.eclipse.edt.rui.widgets.TextField; import eglx.ui.rui.Event; import eglx.ui.rui.RUIHandler; Handler MyHandler Type RUIHandler { initialUI = [myBox] } myBox Box{columns=2, children= [myCombo, myTextField]}; myCombo Combo { values = ["one", "two", "three", "four"], selection = 2, onChange ::= changeFunction }; myTextField TextField {text = myCombo.values[myCombo.selection]}; Function changeFunction(e Event IN) myTextField.text = myCombo.values[myCombo.selection]; end end
ComboBox (DojoComboBox)
CurrencyTextBox (DojoCurrencyTextBox)
package client; import org.eclipse.edt.rui.widgets.Box; import org.eclipse.edt.rui.widgets.DataGrid; import org.eclipse.edt.rui.widgets.DataGridColumn; import org.eclipse.edt.rui.widgets.DataGridTooltip; import org.eclipse.edt.rui.widgets.TextArea; import eglx.ui.rui.RUIHandler; Record Stock Symbol STRING; Quote DECIMAL(5,2); NumShares INT; end handler MyHandler type RUIhandler { initialUI = [ grid ], onConstructionFunction = start } stockList Stock[] = [ new Stock{Symbol = "Company1", Quote = 100.00, NumShares = 40 }, new Stock{Symbol = "Company2", Quote = 200.00, NumShares = 10 }, new Stock{Symbol = "Company3", Quote = 100.00, NumShares = 40 } ]; grid DataGrid { data = stockList as any[], behaviors = [myDataGridToolTip.setToolTips], pageSize = 15, columns = [ new DataGridColumn { name = "Symbol", displayName = "Symbol Display"}, new DataGridColumn { name = "Quote", displayName = "Quote Display"}, new DataGridColumn { name = "NumShares", displayName = "NumShares Display" }]}; myDataGridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 }; tooltipBox Box{columns=1, width=475}; function start() end function tooltipText (rowData any in, fieldName String in, td Widget in) returns (Box) tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 }; tooltipBox.children = [ tooltipArea ]; tooltipArea.text = "In function tooltipText (a tooltip provider):" + "\n o fieldName is the column name ('"+fieldName+"')." + "\nYou can access cell content:" + "\n o td.innerText is '"+td.innerText+"'." + "\n o rowData["+fieldName+"] is '"+rowData[fieldName] + "'."; return (tooltipBox); end end
DateTextBox (DojoDateTextBox)
Editor (DojoEditor)
Grid (DojoGrid)
HorizontalSlider (DojoHorizontalSlider)
HTML
Hyperlink
Image
List
ListMulti
Menu
Menu (DojoMenu)
PasswordTextField
ProgressBar (DojoProgressBar)
RadioGroup
RadioGroup (DojoRadioGroup)
Shadow
Span
TextArea
TextArea (DojoTextArea)
TextField
TextField (DojoTextField)
TextLabel
TimeTextBox (DojoTimeTextBox)
ToggleButton (DojoToggleButton)
Tooltip (DojoTooltip)
TooltipDialog (DojoTooltipDialog)
Layout
AccordionContainer (DojoAccordionContainer)
BorderContainer (DojoBorderContainer)
Box
ContentPane (DojoContentPane)
ContextMenu (DojoContextMenu)
Dialog (DojoDialog)
Div, FloatLeft, and FloatRight
Grouping
StackContainer (DojoStackContainer)
TabContainer (DojoTabContainer)
TitlePane (DojoTitlePane)