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:
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."
Handler ButtonTest Type RUIHandler { children = [ui], cssFile = "buttontest/coolblue.css" }Here is an example CSS file:
.EglRuiGridTable { border: 3px solid black; } .EglRuiGridHeader { color:yellow; background-color:red; } .EglRuiGridCell { color:black; background-color:aqua; }
If you specify both the cssFile and includeFile properties, the CSS content that is referenced by the cssFile property takes precedence. This occurs because, in the deployed HTML file, the <link> entry is embedded after the content that is referenced by the includeFile property.
For additional details about CSS files, see "Rich UI styles."
Handler ButtonTest Type RUIHandler { children = [ui], includeFile = "buttontest/coolblue.css" }
<script> <!-- file contents here --> </script>
<style type="text/css"> .EglRuiGridTable { border: 3px solid black; } .EglRuiGridHeader { color:yellow; background-color:red; } .EglRuiGridCell { color:black; background-color:aqua; } </style>
<link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">
In this example, a warning message indicates that the href value does not refer to an existing file. The message is displayed because the development-time editor seeks the WebContent/MyFolder/css/dashboard.css file rather than the actual file, which is WebContent/css/dashboard.css. Make sure that the value of the href tag includes a path that is relative to the WebContent directory and ignore any warning message that indicates a need for a different path.
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.