Details
-
Type:
New Feature
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 2.0-Alpha3
-
Component/s: ICE-Components
-
Labels:None
-
Environment:ICEfaces 2.0 w/ Sparkle Component Platform.
-
Affects:Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration
Description
For example, the Tab component could use effects for the following state-change:
- tab selection change (hide current tab pane contents, display newly selected tab pane contents)
For each of these component state-changes there are a finite number of effect-types that could be used that would result in an aesthetically pleasing result, such as fade-out + fade-in, cross-fade, slide up / slide-down, etc. To simplify customization by the app. developer, each component should have an attribute for each state-change that can be used to set the effect-type to be used for that state-change, such as "tabTransitionEffect='fade'".
In addition, each effect-type may have a time-interval or period associated with it to adjust the duration that the effect takes to complete. In order to simplify the customization of the time intervals by the application developer, and ensure a consistent reaction-time for all components on the page, we should identify pre-defined values for adjusting the effect time, such as "fast, normal, slow" that can be defined via an attribute on the component, such as "tabTransitionEffectSpeed='fast'.
Each theme could provide a definition for the standard effect labels ("fade", "xfade", "slideX", "slideY", etc.) and speed/durations ("slow", "normal", "fast") that would provide the desired effect behaviors for that theme. A master/default set could be used if the theme did not provide an implementation of its' own to ease supporting effects with custom themes without forcing each theme to implement the effects configuration code. While it would be nice to be able to use CSS or perhaps XML to define the theme effects, initially an pure JavaScript implementation would suffice.
Issue Links
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
effect demos added.
Command: Commit
Adding: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\showcase\test\web\calendarEffect.xhtml
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\showcase\test\web\index.html
Adding: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\showcase\test\web\tabsetEffect.xhtml
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\showcase\test\web\calendarEffect.xhtml
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\showcase\test\web\index.html
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\showcase\test\web\tabsetEffect.xhtml
Completed: At revision: 22299
For reference, here's a reference of the decisions we have taken:
1. Need to rename the new component as soon as possible as the current name collides with the 1.8 ice:effect component. We had agreed that <ice:animation> was a good name, so please proceed with this change. Also note the namespace should be "http://www.icefaces.org/icefaces/components".
2. Proceed with adding the following attributes on the animation tag (no JSON required!):
- to
- from
- duration
- easing
- reverse
3. Using two or more <ice:animation> tags in a row for implied chaining seems like a good solution. We can then later possibly add another tag ("<ice:group>" ??) that could be used to synchronize chained animations to run simultaneously, etc.
For now, we will not bother with a direct object reference attribute (effectObj, etc.) since this would break POJO and we are also not certain of it's usefulness since the multiple attribute approach + CSS provides a lot of flexibility on its own.
4. Support for h: comps. We will support any std. or 3rd party component that supports client behaviors, and will not do anything beyond that to support 3rd party comps. with the new <ice:animation> component. The h:panelGroup supports client behaviors so folks can wrap any other comps. with it if they want to apply animations to it.
Following attributes and their support has been added.
- to
-from
-easing
-iterations
Command: Commit
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\resources\org.icefaces.component.animation\animation.js
Adding: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\Anim.java
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehavior.java
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehaviorHandler.java
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\Effect.java
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehavior.java
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\Anim.java
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\resources\org.icefaces.component.animation\animation.js
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\Effect.java
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehaviorHandler.java
Completed: At revision: 22461
Duration attribute and its support added.
Command: Commit
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehavior.java
Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehaviorHandler.java
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehavior.java
Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\animation\AnimationBehaviorHandler.java
Completed: At revision: 22464
Also, effects could sorted into 3 main categories: showing, hiding, getting attention. So, for example, fade in would be a showing effect, and fade out would be a hiding effect, and pulsate would be a getting attention effect. It would be nice if applications could simply ask for a hiding effect, and be given some default one to use. Maybe this could be tied in with the theme, so that each category would have a default in the theme.