EDT:Declaring widgets

The next sections outline a way to develop a Rich UI application. The IDE helps you to do the tasks quickly.

For background information, see Web technology for EGL Rich UI; in particular, the sections on the DOM tree.

Create a Handler type of stereotype RUIHandler

package client;
 
import org.eclipse.edt.rui.widgets.GridLayout;
 
handler MyHandler type RUIhandler{initialUI =[ui
            ], onConstructionFunction = start, cssFile = "css/MyProject.css", title = "MyHandler"}
 
    ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[]};
 
    function start()
    end
end

An IDE wizard initially creates a grid layout of 3 columns and 4 rows, as shown.

Declare, customize, and display more widgets

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

Write initialization code in the on-construction function

♦ Code snippets main page