Revision as of 15:18, 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.

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)

DataGrid and related types

A Rich UI dataGrid widget defines an array of row values in a table. The following example demonstrates that you can use a tooltip to present information that is specific to a cell:

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 (DojoMenu)

PasswordTextField

ProgressBar (DojoProgressBar)

RadioGroup

RadioGroup (DojoRadioGroup)

Shadow

Span

TextArea

TextArea (DojoTextArea)

TextField

TextField (DojoTextField)

TextLabel

TimeTextBox (DojoTimeTextBox)

ToggleButton (DojoToggleButton)

Tooltip (DojoTooltip)

TooltipDialog (DojoTooltipDialog)

Tree (DojoTree) and related types

Layout

AccordionContainer (DojoAccordionContainer)

BorderContainer (DojoBorderContainer)

Box

ContentPane (DojoContentPane)

ContextMenu (DojoContextMenu)

Dialog (DojoDialog)

Div, FloatLeft, and FloatRight

GridLayout and related types

Grouping

StackContainer (DojoStackContainer)

TabContainer (DojoTabContainer)

TitlePane (DojoTitlePane)

Visualization

BarGraph (DojoBarGraph)

BubbleChart (DojoBubbleChart)

LineGraph (DojoLineGraph)

PieChart (DojoPieChart) and related types

♦ Code snippets main page

@@ Line 97: / Line 97: @@
 == DataGrid and related types  ==
+A Rich UI dataGrid widget defines an array of row values in a table. The following example demonstrates that you can use a tooltip to present information that is specific to a cell:
 <source lang="java">

Breadcrumbs

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"