jsEventListener

Table of Contents

Overview

Since 4.0

You can use the icecore:jsEventListener component to capture Javascript events and then notify a server-side defined action listener.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

To use the icecore:jsEventListener tag, first declare the core namespace:

<html ... xmlns:icecore="http://www.icefaces.org/icefaces/core">

Then add the tag to your page enclosing the components that might fire the events that you want to capture:

<h:body> 
    ... 
    <icecore:jsEventListener events="onlclick, onkeypress" actionListener="#{Bean.captureEvent}">
        ....
        <h:form>
            <h:inputText .../>
            <h:inputText .../>
            ....
            ....
           <ace:autoCompleteEntry ..../>
        </h:form>
        ....
    </icecore:jsEventListener>
    ... 
</h:body>

Optionally a JavaScript function can be used to filter through the captured events. This can be very useful in cases where lots of events are fired repeatedelly, such as key presses or mouse overs.

<h:head>
    ...
    <script type="text/javascript">
        function allowArrowKeys(event) {
            var keycode = event.which || event.keyCode;
            return keycode >= 37 && keycode <= 40;
        }
    </script>
</h:head>
<h:body> 
    ... 
    <icecore:jsEventListener events="onkeypress" handler="allowArrowKeys" actionListener="#{Bean.captureArrowKey}">
        ....
        <h:form>
            <h:inputText .../>
            <h:inputText .../>
            ....
            ....
           <ace:autoCompleteEntry ..../>
        </h:form>
        ....
    </icecore:jsEventListener>
    ... 
</h:body>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

events Use this attribute to specify a comma separated list of JS events types.
handler Use this attribute to specify the JS function that will filter through the captured events.
actionListener Use this attribute to specify bean method that should be invoked.

Action listener event attributes

The event instance passed as parameter to the action listener method will carry most of the information that the original Javascript event had. The class org.icefaces.impl.component.JSEventListener$JSEvent provides getters for the following properties:

captured The ID of the element that captured the JS event.
target The ID of the element that triggered the JS event.
type The event type.
x The X coordinate (for mouse events).
y The Y coordinate (for mouse events).
alt "Alt" key pressed.
ctrl "Ctrl" key pressed.
meat "Meta" key pressed.
shift "Shift" key pressed.
keycode The Javascript code of the key (for key press events).

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2018 ICEsoft Technologies Canada Corp.