XEL Keyboard Events

This tutorial shows you how to handle keyboard events with the XML Execution Language (XEL), which is a declarative programming language delivered by Backbase to facilitate the creation of application functionality without the use of JavaScript.

Overview

XML Execution Language (XEL) is a declarative programming language delivered by Backbase to facilitate the creation of application functionality without the use of JavaScript. Primarily designed for use on an instance in the application, XEL provides an easy way to declare handlers and functions on an instance of your application. In the body of an XEL handler/function, you can use either a declarative (XEL/Command) or JavaScript syntax. Within the body of XEL elements, you can call methods and functions from all Backbase APIs.

The namespace used for XEL is http://www.backbase.com/2006/xel.

Declarative Execution

Here is the source code of the XEL Keyboard Events live demo below:

<b:button>

        I'm a button

        <e:handler event="keydown">

                <e:variable name="key" select="$event/property::keyIdentifier" />

                <e:choose>

                        <e:when test="$key eq 'U+0020'">

                                <e:call function="alert" argument1="'You pressed: space'" />

                        </e:when>

                        <e:when test="$key eq 'U+0041'">

                                <e:call function="alert" argument1="'You pressed: a'" />

                        </e:when>

                        <e:otherwise>

                                <e:call function="alert" argument1="concat('You pressed: ', $key)" />

                        </e:otherwise>

                </e:choose>

        </e:handler>

</b:button>

Here we have a variable, which gets a value from the keydown event. The value of the variable is the identifier of the key that is pressed. There are two special cases that display when either the letter "a" or the spacebar is pressed; otherwise, the Unicode identifier is displayed. Note that this does not apply to non-alphanumeric cases, such as the function keys.

The live demo is loaded in this page. Click the button first, and then press a key.

Live Demo: Keyboard Events.

Download

You can download a zipped version of the example provided on this page to try it out for yourself.

Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.

Additional Resources

For more information on XEL, refer to the following documentation:

Client Framework