Animation

Since 2.0

ICEFaces provides a way to animate standard JSF components as well by using the <ace:animation> attachable behavior. It works by nesting the <ace:animation> tag inside the component. Then, in this tag one specifies the event name that will trigger the animation. This event must be supported by the component. The TLD documentation of each standard JSF component lists which events are supported, which usually map to standard DOM events. The event name must be entered without the 'on' prefix. For example, for 'onmousemove' the value of the 'event' attribute must be 'mousemove'. Also the event attribute does not support EL expressions, its value can be only a literal defined in the template. Finally, the animation parameters are specified in the desired way, as described below.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

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.

- There are two different type of animations:

•    Predefined
•    Free form

* Predefined:
- When using predefine animations, developers don't need to define any properties. The following are the supported predefined animations.

In order to use predefined animations a developer needs to define an animation "name" as well as a type of "event". For example:

<h:inputText>  
    <ace:animation event="click" name="highlight" />
</h:inputText>

* Free form:
When using free form animation developers are allowed to define "to" and "from" properties on animation tag such as:

<h:inputText>
   <ace:animation event="change" from="{color:'black'}" to="{color:'red'}" />
</h:inputText>

or:

<h:inputTextarea>
   <ace:animation event="mouseover" from="{height:20, color:'#222'}" to="{height:100, color:'#CCC'}" />
   <ace:animation event="mouseout" to="{height:20, color:'#222'}" from="{height:100, color:'#CCC'}" />
</h:inputTextarea>

When using free form animation the name of an animation is not required, but it can be defined as "anim".

- With the current implementation "to" and "from" will only be applied when using "anim (free form)" type of animation, and if using predefine animation such as "fade" or "highlight" then "to" and "from" can be changed using the style classas shown above.

* Chaining:
Chaining can be achieved by registering animation on same event type (e.g.)

<h:panelGroup>
    <ace:animation event="click" name="fade"/>
    <ace:animation event="click" name="highlight"/>
    .....

* Synchronize execution of animations:
The predefine animations are based on the style class, they only look for specific properties so synchronization is not posible with more then one animations. However Synchronize execution of an animation can be achieved using free form animation by defining more then one properties on it(e.g.)

<h:panelGroup>
    <ace:animation event="click" from="{opacity:1, height:20}" to="{opacity:0, height:1}"/>
    .....

The above snippet will give blind up/down effect in parallel to fade in/out

Other Animation Attributes:
In addition to that the following attributes can be used on both types of animations "predefined" and "free form".