XUI: Extensible User Interface Framework

Using the Event Collection

Event handling can also be defined using the <event-collection> element within <xframe>. This mechanism provides an easy way to organize event handlers by organizing them in one place. This feature is essential when you have a fairly complex page where different elements can respond from different events.

The following is an example where three buttons are defined and event handlers for them are defined inside the event-collection element.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui"%>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true"> 
<xframe> 
   <properties>
      <title>XButton Event</title>
   </properties>
   <xcontentpane style="padding:20px;"> 
      <layoutmanager type="grid-layout" grid-layout-cols="3" grid-layout-rows="1" border="1"/>
      <xpanel> 
         <xbutton id="B1" text="BUTTON 1" style="width:100px; height: 50px;"/>
      </xpanel>
      <xpanel> 
         <xbutton id="B2" text="BUTTON 2" style="width:100px; height: 50px;"/>
      </xpanel>
      <xpanel> 
         <xbutton id="B3" text="BUTTON 3" style="width:100px; height: 50px;"/>
      </xpanel>
    </xcontentpane>
    
    <event-collection>
       <event object-id="B1" type="onclick" action="alert('Button 1 Clicked!');"/>
       <event object-id="B2" type="onclick" action="alert('Button 2 Clicked!');"/>
       <event object-id="B3" type="onclick" action="alert('Button 3 Clicked!');"/>	
    </event-collection>
</xframe>
</xui:view>

The code above will produce the following:

In this example, we have three buttons that are defined and laid out using the grid layout manager. Each of these buttons are given a unique id using the ID attribute. This id is used as the reference point to attach an event to the object.

As you can see inside the <event-collection> element, there are several <event> elements which are assigned with the object id as defined in the xbuttons. These IDs function as the link between the events and the objects.

When one of the buttons is clicked, let's the BUTTON 1, then an JavaScript alert will be invoked and show "Button 1 Clicked!" as shown below:

Next: Applying Events by Class Name
Back to: Application Guide