|
|
(108 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 ==
| |
− | The user of the next example selects a combo entry 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 demonstrates that you can use a grid tooltip to present information that is specific to a cell:
| |
− | <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:
| |
− | <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:
| |
− |
| |
− | <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 ==
| |
− |
| |
− | <source lang="java">
| |
− |
| |
− | </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]]
| |