Specifying Event Listeners
Since a XUI dialog box is synchronized with its XUI XML document, you can register DOM events in the document to monitor activities in the dialog box. For example, when a check box is selected, the checked attribute of the element will change to true. If you register a DOMAttrModified event on the checkbox element, you will be informed whenever the check status is changed in the dialog box.
XUI extends the DOMActivate event to be dispatched when the status of a control is changed. For example, a DOMActivate event will be dispatched to the affected element whenever a button is clicked, a check box is selected, an item in a list box is selected, the content of a text box is changed, and so on. Therefore, you can register a DOMActivate event listener on a button element to execute the necessary routines when a button is pushed.
XUI makes use of W3C XML Events. You can register event listeners in the XUI document as follows:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE window PUBLIC "-//Arbortext//DTD XUI XML 1.1//EN" "xui.dtd">
<window>
<button label="OK">
<script type="application/x-javascript" ev:event="DOMActivate">
Application.alert("The OK button is selected");
</script>
</button>
</window>
This document declares the XML Events namespace in the window element. The script element contains the script that will be executed when the event specified by the ev:event attribute is dispatched. Therefore, the script element registers a DOMActivate event listener on the button element, and the body of the event listener is the content of the script element. When the OK button is pushed, the JavaScript engine will display a message box with the message “The OK button is selected”.
The
type attribute of the
script element specifies the type of the script. XUI supports JavaScript (Rhino), JScript (Microsoft), and VBScript. Refer to
<script> Element for a list of valid script types.
|
|
Be aware that XUI can make use W3C UIEvent events, XUI cannot make use of MouseEvent events, a subclass of UIEvent. MouseEvent is currently supported only for documents in the Arbortext Editor edit pane.
|
In addition to DOM Events, you can register AOM WindowEvent events on the window element. The WindowEvent module has the following event types:
|
Event type
|
Time to dispatch
|
|
WindowLoad
|
Before the dialog box is loaded on the screen.
|
|
WindowClosing
|
After the dialog box title bar’s close button is selected.
|
|
WindowClosed
|
After the dialog box is dismissed.
|
|
WindowCreated
|
After the dialog box is created. (Listeners can only be added to the Application object.)
|
|
WindowActivated
|
After the dialog box gains focus.
|
|
WindowDeactivated
|
After the dialog box loses focus.
|
|
WindowMinimized
|
After the dialog box is minimized.
|
|
WindowRestored
|
After the dialog box is restored from being minimized.
|
The following examples show the three ways to register an event listener:
Example 1. Use the listener to associate an event handler with its observer
In this example, the usage attribute <script> is set to indirect. Doing so disassociates the <script> element from its parent <window> element. If usage is set to direct (the default), the observer of the handler is the handler's parent element.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE window PUBLIC "-//Arbortext//DTD XUI XML 1.1//EN" "xui.dtd">
<window>
<button id="ok" label="OK"/>
<script id="select" usage="indirect" type="application/x-javascript">
Application.alert("The OK button is selected");
</script>
<ev:listener event="DOMActivate" observer="ok" handler="#select"/>
</window>
Example 2. Attach attributes directly to the observer element
As in the previous example, the usage attribute of <script> is set to indirect, disassociating the <script> element from its parent <window> element.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE window PUBLIC "-//Arbortext//DTD XUI XML 1.1//EN" "xui.dtd">
<window>
<button label="OK" ev:event="DOMActivate" ev:handler="#select"/>
<script id="select" usage="indirect" type="application/x-javascript">
Application.alert("The OK button is selected");
</script>
</window>
Example 3. Attach attributes directly to the handler element
The observer is the parent element of the handler. This example illustrates the simplest way to register an event listener.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE window PUBLIC "-//Arbortext//DTD XUI XML 1.1//EN" "xui.dtd">
<window>
<button label="OK">
<script type="application/x-javascript" ev:event="DOMActivate">
Application.alert("The OK button is selected");
</script>
</button>
</window>
