The way a web browser arranges artifacts on a web page is sometimes confusing. By default, a web page arranges its artifacts in a top-down, left to right order. This is also true of EGL Rich UI widgets. Fortunately, EGL gives you an easily understood layout container widget, in the form of a Box widget, which arranges its child widgets in rows and columns. Boxes may also contain other Boxes as children. When Boxes are used, a web page consists of a hierarchy, or tree of EGL widgets.
This becomes apparent as you decide to move an existing widget to another location by dragging the widget in the Design page. When you begin to drag, a set of colored indicators (yellow by default) appear, where each indicator denotes a potential drop location. As you drag your mouse close to one of these potential drop indicators, the indicator will change color (to green by default) which indicates where the widget will be placed if the mouse is released. The term "placed" needs to be clarified. Since widgets exist in a hierarchy, potential drop indicators reflect a new hierarchical location, and not necessarily a physical location. To help you in visualizing the new widget location in the hierarchy, as the widget is dragged over a potential drop indicator, a small diagram of your EGL widget hierarchy appears. This diagram displays where in the hierarchy your widget will be placed when you release the mouse button.
In the image below, the Configure button is being dragged to a new location between the MyTextLabel label and the MyTextField field. The hierarchy diagram displays where the Configure button is currently located as indicated with the dotted rectangle, and its new location as indicated by the green line. The color of the line matches the color of the potential drop indicator in the design area. Indicator colors are configurable in the tool's preference page. Potential drop indicators that are dotted on one side represent a location that is either before or after a Box. The large rectangular area at the bottom represents the area below all other widgets.
Widgets, whose positions are set to either absolute or relative, have positions that are independent of the widget hierarchy. When these widgets are dragged to a new position, the potential drop indicators and hierarchy diagram do not appear, and the widget's x and y attributes are set to new values when the widget is dropped.
After moving widgets, you can view what changes were made in your EGL source code.
