PaperStack add-on

Flow
1

Hi

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.


http://vaadin.com/directory#addon/paperstack

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

Tomi

2

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

go and check out the updated demo:
http://vaadin.com/directory#addon/paperstack

iPad support is next on my todo-list.

Tomi

3

Ooh, now that would actually feel intuitive to use!

4

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.setImmediate(true);
    paperStack.setPaperColor("#000000", "#5E5E5E");
    paperStack.setHeight("41em");
    //paperStack.setHeight(50,UNITS_PERCENTAGE); DOES NOT WORK : No display
    siteInformationPanel.addComponent(paperStack);

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 ?

Cheers,
Thomas.

5

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.

Tomi

6

Hi,

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.

Greetings,

Daniel