Here is that topic's example Web page and related DOM tree:
When you develop a Web page with Rich UI, you declare widgets, which are displayable only if your code also adds those widgets to the DOM tree. Your code can also update the tree—adding, changing, and removing widgets—in response to runtime events, such as a user's clicking a button. Your main task in Web-page development is to create and update a DOM tree.
When you work in the Design tab of the EGL editor, some of the tasks to create the DOM-tree creation are handled for you automatically during a drag-and-drop operation. When you work in the Source tab of the EGL editor, you can write code directly and reference DOM elements explicitly.
myButton Button {text = "Input to Output"};
handler MyHandlerPart type RUIhandler { initialUI =[myBox] } myBox Box{ children = [myBox02, myBox03] }; myBox02 Box{ children = [myHelloField] }; myBox03 Box{ children = [myInTextField, myButton, myOutTextField] }; myHelloField TextField { text = "Hello" }; myInTextField TextField{}; myButton Button { text = "Input to Output" }; myOutTextField TextField{}; end
myBox03.children = {myOutTextField};
The revised Web page is as follows: