|
|
| (94 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | When you write a Rich UI application, the typical process is as follows:
| |
| | | | |
| − | *Create a Handler type of stereotype RUIHandler.<br>
| |
| − | *Declare the widgets and customize them; for example, by assigning and coding event handlers. <br>
| |
| − | *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.<br>
| |
| − | *Write initialization code in the on-construction function.<br>
| |
| − |
| |
| − | 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|Display and input]], [[#Layout|Layout]], and [[#Visualization|Visualization]].<br>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | = Display and input =
| |
| − |
| |
| − | == Button ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Button (DojoButton) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | == Calendar (DojoCalendar) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Checkbox ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Checkbox (DojoCheckbox) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == ColorPalette (DojoColorPalette) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Combo ==
| |
| − | A combo box presents one of several selectable options and lets the user temporarily open a dropdown list to select a different option. The user of the next example selects an option and places the selected value in a text field:
| |
| − | <source lang="java">
| |
| − | 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
| |
| − | </source>
| |
| − |
| |
| − | == ComboBox (DojoComboBox) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | == CurrencyTextBox (DojoCurrencyTextBox) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == DataGrid and related types ==
| |
| − |
| |
| − | A Rich UI data grid defines an array of row values in a table.
| |
| − |
| |
| − | The following example shows that you can use a grid tooltip to present information that is specific to a cell:
| |
| − |
| |
| − | [[Image:Datagrid_with_tooltip.jpg]]
| |
| − |
| |
| − | <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) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | == Editor (DojoEditor) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Grid (DojoGrid) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == HorizontalSlider (DojoHorizontalSlider) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == HTML ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Hyperlink ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Image ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | == List ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == ListMulti ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Menu ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Menu (DojoMenu) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == PasswordTextField ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | == ProgressBar (DojoProgressBar) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | == RadioGroup ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | == RadioGroup (DojoRadioGroup) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Shadow ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Span ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TextArea ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TextArea (DojoTextArea) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TextField ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TextField (DojoTextField) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TextLabel ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TimeTextBox (DojoTimeTextBox) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == ToggleButton (DojoToggleButton) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Tooltip (DojoTooltip) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TooltipDialog (DojoTooltipDialog) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Tree (DojoTree) and related types ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | = Layout =
| |
| − |
| |
| − | == AccordionContainer (DojoAccordionContainer) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == BorderContainer (DojoBorderContainer) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Box ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == ContentPane (DojoContentPane) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == ContextMenu (DojoContextMenu) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Dialog (DojoDialog) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == Div, FloatLeft, and FloatRight ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == GridLayout and related types ==
| |
| − |
| |
| − | A grid layout is a container with variably spaced rows and columns.
| |
| − |
| |
| − | The following example shows how to replace the content of a cell at run time:
| |
| − |
| |
| − | * Before:
| |
| − |
| |
| − | [[Image:gridlayout_replace_before.jpg]]
| |
| − |
| |
| − | * After:
| |
| − |
| |
| − | [[Image:gridlayout_replace_after.jpg]]
| |
| − |
| |
| − |
| |
| − | <source lang="java">
| |
| − | package client;
| |
| − |
| |
| − | import org.eclipse.edt.rui.widgets.Button;
| |
| − | import org.eclipse.edt.rui.widgets.GridLayout;
| |
| − | import org.eclipse.edt.rui.widgets.GridLayoutData;
| |
| − | import org.eclipse.edt.rui.widgets.TextLabel;
| |
| − | import eglx.ui.rui.Event;
| |
| − | import eglx.ui.rui.RUIHandler;
| |
| − |
| |
| − | handler MyHandler type RUIhandler{initialUI =[myGridLayout]}
| |
| − |
| |
| − | myGridLayout GridLayout{rows = 4, columns = 4, cellPadding = 4, children =[
| |
| − | Button3, Button1, Button2]};
| |
| − |
| |
| − | myLayoutData GridLayoutData{row = 1, column = 2};
| |
| − | button1 Button{layoutData = myLayoutData, text = "Click button1", onClick ::= respond};
| |
| − | button2 Button{layoutData = new GridLayoutData{row = 2, column = 3}, text = "button2"};
| |
| − | button3 Button{layoutData = new GridLayoutData{row = 3, column = 4}, text = "button3"};
| |
| − |
| |
| − | function respond(e Event in)
| |
| − | myLabel TextLabel{text = "Replaced button 2"};
| |
| − | myLabel.layoutData = new GridLayoutData{row = 2, column = 3};
| |
| − | Button2.layoutData = null;
| |
| − | myGridLayout.appendChild(myLabel);
| |
| − | end
| |
| − | end
| |
| − | </source>
| |
| − |
| |
| − | The next example shows the use of spanning and alignment:
| |
| − |
| |
| − | [[Image:gridlayout_spanning.jpg]]
| |
| − |
| |
| − | <source lang="java">
| |
| − | package client;
| |
| − |
| |
| − | import org.eclipse.edt.rui.widgets.Button;
| |
| − | import org.eclipse.edt.rui.widgets.CheckBox;
| |
| − | import org.eclipse.edt.rui.widgets.GridLayout;
| |
| − | import org.eclipse.edt.rui.widgets.GridLayoutData;
| |
| − | import org.eclipse.edt.rui.widgets.GridLayoutLib;
| |
| − | import org.eclipse.edt.rui.widgets.TextField;
| |
| − | import org.eclipse.edt.rui.widgets.TextLabel;
| |
| − | import eglx.persistence.sql.column;
| |
| − | import eglx.ui.rui.RUIHandler;
| |
| − |
| |
| − | handler MyHandler type RUIhandler {initialUI = [ myGridLayout ]}
| |
| − |
| |
| − | myGridLayout GridLayout{
| |
| − | rows = 4, columns = 3, cellPadding = 4,
| |
| − | children = [ myLabel, myTextField, myCheckBox, myButton ]};
| |
| − |
| |
| − | myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1},
| |
| − | text = "Label: " };
| |
| − |
| |
| − | myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2,
| |
| − | horizontalSpan = 2 }, text = "Text field"};
| |
| − |
| |
| − | myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2,
| |
| − | verticalSpan = 2 }, text="Check box" };
| |
| − |
| |
| − | myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
| |
| − | horizontalSpan = 2,
| |
| − | horizontalAlignment = GridLayoutLib.Align_Center },
| |
| − | text="Button" };
| |
| − | end
| |
| − | </source>
| |
| − |
| |
| − | == Grouping ==
| |
| − |
| |
| − | A grouping is a rectangle that embeds one or more widgets and that displays text in the topmost border. Here is an example:
| |
| − |
| |
| − | [[Image:Grouping_yellow.jpg]]
| |
| − |
| |
| − | <source lang="java">
| |
| − | package client;
| |
| − |
| |
| − | import org.eclipse.edt.rui.widgets.CheckBox;
| |
| − | import org.eclipse.edt.rui.widgets.Grouping;
| |
| − |
| |
| − | handler MyHandler type RUIHandler{initialUI =[myGrouping]}
| |
| − | myCheckbox Checkbox{};
| |
| − | myGrouping Grouping {
| |
| − | text = "Yellow!",
| |
| − | backgroundColor = "yellow",
| |
| − | width = 100,
| |
| − | children = [myCheckbox]};
| |
| − | end
| |
| − | </source>
| |
| − |
| |
| − | == StackContainer (DojoStackContainer) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TabContainer (DojoTabContainer) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == TitlePane (DojoTitlePane) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | = Visualization =
| |
| − |
| |
| − |
| |
| − | == BarGraph (DojoBarGraph) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == BubbleChart (DojoBubbleChart) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == LineGraph (DojoLineGraph) ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | == PieChart (DojoPieChart) and related types ==
| |
| − |
| |
| − | <source lang="java">
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | <br> <br><br> ♦ [[EDT:Code snippets|Code snippets main page]] <br>
| |
| − |
| |
| − | [[Category:EDT]]
| |
