FancyLayouts AddOn

FancyLayouts @ Vaadin Directory

I just updated FancyLayouts add-on to 1.0.0 alpha 3 version. These alpha versions are for Vaadin 7 only. Older 0.x series versios are still available for Vaadin 6.x, but (most likely) I will not update those versions anymore.New version is alpha version, so I am still breaking APIs and changing features.

Try it out (use Chrome/Safari/Firefox/Opera):
online demo

I have mainly tested this with Chrome, anyhow it should work with all browsers. IE 10 support will be added as soon as GWT and Vaadin will start to support it. For older IEs these components should looks same, but all transitions will be always disabled on client side. Implementing transitions for older IE would be waste of time.

The main idea behind the add-on is to offer easy way for developers to add nice transitions when content in your Vaadin application changes. Usage of transitions can make a big difference to user experience of your application!

This thread shall be the official Q&A thread for this plug-in. So please try it out, and tell me what you think, thanks!


I can’t seem to be able to get this from the Maven Addon Repository


<Error><Code>NoSuchKey</Code><Message>The specified key does not exist.</Message><Key>vaadin-addons/org/vaadin/alump/fancylayouts/1.0.0.alpha1/fancylayouts-1.0.0.alpha1.pom</Key><RequestId>A789AC1A3EB39CDD</RequestId><HostId>gd40zX42Ym+hWe6rAwJ1LM4TIgWaFY9UbMFNluj4mleaAHTPSUKOW8Ska3Fr7CUb</HostId></Error>


Hi ,

I am trying to install your fancylayout (which is just Awesome :slight_smile: ) in Eclipse. I am using Vaadin 6. Could you guide me how I need to install it ?

Thank you !

Maven issues:

Hopefully Maven issues have been now resolved with 1.0.0-alpha4.

Vaadin 6 installation:

Currently this on only developed for Vaadin 7. Last version for Vaadin 6 was 0.2.1, you can download it from Directory page. Just follow normal addon installation process.

It’s sad to hear the vaadin6 version can not work for maven. Did you try to rename the groupId and artifactId of Ur add-on? Because your naming rule is quite different with other add-ons.

org.vaadin.addons animator 1.6.6

Hi Sami,

Vaadin client and client compiler are still in the default ivy configuration with the .5 alpha, would be nice to have them only in widgetset conf instead,

First, thanks you for good add-on.
I have a problem :
I can not use fancypanel as you used in demo.
Please give some sample code in here or add-on page.

Ebrahim Pasbani


The artifactId in the maven is “fancylayouts-addon”. The jar is created as “fancylayouts-addon-1.0.0.alpha5” in maven_home.

I downloaded addon from here. The file’s name is “FancyLayouts-1.0.0.alpha5”

FancyNotifications Hello World?
Not having much time, I tried to improve notifications on my V7.1 app by using the one from here. I pasted the ivy config, reloaded etc. and simply created a new FancyNotifications() instance, then called showNotification(null, “Hello World”) on it to try the simplest case, but nothing shows. I then tried placement, timeouts etc., but so far no show… any suggestions?

Update: make sure the FancyNotification instance is added to a layout somewhere!


nice addon!

one little problem with FancyImage: when I try to feed a FileResource I get:

com.vaadin.server.ConnectorResourceHandler error
WARNUNG:  (13) did not handle connector request for null/imagename.jpg

I dont understand where the “null” directory comes from, it should be “images”.
But it works fine with External and ThemeResouces.

I downloaded the FancyLayouts add-on via ivy, and then did a Widgetset compilation from eclipse.
The GWT logs appear to include FancyLayouts.
Hopwever upon restarting my server and refreshing my browser page I get this error displayed:

Widgetset does not contain implementation for org.vaadin.alump.fancylayouts.FancyPanel. Check its component connector’s @Connect mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions.

Update: after fixing missing widgetset entry in web.xml this got resolved.


First of all, awesome plugin. Just what I needed.

However, I am having some technical issues with the FancyImage component.

I am trying to showResource(Resource) . It works when Resource is a ExternalResource. However, When I try to set my own Resource Impl (which works fine with Vaadin image) it doesn’t work.

Here is the error I can see on the log:
FancyImage (111) did not handle connector request for null/ff8081813cf9b67c013d02acd5f60005.jpg

Any clue ?

FancyLayout does not seem to work with FileResources. I am getting the null error as well. In regards to the the issue where “widgetset is not implemented”. Load the GWT toolkit. Clean ivy dependencies. Also edit pom.xmp to remove compiled widgets. Refresh ivy dependencies and then it will work.

Except for FileResources

Really excellent add-on - great work on this.
I’ve been using the FancyNotifications component, which mostly works and always looks great.
Sometimes, though, a notification gets ‘stuck’ - i.e. it doesn’t close (I have it set to timeout after 7secs) and clicking it won’t close it (I have it set to clickOnClose(true)), so it stays there for the life of the app!
Is this something you or others have seen? Is there a way to ensure there’s always a way to close the notification?

Just a little bit more on the FancyNotification not closing:

One of the scenarios where the notification doesn’t auto/click close is if the View is changed before the notification’s timeout has elapsed. This seems to orphan the listeners for timing and click, and so leaves the notification ‘stuck’.
I got 'round this by adding a LayoutClickListener to the FancyNotifications instance, like this:

noti = new FancyNotifications();
noti.addLayoutClickListener(new LayoutClickListener()
{ @Override
public void layoutClick(LayoutClickEvent event)
if (event.getButtonName().equalsIgnoreCase(“left”))

[/code] This doesn’t address the timer issue, but that’s ok, as the View’s been changed, it would be expected the notification would stick around until it was visible again - then the user can click on it to close.

Hope this helps anyone who uses FancyNotifications and multiple Views/Portlets - it’s a great add-on for notifications - everyone should use it!



Thanks for this great addon.

I’m using Notifications, and i have some improvements …

1 - Display problems
When displaying notification, if there is a modal window, the notification is behind … A greater z-index (>10000) solve the problem.

2 - Easiest use
Maybe it’s possible to have a static class, as the default notification system … Very easier to use for simple notifications ! And keep the instanciable system like today for complex notifications.
The easiest way to show and ERROR for example will be like : Fancynotifications.showError(title, description); with few more methods with icon.
This way automaticaly attach the component to the UI content.
No ID specified, because in this mode, no listeners or ehanced functions, only basic display.

3 - Theme that
Pre-package some themes (CSS + default icons) will be a good thing i think … Like Info (blue), error (red), warning (orange), success (green), tip (yellow), default (grey)

I maybe can help you if you want !

What do you thing of that ?

One of the previous version gave the possibility to have HTML in the FancyNotification content. This has been since removed. Would it be possible to re-add this? It was really helpful. Great addon anyways, cheers.

First thank you very much for the nice addon.

However I encounted an issue in FancyCssLayout.
I tried to add a Table, but the content of the table is not shown, only the column headers are shown.

What should I do?

I found that, calling the setWidth("100%) function of the Table cause the issue. removing that function call fix the problem upto a certain level, but now the propblem is, the Table is not sized to fit the window height.

I have a similar problem with setting e.g. a VerticalLayout to full size that it gets not scaled up but instead shows only the minimum size. The debug log also says that some components have a “Vertically zero size”. Does anybody have a hint how to solve this issue?