Add paging animation to CellTable in GWT

Question

I'm trying to come up with way to animate a page change on a CellTable in GWT which would work the same way as changing tabs on (http://gwt.google.com/samples/Showcase/Showcase.html#!CwTabLayoutPanel). In other words the new table page would slide in from the top (or bottom for that matter). The CellTable uses a SimplePager to initiate the page change at the moment.

Thanks, Matyas

Answer 1

There's no way to do that in simple way, because to make slide animation you have to have at least 2 already rendered pages: first one that is shifted out and second one that replaces first. In showcase example with animated tabset all tabs are rendered and are ready to use, but CellTable with SimplePager has no rendered pages except visible one - new page is simply rendered just directly into CellTable body.

So, if you really want to create such effect using CellTable and Pager, you have to implement your own pair of CellTable and Pager that will do following:

1. Keep 2 containers with rendered rows: one is visible, second is hidden.
2. CellTable body should have viewport (just a <div> with "overflow:hidden" CSS rule) that will have both containers inside.
3. When pager change page, you have to force CellTable to render new rows into hidden container.
4. When new data was rendered, place your hidden container into proper position to make illusion that it continues visible one, and make it visible;
5. Provide animation that will move both containers into new positions. I'd recommend do not use coding for animations (e.g. Timer) - much better and effective to use CSS3 transformation rules (see "CSS3 transform Property" and/or "CSS3 transition Property").
6. When animation finished, make first container hidden and switch pointers to visible and hidden containers - so that you return to initial state.

Hope this helps.