ICE Components
Tag jsEventListener


The jsEventListener component allows you to capture javascript events and optionally sends a notification to server and fire an action event.

For example if you want to fire an action event in response of onchange event on the client.

 <ice:jsEventListener events="change" actionListener="#{textFields.eventListener}"> <h:inputText /> </ice:jsEventListener> 

On server side you get the following parameters, that can helps to evaluate further on server side.

Note: Some of the above parameters are specific to the element type. So first you will have to check if the patameter is available in request map.

Another example to use html input buttons to fire an action event and navigate to the page according to the choice.

 <ice:jsEventListener events="click" action="#{bean.eventAction}"> <input type="button" id="continue" value="Continue"/> <input type="button" id="cancel" value="Cancel"/> </ice:jsEventListener> public String eventAction() { Map parameter = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap(); if ("continue".equals(parameter.get("ice.event.target"))) { return "continue"; }else if ("cancel".equals(parameter.get("ice.event.target"))) { return "cancel"; } return "noaction"; } 
Note: For above example navigation rule needs to be defined in faces-config.xml.

Event Filtering:
In above examples events was not filtered and you don't want to capture event like keydown without filtering it. To filter events you can defin a callback using handler attribute on the component. Let say if you are interested in only ESC key and Shift + N key:

 <ice:jsEventListener events="keydown" handler="keydownFilter" actionListener="#{bean.doSomthing}"> <h:inputText /> </ice:jsEventListener> 
//now lets define keydownFilter <script> //this handler will be invoked by the ICEFaces along with the event //wrapped in the prototype's event. To find out what methods //available on event please see prototype event API. function keydownFilter(event) { var ESC = 27; var N = 78; switch(event.keyCode) { case ESC: //proceed and do a submit return true; case N: if(event.shiftKey) { //optionally stop bubbling if required Event.stop(event); //proceed and do a submit return true; } } //don't invoke a submit return false; } </script>

You can capture more than one events using "," separated values (e.g)
 <ice:jsEventListener events="keydown, keyup" handler="eventFilter" actionListener="#{bean.doSomthing}"> <h:inputText /> </ice:jsEventListener> 
As there is only one handler for both events, so you will have to check for the event.type to distigushe between them or if you want to use a separate handlers you can use nested jsEventListener component (e.g.)
 <ice:jsEventListener events="keydown" handler="keydownFilter" actionListener="#{bean.doSomthing}"> <ice:jsEventListener events="keyup" handler="keyupFilter" actionListener="#{bean.doSomthing}"> <h:inputText /> </ice:jsEventListener> </ice:jsEventListener> 
There can be many uses cases, please explore and let others know.
Note: The ice:jsEventListener based on the event bubbling, so it can capture events as far as its children bubbling up the events.


Tag Information
Tag Classcom.icesoft.faces.component.jseventlistener.JSEventListenerTag
TagExtraInfo ClassNone
Body ContentJSP
Display NameNone

Attributes
NameRequiredRequest-timeTypeDescription
actionfalsefalsejava.lang.StringMethodBinding representing the application action to invoke when this component is activated by the user. The expression must evaluate to a either a String or a public method that takes no parameters, and returns a String (the logical outcome) which is passed to the NavigationHandler for this application.
actionListenerfalsefalsejava.lang.StringMethodBinding representing an action listener method that will be notified when this component is activated by the user. The expression must evaluate to a public method that takes an ActionEvent parameter, with a return type of void.
bindingfalsefalsejava.lang.StringThe value binding expression linking this component to a property in a backing bean
eventsfalsefalsejava.lang.StringList of "," separated events (e.g) events="click[, keydown, ...]".
handlerfalsefalsejava.lang.StringIts an optional attribute. Can be used to define a callback handlers for the events listed in "events" attribute(e.g.)
<ice:jsEventListener events="click" handler="myClickHandler">
....

<ice:jsEventListener events="click, keydown" handler="myHandler">
....
idfalsefalsejava.lang.StringThe component identifier for this component. This value must be unique within the closest parent component that is a naming container.
immediatefalsefalsejava.lang.StringFlag indicating that this component's value must be converted and validated immediately (that is, during Apply Request Values phase), rather than waiting until Process Validations phase.
renderedfalsefalsejava.lang.StringFlag indicating whether or not this component should be rendered (during Render Response Phase), or processed on any subsequent form submit.
stylefalsefalsejava.lang.StringCSS style(s) to be applied when this component is rendered.
styleClassfalsefalsejava.lang.StringSpace-separated list of CSS style class(es) to be applied when this element is rendered. This value must be passed through as the "class" attribute on generated markup.
valuefalsefalsejava.lang.StringThe current value of this component.

Variables
No Variables Defined.


Output Generated by Tag Library Documentation Generator. Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright 2002-4 Sun Microsystems, Inc. 4150 Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved.