Knowing a little of how the Genero Web Client for JavaScript (GWC-JS) uses AUI tree, controllers and widgets to create and manage UI elements will help you on your way to building a customized UI interface.
How GWC-JS works
The GWC-JS Web client interface is built dynamically using JavaScript. When the GWC-JS is launched, it receives an AUI tree from the GAS. Effectively each node of the AUI tree is managed by a GWC-JS controller and widget.
The GWC-JS uses its controller and widget
elements to create the HTML DOM. Through DOM elements, JavaScript is able to dynamically implement
the elements of the HTML pages of the UI by responding to changes to their properties and listening
for events that change their behavior. See this illustrated in Figure 1.
Figure 1. GWC-JS Controller and Widget Function
GWC-JS Controller
The GWC-JS controller and widget elements are interdependent but have specific and
distinct roles. The JavaScript controller (_Controller.js) plays a role in:
- Creating the widget.
- Maintaining its behaviors.
Behaviors involves mapping one or more attributes of the AUI tree to an aspect of the
widget. For example, the color and reverse
attributes control a widget's background color. To reflect the two-way interaction
between the Web client and the application, there are two types of behavior that a
controller needs to maintain:
- VM behavior: the controller is listening to the DVM and applying the changes received from DVM instructions.
- UI behavior: the controller is also listening to the UI and sending UI modification to the DVM.
Note: These built-in behaviors are internal and not meant to be modified by
users.
GWC-JS Widget
The JavaScript widget (_Widget.js) plays a role in updating the DOM tree to reflect the application state. It has:
- APIs to manipulate the DOM.
- Listeners to react to DOM events.