XPE Ajax Basic Concepts - XPE Manual

XPE Ajax

Description

XPE Ajax is a framework for developing Ajax applications on the XPE Gecko platform.

Basic Concepts

Inheriting the core idea of loose-coupling of SOA, the architecture model of XPE Ajax can be best described as a bus-based event producer and subscriber model. This architectual model decouples event producers from event consumers so they can be developed separately.

Generating an Event

To generate an event, one simply drops an event on the bus:

XPE.bus.occurred('event name', event object);

The first argument denotes the name of the event and acts as the channel that any event consumers are listening to.

Listening an Event

Some built-in UI components will automatically subscribe to some known events and react accordingly. You may also create your own event handler, which can be defined as the following: To generate an event, one simply drops an event on the bus:

   <a:eventHandler event="event name" xmlns:a="http://www.xmlpile.org/xpe/ajax" >
      function(event,params) { //code to process the event };
   </a:eventHandler>

The event attribute's value is the same as the event name one wants to subscribe to. The event name is also passed as the event parameter to the function. The "params" parameter is the event object created by the event generator.

XPE Ajax Application structure

An ajax application is written as an XML document. The document is read by the Resource:ajax xlet, which turns the document into an ajax application. Typically, one should only configure one Resource:ajax xlet per page for efficiency reason although it is possible to have more than one Resource:ajax xlet.

The top level element of an XPE ajax application is the a:app element, which has zero or more a:component elements and zero or more a:eventHandler elements.

   <a:app lang="zh|en" debug="true|false" xmlns:a="http://www.xmlpile.org/xpe/ajax" >
      <a:component ui="UI componenet name" >
      </a:component>
      *
      <a:eventHandler event="event name" >
      </a:eventHandler>
      *
   </a:app>

The attributes of the a:app element are described as the following.

Attributes

Attribute name	Description
lang	Optional. Default to "en", which denotes English. Can be set to "zh", which denotes Chinese.
debug	Optional. If set to true, the generated code will NOT be compressed so it is easier to read by human.

The following is a complete example:

   <a:app debug="true" xmlns:a="http://www.xmlpile.org/xpe/ajax" >
      <a:eventHandler event="init" >
         function(event,params) { alert('page loading completed'); };
      </a:eventHandler>
   </a:app>