Introduction to Rich UI handler parts

The main component of a Rich UI application is a Rich UI handler part, which is an handler with the RUIHandler stereotype. The handler part places widgets on a Web page and handles events such as a user's click of a button. You can make the widgets and functions in one handler part available to others, as described in "Creating a Rich UI application with multiple handlers."
This example shows a Rich UI handler part:
import com.ibm.egl.rui.widgets.Box; 
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;

handler ButtonTest01 type RUIhandler {initialUI = [ myTopBox ],
                          onConstructionFunction = initialization}

   myHelloField TextField
      { readOnly = true, text = "Hello" };
   myInTextField TextField{};
   myButton Button{ text = "Input to Output", onClick ::= click };
   myOutTextField TextField{};
	
   myBox03 Box{ padding=8, columns = 3, 
                children = [ myInTextField,  myButton, myOutTextField ],
                backgroundColor = "CadetBlue" };
	
   myBox02 Box{ padding=8,	columns = 2, children = [myHelloField],
                backgroundColor = "DarkGray"};
	
   myTopBox Box{ padding=8, children = [ myBox02,  myBox03 ],
                columns = 1, backgroundColor = "Aqua" };
	
   function initialization()
   end	
	
   function click(e EVENT in)
      myOutTextField.text = myHelloField.text + " " + myInTextField.text;	
   end	
end

After the user types the word World in the bottom left text box and clicks the button, the user interface is as follows:

RUI handler example output

The same example is used to explain the DOM tree; for details that are specific to Rich UI, see "Updating the DOM tree with EGL Rich UI."

The Rich UI handler supports the following properties, which are optional:

As shown, the box widgets include various properties; in particular, the children property, which is the means by which the handler adds children and other descendants to the widgets that are specified in the initialUI array.


Feedback