Updating the DOM tree with EGL Rich UI

This topic gives EGL-specific details that assume familiarity with the overview topic "Web technology for developers.”

Here is that topic's example Web page and related DOM tree:

Example Web page

Example 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.

You create and update a DOM tree in three steps:
  1. Declare widgets of specific types—Button for buttons, TextField for text fields, and so forth—and customize the widget properties. For example, you might set the text of a button to "Input to Output":
    myButton Button {text = "Input to Output"};
  2. Add widgets to the initial DOM tree. A field named initialUI identifies the children of the DOM-tree body element; a widget-specific field named children relates one widget to the next. To understand how to build a DOM tree, you might look at a fuller example:
    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
  3. Alter the DOM tree by adding, changing, and removing widgets at those points in your code where you want the changes to be displayable. A widget or its changes are "displayable" rather than "displayed" because you can hide a widget. This EGL code resets myBox3 so that the only child of that box is myOutTextField.
    myBox03.children = {myOutTextField};

    The revised Web page is as follows:

    Example Web page

Note: At a given point in runtime processing, a widget can be the child of only one parent.

Feedback