ICEfaces
  1. ICEfaces
  2. ICE-5375

Create a new "jsEventListener" container component that can listen for client-side javascript events and fire an action events on the server.

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 1.8.2-EE-GA_P01, 1.8.3
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      javascript event + actionListener
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Create a generic component that can listen for browse-side javascript events and optionally fire a server-side action event in response. It should also be able to listen for more than one events and should have a mechanism to filter javascript events on client side. In addition to that client should be sending sufficient event information to the server that can be used by the server side listener.

        Activity

        Hide
        Adnan Durrani added a comment -

        The jsEventListener component has been created. The following are some of the important attributes:
        -events
        -handler
        -action
        -actionListener
        -immediate

        Here are some examples:

        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.

        ice.event.target
        ice.event.captured
        ice.event.shift
        ice.event.keycode
        ice.event.type
        ice.focus
        ice.submit.partial
        ice.event.alt
        ice.event.ctrl
        ice.event.shift
        ice.event.meta
        ice.event.x
        ice.event.y
        ice.event.left
        ice.event.right
        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.

        Show
        Adnan Durrani added a comment - The jsEventListener component has been created. The following are some of the important attributes: -events -handler -action -actionListener -immediate Here are some examples: 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. ice.event.target ice.event.captured ice.event.shift ice.event.keycode ice.event.type ice.focus ice.submit.partial ice.event.alt ice.event.ctrl ice.event.shift ice.event.meta ice.event.x ice.event.y ice.event.left ice.event.right 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.
        Hide
        Joanne Bai added a comment -

        Use test case ICE-5399 to verify

        Show
        Joanne Bai added a comment - Use test case ICE-5399 to verify
        Hide
        Adnan Durrani added a comment -

        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java
        Completed: At revision: 20707

        Show
        Adnan Durrani added a comment - Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml Adding: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java Completed: At revision: 20707
        Hide
        Adnan Durrani added a comment -

        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml
        Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java
        Completed: At revision: 20627

        Show
        Adnan Durrani added a comment - Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml Adding: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\components\JSEventListener-component.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-jseventlistener-props.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListenerRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\faces-config-base.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-component.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\ice\renderers\JSEventListener-renderer.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\custom\jseventlistener-renderer.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\jseventlistener\JSEventListener.java Completed: At revision: 20627

          People

          • Assignee:
            Unassigned
            Reporter:
            Adnan Durrani
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: