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

              Ascending order - Click to sort in descending order
              Adnan Durrani created issue -
              Adnan Durrani made changes -
              Field Original Value New Value
              Assignee Adnan Durrani [ adnan.durrani ]
              Adnan Durrani made changes -
              Link This issue blocks ICE-5349 [ ICE-5349 ]
              Adnan Durrani made changes -
              Status Open [ 1 ] In Progress [ 3 ]
              Adnan Durrani made changes -
              Status In Progress [ 3 ] Resolved [ 5 ]
              Fix Version/s 1.8.2-EE-GA_P01 [ 10220 ]
              Fix Version/s 1.8.3 [ 10211 ]
              Resolution Fixed [ 1 ]
              Joanne Bai made changes -
              Assignee Adnan Durrani [ adnan.durrani ] Joanne Bai [ joanne_bai ]
              Ken Fyten made changes -
              Summary Create a generic component that can listen for javascript events and fire an actionListener. Create a new "jsEventListener" container component that can listen for client-side javascript events and fire an action events on the server.
              Issue Type Task [ 3 ] New Feature [ 2 ]
              Salesforce Case []
              Affects [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial]
              Affects Version/s 1.8.2 [ 10190 ]
              Affects Version/s 1.8.2-EE-Beta [ 10215 ]
              Description Create a generic component that can listen for javascript events and fire an actionListener. Create a generic component that can listen for browse-side javascript events and fire a server-side action event in response.

              Component description:

              This container type of component will allow developer to listen for
              any javascript event fired by itself or its children, regardless of
              its children type whether custom or standard component. Developer will
              be able to take an action on JS event either on the client side using
              eventHandler callback (optionally) or on the server side using
              actionListener.(e.g.)

              EXAMPLE 1: Each panelGroup is inside its own jsEventListener
              component, and captures only click event. So clicking on any
              panelGroup will fire an action event to their associated
              jsEventListener component.

              <ice:jsEventListener actionListener="#{bean.reservationToHawai}"
              eventMask="click"/>
               <ice:panelGroup id="hawai">
                        ......
               </ice:panelGroup>
              </ice:jsEventListener>

              <ice:jsEventListener actionListener="#{bean.reservationToCuba}"
              eventMask="click"/>
               <ice:panelGroup id="cuba">
                         ......
               </ice:panelGroup>
              </ice:jsEventListener>


              public void reservationToHawai(ActionEvent event) {
                reservation("Hawai");
              }

              public void reservationToCuba(ActionEvent event) {
                reservation("Cuba");
              }

              private void reservation(String city) {
                ....
              }

              EXAMPLE 2: When there are many child components inside the
              jsEventListener component, then we can identify the target on server
              side using request params. For example in this snippet both
              panelGroups are inside one jsEventListener component there so one
              actionListener is being used. Now it will be actionListener's
              responsibility to identify the target.

              <ice:jsEventListener actionListener="#{bean.reservationTo}"
              eventMask="click"/>
               <ice:panelGroup id="hawai">
                        ......
               </ice:panelGroup>
               <ice:panelGroup id="cuba">
                         ......
               </ice:panelGroup>
              </ice:jsEventListener>


              public void reservationTo(ActionEvent event) {
                String city = requestMap.get("jsEventListener.target");
                if ("hawai".equals(city)) {
                    reservation("Hawai");
                }else if ("cuba".equals(city)) {
                    reservation("cuba");
                }

              }

              private void reservation(String city) {
                ....
              }


              Example 3: In this pseudo code we are capturing keydown event, so on
              DEL key we can cancel reservation. Which mean that developer has to be
              able to put some code on the client side to proceed only when DEL key
              pressed. The jsEventHandler callback would allow them to do so.
              ----------------------- JSPX
              <ice:jsEventListener actionListener="#{bean.cancelReservation}"
              eventMask="keydown" jsEventHandler="cancelOnDelete"/>
               <ice:panelGroup id="hawai">
                        //atleast one focus able element
                        ......
               </ice:panelGroup>
               <ice:panelGroup id="cuba">
                            //atleast one focus able element
                         ......
               </ice:panelGroup>
              </ice:jsEventListener>

              <script language="javascript">
                function cancelOnDelete(event) {
                    if (event.keyCode == DEL) {
                        //proceed to submit
                        return true;
                    } else {
                        //ignore event
                        return false
                    }
                }
              </script>
              ------------------------- Bean

              public void cancelReservation(ActionEvent event) {
                String city = requestMap.get("jsEventListener.target");
                if ("hawai".equals(city)) {
                    cancel("Hawai");
                }else if ("cuba".equals(city)) {
                    cancel("cuba");
                }

              }

              private void cancel(String city) {
                ....
              }
              ---------------------
              Adnan Durrani made changes -
              Salesforce Case []
              Description Create a generic component that can listen for browse-side javascript events and fire a server-side action event in response.

              Component description:

              This container type of component will allow developer to listen for
              any javascript event fired by itself or its children, regardless of
              its children type whether custom or standard component. Developer will
              be able to take an action on JS event either on the client side using
              eventHandler callback (optionally) or on the server side using
              actionListener.(e.g.)

              EXAMPLE 1: Each panelGroup is inside its own jsEventListener
              component, and captures only click event. So clicking on any
              panelGroup will fire an action event to their associated
              jsEventListener component.

              <ice:jsEventListener actionListener="#{bean.reservationToHawai}"
              eventMask="click"/>
               <ice:panelGroup id="hawai">
                        ......
               </ice:panelGroup>
              </ice:jsEventListener>

              <ice:jsEventListener actionListener="#{bean.reservationToCuba}"
              eventMask="click"/>
               <ice:panelGroup id="cuba">
                         ......
               </ice:panelGroup>
              </ice:jsEventListener>


              public void reservationToHawai(ActionEvent event) {
                reservation("Hawai");
              }

              public void reservationToCuba(ActionEvent event) {
                reservation("Cuba");
              }

              private void reservation(String city) {
                ....
              }

              EXAMPLE 2: When there are many child components inside the
              jsEventListener component, then we can identify the target on server
              side using request params. For example in this snippet both
              panelGroups are inside one jsEventListener component there so one
              actionListener is being used. Now it will be actionListener's
              responsibility to identify the target.

              <ice:jsEventListener actionListener="#{bean.reservationTo}"
              eventMask="click"/>
               <ice:panelGroup id="hawai">
                        ......
               </ice:panelGroup>
               <ice:panelGroup id="cuba">
                         ......
               </ice:panelGroup>
              </ice:jsEventListener>


              public void reservationTo(ActionEvent event) {
                String city = requestMap.get("jsEventListener.target");
                if ("hawai".equals(city)) {
                    reservation("Hawai");
                }else if ("cuba".equals(city)) {
                    reservation("cuba");
                }

              }

              private void reservation(String city) {
                ....
              }


              Example 3: In this pseudo code we are capturing keydown event, so on
              DEL key we can cancel reservation. Which mean that developer has to be
              able to put some code on the client side to proceed only when DEL key
              pressed. The jsEventHandler callback would allow them to do so.
              ----------------------- JSPX
              <ice:jsEventListener actionListener="#{bean.cancelReservation}"
              eventMask="keydown" jsEventHandler="cancelOnDelete"/>
               <ice:panelGroup id="hawai">
                        //atleast one focus able element
                        ......
               </ice:panelGroup>
               <ice:panelGroup id="cuba">
                            //atleast one focus able element
                         ......
               </ice:panelGroup>
              </ice:jsEventListener>

              <script language="javascript">
                function cancelOnDelete(event) {
                    if (event.keyCode == DEL) {
                        //proceed to submit
                        return true;
                    } else {
                        //ignore event
                        return false
                    }
                }
              </script>
              ------------------------- Bean

              public void cancelReservation(ActionEvent event) {
                String city = requestMap.get("jsEventListener.target");
                if ("hawai".equals(city)) {
                    cancel("Hawai");
                }else if ("cuba".equals(city)) {
                    cancel("cuba");
                }

              }

              private void cancel(String city) {
                ....
              }
              ---------------------
              		 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.
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]
              Assignee Joanne Bai [ joanne_bai ]

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: