Docs

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Docs

Frequently Asked Questions

“An error occurred while collecting items to be installed” when trying to install

Try to turn off “Contact All Update Sites” while installing (Help → Install New software → Contact All Update Sites.) Please see https://github.com/vaadin/designer-issues/issues/255

I have updated the Vaadin plugin, but I still can’t see the Designer.

Even if you already have the Vaadin Plug-in for Eclipse installed, you will still have to Help→Install New Software. Select the vaadin.com/eclipse update site from the list, and make sure Vaadin Designer is selected. (Unfortunately Help → Check for Updates is not enough, since Eclipse does not notice that new stuff is available.)

Installing Vaadin Designer worked, and it’s shown as Installed Software, but no menu item shows up.

Chances are Eclipse is running on Java 6 (1.6.x). Please install at least Java 7 (Java 8 recommended). Note that you can have multiple versions installed, so make sure Eclipse uses the correct one. Note that this might also require editing eclipse.ini, which might still point to your old JDK. If all else fails, try uninstalling the old JDK.

When I open or create a new design, all I get is a loading “spinner” forever.

If it "almost" loads - you can see the Designer toolbar, but the main area is loading:

Vaadin Designer uses an embedded browser to display the design, so that what you see is really what you get. The spinner indicates that the browser can’t communicate with Eclipse, probably due to:

  • Internet Explorer security settings (on Windows)

  • firewall settings

  • proxy settings

  • or other security software (anti-virus, "internet security", …​)

  • a combination of the above

First thing to try out in Eclipse is the experimental JxBrowser support, which can be enabled in the plugin settings. If you can’t find the culprit, try disabling each problem source individually.

If you get the operating system "busy cursor" (e.g "beachball" on OS X):

In rare cases, project settings become inconsistent when updating a plugin in Eclipse. Deleting the project settings seems to make everything work again.

We’re working on identifying the exact cause - let us know if you run into this, and send as much information as you can (e.g the project settings).

The External Preview only shows a blank page / spinner / connection error.

The browser or device you’re using is unable to connect to your Eclipse.

  • Your computer (with Eclipse) and the external browser / device must use the same network.

  • The network must allow connections between computers.

  • Your computed (firewall) must allow connections to Eclipse (you might have been asked something like “Do you want Eclipse to accept incoming connections?”)

  • Internet Exporer security settings may interfere

If you still have problems

  • The external browser or device might have a proxy set up that interferes.

  • If you are running a virtual machine (e.g VirtualBox, VMware) it might think it’s on a different network.

My design looks great when previewing on my phone, but not when running the project

Vaadin Designer automatically adds typical viewport settings used for mobile devices to the External Preview. Chances are you should probably do the same to your application (UI).

See https://vaadin.com/api/com/vaadin/annotations/Viewport.html

Can I create a Window with Designer?

You can create the content for a popup/sub-window, but you should create and open the Window instance in Java code.

In Vaadin, a Window is treated differently than other components (e.g it is not to be added to a layout), and Designer will have to treat this as a special case. This is something that might make into a future release.

I have problems making layouts behave as I want/look different in application.

Vaadin Designer layouting behaviour matches that of the framework - it is a good idea to familiarize oneself with how Vaadin layouting works, for instance there is a chapter in Book of Vaadin about the topic: https://vaadin.com/docs/v8/framework/layout/layout-overview

The first thing causing confusion, if you do not happen to know Vaadin works this way, is that if you have (for example) a 100% high VerticalLayout, it will split available space equally between components. This is seldom what you are looking for, instead you probably want one of tow things: 1) make the layout "auto" (-1px) high, so that it grows with the content or 2) make one component 100% and expanded (use the convenient quick-button in the info-bar for the selected component in Designer) to make it absorb all the space left by other components.

Also note that when you have a set size (%, px or whatever - not "auto"), components that are bigger than the space they have might overflow and cover other components.

A good way to figure out what’s going on is to resize the canvas and see how things move.

I use Linux and the Designer shows strange artifacts or does not render the Property view correctly.

The property view has some issues when rendering under SWT 3 and without Cairo. To improve the situation you can run eclipse with the following options to use GTK2 and Cairo.

env SWT_GTK3=0 GDK_NATIVE_WINDOWS=1 ./eclipse -Dorg.eclipse.swt.internal.gtk.cairoGraphics=true -Dorg.eclipse.swt.internal.gtk.useCairo=true

Also depending on your Linux distribution you might need to install libwebkitgtk-1.0-0 (Note: It needs to be a 1.x release, if you have a 2.x version install you still need to also install the 1.0 release!). To install use the following command:

sudo apt-get install libwebkitgtk-1.0-0

I use Linux and the Designer on IntelliJ fails to start with the error IPCException: IPC process exited. Exit code: 127

The embedded browser used by Designer on Intellij requires libXss and libCrypto to be available. Ensure that you have them installed.

Also, on some Debian systems the libraries might be installed in the wrong location resulting in that the embedded browser cannot find them, in that case you can create a symlink to the right location. For example:

libcrypto.so.1.0.0 -> ./x86_64-linux-gnu/libcrypto.so.1.0.2

Installing older releases

Instructions for Eclipse

  1. Start by selecting Help → "Install New Software…​" from Eclipse menu bar. Then do the following:

  2. Click on Add button to add a repository

  3. Give a name your repository and click on the Archive button. Locate the downloaded Vaadin Designer archive from your file system and complete the install.

designer installing older versions