jsEventListener

Version 8 by Ken Fyten
on Nov 13, 2014 10:50.


compared with
Current by Ken Fyten
on Nov 21, 2014 15:21.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 2 changes. View first change.

 h2. Overview
 _Since 4.0_
  
 You can use _icecore:jsEventListener_ tag to capture Javascript events and then notify a server side defined action listener.
  You can use the _icecore:jsEventListener_ component to capture Javascript events and then notify a server-side defined action listener.
  
 {tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=jsEventListenerBean] of this component, complete with source code.{tip}
  
 h2. Getting Started
  
 To use the _icecore:jsEventListener_ tag, first declare the core namespace:
  
 {panel}
 {code:html|borderStyle=dashed}
 <html ... xmlns:icecore="http://www.icefaces.org/icefaces/core">
 {code}
 {panel}
  
 Then add the tag to your page enclosing the components that might fire the events that you want to capture:
  
 {panel}
 {code:xml|borderStyle=dashed}
 <h:body>
  ...
  <icecore:jsEventListener events="onlclick, onkeypress" actionListener="#{Bean.captureEvent}">
  ....
  <h:form>
  <h:inputText .../>
  <h:inputText .../>
  ....
  ....
  <ace:autoCompleteEntry ..../>
  </h:form>
  ....
  </icecore:jsEventListener>
  ...
 </h:body>
 {code}
 {panel}
  
 Optionally a Javascript function can be used to filter through the captured events. This can be very useful in cases where lots of events are fired repeatedelly, such as key presses or mouse overs.
  Optionally a JavaScript function can be used to filter through the captured events. This can be very useful in cases where lots of events are fired repeatedelly, such as key presses or mouse overs.
  
 {code:xml|borderStyle=dashed}
 <h:head>
  ...
  <script type="text/javascript">
  function allowArrowKeys(event) {
  var keycode = event.which || event.keyCode;
  return keycode >= 37 && keycode <= 40;
  }
  </script>
 </h:head>
 <h:body>
  ...
  <icecore:jsEventListener events="onkeypress" handler="allowArrowKeys" actionListener="#{Bean.captureArrowKey}">
  ....
  <h:form>
  <h:inputText .../>
  <h:inputText .../>
  ....
  ....
  <ace:autoCompleteEntry ..../>
  </h:form>
  ....
  </icecore:jsEventListener>
  ...
 </h:body>
 {code}
 h2. Attributes
 {tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://res.icesoft.org/docs/v4_latest/core/comps/tld/icecore/jsEventListener.html].{tip}
 {panel}
 *events* Use this attribute to specify a comma separated list of JS events types.
 *handler* Use this attribute to specify the JS function that will filter through the captured events.
 *actionListener* Use this attribute to specify bean method that should be invoked.
 {panel}
  
 h2. Action listener event attributes
  
 The event instance passed as parameter to the action listener method will carry most of the information that the original Javascript event had. The class org.icefaces.impl.component.JSEventListener$JSEvent provides getters for the following properties:
  
 {panel}
 *captured* The ID of the element that captured the JS event.
 *target* The ID of the element that triggered the JS event.
 *type* The event type.
 *x* The X coordinate (for mouse events).
 *y* The Y coordinate (for mouse events).
 *alt* "Alt" key pressed.
 *ctrl* "Ctrl" key pressed.
 *meat* "Meta" key pressed.
 *shift* "Shift" key pressed.
 *keycode* The Javascript code of the key (for key press events).
  
 {panel}

© Copyright 2018 ICEsoft Technologies Canada Corp.