XUI: Extensible User Interface Framework

Applying Events by Class Name

You can also apply events to objects that are identified by a particular class. This is similar to applying style to HTML elements that are identified by a particular class name.

The following is similar from the previous example with a little bit different approach. In this case, we now have four buttons; each one wrapped inside an xpanel identified with a class name of either "odd" or "even".

In the event collection, two <event> elements are defined having their attribute "object-class" defined with the same class names as defined in the xpanels. This definition is the mechanism to attach a particular event to a set of components identified with a class name.

<%@ 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="4" grid-layout-rows="1" border="1"/>
      <xpanel class="odd" > 
         <xbutton id="B1" text="BUTTON 1" style="width:100px; height: 50px;"/>
      </xpanel>
      <xpanel class="even"> 
         <xbutton id="B2" text="BUTTON 2" style="width:100px; height: 50px;"/>
      </xpanel>
      <xpanel class="odd"> 
         <xbutton id="B3" text="BUTTON 3" style="width:100px; height: 50px;"/>
      </xpanel>
      <xpanel class="even"> 
         <xbutton id="B4" text="BUTTON 4" style="width:100px; height: 50px;"/>
      </xpanel>
    </xcontentpane>
    
    <event-collection>
       <event object-class="odd" type="onclick" action="alert('Odd Number Button');"/>
       <event object-class="even" type="onclick" action="alert('Even Number Button');"/>
    </event-collection>
</xframe>
</xui:view>

The code above will produce the following:

In this example, we have four buttons that are defined and laid out using the grid layout manager. Each of these buttons are wrapped by an <xpanel> element which is given a class name using the class attribute. This class name is used as the reference point to attach an event to the object.

As you can see inside the <event-collection> element, there are two <event> elements which are assigned with the class name as defined in the xpanels. These class names function as the link between the events and the objects.

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

Back to: Application Guide