-
1. Re: Errai - Effects (animation) during page transition
mbarkley Sep 26, 2013 3:47 PM (in response to arnie-k)Hi arnie-k,
Are you asking how to do this with Errai Navigation? This isn't a directly supported feature, but you might be able to pull it off using the @PageHiding and @PageShown annotations.
Errai Navigation works by attaching a navigation panel to your page: any page transition simply causes the content of the panel to change. So I think the best way to slide between pages with Errai Navigation would be to slide the navigation panel off the screen right before your first page is removed (using @PageHiding) and then slide the navigation panel back on screen after your next page has loaded (using @PageShown).
I hope that gets you off to a good start.
Cheers,
Max
-
2. Re: Errai - Effects (animation) during page transition
jfuerth Sep 30, 2013 11:21 AM (in response to mbarkley)We're also interested in adding a declarative API for page navigation transitions. No work has been done on this yet, but pull requests are cheerfully reviewed and accepted! ;-)
Here's a brain dump of what I had in mind. This isn't a design document or anything; just some ideas to get the discussion started.
First, we'd change the logic in errai's Navigation class to create the "to page" widget earlier. Many animations will work better if both the "from page" and the "to page" exist during the transition, since parts of both may be visible simultaneously. The optimal time to create the to page would probably be right after the from page's @PageHiding method returns.
Then we'd need some new declarative API for specifying the transitions. Potential places to declare a transition effect:
1. On the class (specifying the animation to be used when going to the page):
@Page(effect = SlideRight.class)
public class PreferencesPage extends Panel {
...
}
2. On a TransitionTo or TransitionAnchor (override the animation specified on the target page):
@Page
public class PreferencesPage extends Panel {
@Inject @TransitionTo(effect = SlideRight.class)
public TransitionTo<PreferencesPage> toPrefsPage;
...
}
3. In the programmatic API of Navigation, TransitionTo, TransitionAnchor (would be used by the generated code that comes from the annotation processing).
Finally, we'd need an interface that the animated effects implement. We could model this after GWT's Animation or AnimationScheduler classes, probably adding an init() method that accepts the "from page" widget and the "to page" widget, as well as an inverse() method that returns the inverse effect, which we would use when navigating back through the transition when the user presses the back button.
-Jonathan