Details
-
Type:
New Feature
-
Status: Closed
-
Priority:
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
Activity
| Field | Original Value | New Value |
|---|---|---|
| Assignee | Adnan Durrani [ adnan.durrani ] |
| Link | This issue blocks ICE-5349 [ ICE-5349 ] |
| Status | Open [ 1 ] | In Progress [ 3 ] |
| 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 ] |
| Repository | Revision | Date | User | Message |
| ICEsoft Public SVN Repository | #20635 | Fri Feb 12 18:19:27 MST 2010 | adnan.durrani | Fix related to |
| Files Changed | ||||
MODIFY
/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/jseventlistener/JSEventListener.java
MODIFY
/icefaces/trunk/icefaces/bridge/lib/extras/extras.js
MODIFY
/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/jseventlistener/JSEventListenerRenderer.java
|
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
| Assignee | Adnan Durrani [ adnan.durrani ] | Joanne Bai [ joanne_bai ] |
Use test case ICE-5399 to verify
| 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) { .... } --------------------- |
| 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. |
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")))
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="#
<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.
| Status | Resolved [ 5 ] | Closed [ 6 ] |
| Assignee | Joanne Bai [ joanne_bai ] |
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