Clever Geek Handbook

Add paging animation to CellTable in GWT

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

Thank you, Mathias

+3


source to share


1 answer


There is no way to do this in an easy way, because in order to create a slide animation you must have at least 2 pages already made: the first one that is shifted and the second one that replaces the first one. In the animated tabset example, all the tabs are displayed and ready to use, but the CellTable with SimplePager has no display pages other than the visible ones - the new page just maps directly to the body of the CellTable.

So, if you really want to create an effect like this using CellTable and Pager, you should implement your own CellTable and Pager pair that will do the following:



  • Store 2 containers with highlighted lines: one visible, one hidden.
  • The body of the CellTable must have a viewport (just a <div> with an overflow: hidden CSS rule) that will contain both containers.
  • When the page change pager, you have to force the CellTable to display newlines in a hidden container.
  • When the new data has been displayed, place your hidden container in the correct position to give the illusion that it is still visible and make it visible;
  • Provide an animation that will move both containers to new positions. I would recommend not using coding for animations (eg Timer) - it is much better and more efficient to use CSS3 transform rules (see " CSS3 transform Property " and / or " CSS3 Transition Property ").
  • When the animation is complete, create the first container and pointers to the visible and hidden containers to return to their original state.

Hope it helps.

0


source






More articles:


All Articles