Using the Event
Manager
The Event Manager is responsible for binding events to the appropriate
event handler, methods, and functions as defined by the developer. In
XUI framework, event handlers can be set at the component
level using the <event>
element, or they can be set using the <event-collection>
element within <xframe> and <xdialog>.
When an event handler is set to the component level, event listeners
are able to respond when an event such as mouse over or mouse click is
fired within the component. It is important to understand that events
are not programmatically created activities, but rather typical, natural
and expected occurrences within the screen. By default, events that occur
at the component level are propagated to parents and ancestor containers
all the way to the top-level container until the events are handled.
The following is a simple example of how an event can be applied to a
UI component. In this case, an "onclick" event is attached to
an <xbutton>
component:
<%@ taglib uri="http://www.jway.com/xui" prefix="xui"%>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view>
<xframe>
<properties>
<title>XButton Event</title>
</properties>
<xcontentpane>
<xpanel style="padding:20px;">
<xbutton text="Click Me!" style="width:100px; height: 50px;">
<event type="onclick" action="alert('Button Clicked!');"/>
</xbutton>
</xpanel>
</xcontentpane>
</xframe>
</xui:view>
In this example, the type attribute could be any of the mouse, keyboard,
or system events that are supported by the browser. The action attribute
can be any script function written in JavaScript which is invoked when
the event is fired.
You can apply multiple event handlers for each component. In this example,
we can add another event element to handle mouseover event:
<%@ taglib uri="http://www.jway.com/xui" prefix="xui"%>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view>
<xframe>
<properties>
<title>XButton Event</title>
</properties>
<xcontentpane>
<xpanel style="padding:20px;">
<xbutton text="Click Me!" style="width:100px; height: 50px;">
<event type="onclick" action="alert('Button Clicked!');"/>
<event type="onmouseover" action="alert('Button Mouseover!');"/>
</xbutton>
</xpanel>
</xcontentpane>
</xframe>
</xui:view>
You can add as many event handlers as necessary.
The types of events that are supported are as follows:
Mouse Events
| Name |
Description |
| onclick |
When mouse is clicked |
| onmouseover |
When mouse pointer moves over an element |
| onmouseout |
When mouse pointer moves out of an element |
| onmousedown |
When mouse button is pressed |
| onmouseup |
When mouse button is released |
| ondblclick |
When mouse button is double-clicked |
| onmousemove |
When mouse pointer moves |
Keyboard Events
| Name |
Description |
| onkeydown |
When any keyboard key is pressed |
| onkeydown |
When pressed key is released |
| onkeypress |
When any keyboard key is pressed and released |
Form Element Events
| Name |
Description |
| onchange |
When the form element changes |
| onsubmit |
When the form is submitted |
| onreset |
When the form is reset |
| onselect |
When the element is selected |
| onfocus |
When the element gets focus |
| onblur |
When the element loses focus |
Window Events
| Name |
Description |
| onload |
When the document loads |
| onunload |
When the document exits or unloads |
Next: Attaching events
using Event Collection
Back to: Application Guide
| 