| |||||||
FRAMES NO FRAMES |
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.
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>You can capture more than one events using "," separated values (e.g)
//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>
<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.
Tag Information | |
Tag Class | com.icesoft.faces.component.jseventlistener.JSEventListenerTag |
TagExtraInfo Class | None |
Body Content | JSP |
Display Name | None |
Attributes | ||||
Name | Required | Request-time | Type | Description |
action | false | false | java.lang.String | MethodBinding 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. |
actionListener | false | false | java.lang.String | MethodBinding 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. |
binding | false | false | java.lang.String | The value binding expression linking this component to a property in a backing bean |
events | false | false | java.lang.String | List of "," separated events (e.g) events="click[, keydown, ...]". |
handler | false | false | java.lang.String | Its 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"> .... |
id | false | false | java.lang.String | The component identifier for this component. This value must be unique within the closest parent component that is a naming container. |
immediate | false | false | java.lang.String | Flag 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. |
rendered | false | false | java.lang.String | Flag indicating whether or not this component should be rendered (during Render Response Phase), or processed on any subsequent form submit. |
style | false | false | java.lang.String | CSS style(s) to be applied when this component is rendered. |
styleClass | false | false | java.lang.String | Space-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. |
value | false | false | java.lang.String | The current value of this component. |
Variables | No Variables Defined. |
| |||||||
FRAMES NO FRAMES |