PaperStack add-on


Just released a new add-on component to Vaadin Directory. PaperStack is a component container with a nice transition effect between its subcomponents. The effect simulates leafing through a stack of papers.

It’s still lacking some features such as navigating backwards and triggering the page change externally. I’ll possibly implement these features later on.


Done and done.
Added backwards navigation and the server side API for navigating as well.

go and check out the updated demo:

iPad support is next on my todo-list.


Ooh, now that would actually feel intuitive to use!

Hi Tomi,

Thank you for this beautiful addon.

I am trying to use it in my application, however, it seems impossible to use setSizeFull() method (no display). I can just use the css approach with setHeight(“40em”) for instance. When I use percentage it displays nothing.

I use it into a Panel (siteInformationPanel) with this kind of code :

    PaperStack paperStack = new PaperStack();
    //paperStack.setSizeFull(); DOES NOT WORK : No display
    paperStack.setPaperColor("#000000", "#5E5E5E");
    //paperStack.setHeight(50,UNITS_PERCENTAGE); DOES NOT WORK : No display

The panel is in a horizontalSplitPanel in the first component : setFirstComponent(siteInformationPanel);

==> Do you have any idea how I could fix it ?

On top of that, I’d love to be able to increase the size of the right hand corner that shows to the user that he can turn it like a page in a book. Because I tried with some of my friends, and it is not obvious on my application (or for instance make it blink or move like a gif, or on mouse over, make it becomes bigger, or etc…).

==> Do you have any idea on how I could increase, or make it more obvious that it is working like a book ?


Hi Thomas. Unlike VerticalLayout for instance, PaperStack can’t determine its own size from its subcomponents’ sizes because they’re not all visible at the same time. PaperStack doesn’t re-adjust it’s on size after every page turn so it must have a predefined size. Your wrapper layout (siteInformationPanel) propably doesn’t have a defined height (its height is 0) so PaperStack that has been set SizeFull will also have a height of 0 pixels.

Size adjustment of the the right hand corner should be easily added as a feature because it just requires a few attributes being sent to the client-side implementation. I’ll look into this.



thanks for the wonderful add-on.

I’ve found an issue with version 0.8.1:

Paperstack#replaceComponent() may move the currentComponentIndex one position up if this index is higher than the index of the replaced component. This issue comes from calling #removeComponent() in #replaceComponent(). In my code I worked around that by remembering the current component before calling #replaceComp() and than set it back evtly.