Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Frequently Asked Questions

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

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

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

  • The network must allow connections between computers.

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

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.

How can I download the Designer for offline installation?

Eclipse

The Eclipse runtime allows mirroring of update sites locally. Run the Eclipse executable with these parameters:

eclipse -nosplash -application org.eclipse.equinox.p2.artifact.repository.mirrorApplication -source https://vaadin.com/eclipse -destination my-local-updatesite

After the command finishes the folder can be added as a local update site.

IntelliJ

Designer for IntelliJ packages can be downloaded as zip files from https://plugins.jetbrains.com/plugin/9519-vaadin-designer and installed via the Install plugin from disk…​ option.

How do I uninstall Vaadin Designer?

Eclipse

If you want to remove Vaadin Designer from your Eclipse, do the following steps:

  1. In the menu, go to Help > Eclipse Marketplace.

  2. Select the Installed -tab.

  3. Find “Vaadin Plugin for Eclipse” on the list.

  4. Next to the Change -button, open the drop-down and press the Uninstall -button.

  5. Vaadin Plug-in for Eclipse and Vaadin Designer should be preselected. Press Confirm to proceed.

  6. Press Finish Button.

  7. You’re prompted to restart the IDE. Press Restart Now.

IntelliJ

If you want to remove Vaadin Designer from your IntelliJ IDEA, do the following steps:

  1. Go to the plugin list.

    1. On Windows: menu:[File > Settings > Plugins].

    2. On Linux: menu:[File > Settings > Plugins].

    3. On macOS: Choose menu:[IntelliJ IDEA > Preferences > Plugins].

  2. Select the Installed -tab.

  3. Select Vaadin Designer from the list.

  4. Next to the Disable -button, open the drop-down and press the Uninstall -button. Confirm the selection.

  5. Press Restart IDE and wait for the IDE to start up again.

How do I do responsive views with the Designer?

Creating responsive views with Designer is pretty much the same question than “How to create responsive applications with Vaadin”. Vaadin offers a training course on responsive design for Vaadin 8 https://vaadin.com/learn/training/responsive-layouting, and have some resources online as well: Responsive Themes. For Vaadin 10+, creating responsive applications is the same as for front-end applications, so any materials available online are directly applicable. For example https://developers.google.com/web/fundamentals/design-and-ux/responsive/ is a good resource to get started.

I have a perpetual license for Designer 2, but after updating to Designer I’m asked for a Pro subscription?

Previously it was possible to either buy a Pro subscription, or purchase a single license for a specific major version of a product. Since Vaadin 10, the single licenses are discontinued. To use Designer after the trial period, a valid Pro subscription is required.

As IDEs often auto-upgrade plugins, it might be difficult to stay in the 2.x version. To prevent this follow these instructions:

Eclipse

1) Uninstall Vaadin Designer if you already updated

2) Remove the https://vaadin.com/eclipse update site

3) Add the https://vaadin.com/eclipse/designer2 URL as an update site, and install Designer 2

IntelliJ

1) Uninstall Vaadin Designer if you already updated

2) Add the https://cdn.vaadin.com/vaadin-designer/intellij-release-2/updatePlugins.xml URL as a repository and install Designer 2

How do Vaadin 8 and Vaadin 10+ designs differ?

Vaadin 8 designs are XML stored in .html file. They contain custom markup that’s read at runtime by Vaadin and converted into in-memory component tree. The actual markup is never sent to the browser. Designer for Vaadin 8 reads the markup and uses the Framework to render it in the browser in editable format.

Vaadin 10+ designs are modern HTML. Technically the design is an independent Polymer template file. The markup itself isn’t converted at runtime, but is instead sent to the browser to be rendered natively. Designer for Vaadin 10+ wraps the markup and renders it in the browser in editable format.

While Vaadin 8 and Vaadin 10+ designs aren’t directly compatible, they have a very similar structure.

Simple form design in Vaadin 8

<vaadin-vertical-layout>
 <vaadin-text-field caption="Last Name"></vaadin-text-field>
 <vaadin-text-field caption="First Name"></vaadin-text-field>
 <vaadin-button plain-text>
   Save
 </vaadin-button>
</vaadin-vertical-layout>

Simple form design in Vaadin 10+

<vaadin-vertical-layout>
  <vaadin-text-field label="First Name"></vaadin-text-field>
  <vaadin-text-field label="Last Name"></vaadin-text-field>
  <vaadin-button>
    Save
  </vaadin-button>
</vaadin-vertical-layout>

In simple cases elements API is similar. Complexity starts to appear when creating more complex views and using bigger components.

For Vaadin 8 designs there is a limited styling support with the theme variables. Complex styling requires usage of the styleName variable and separate theme file. In Vaadin 10+ designs HTML format supports complex styling with rules, which are directly added to the template. The <style> tag can include any CSS for that design.

Same rule is also applied for adding behavior to designs. In Vaadin 8 designs all imperative code must be included in the companion file. In Vaadin 10+ design can contain any JavaScript inside itself.

Installation issues

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

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

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

Chances are Eclipse is running on an older version of Java. Install Java 11 or later. You can have multiple Java versions installed, so make sure Eclipse uses the correct one. This might also require editing eclipse.ini, which might still point to your old JDK. If all else fails, try uninstalling the old JDK.

If you get the operating system "busy cursor" (e.g "beach ball" 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.

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

Vaadin Designer layout behaviour matches that of the components - it’s a good idea to familiarize yourself with the appropriate component documentation.

I use Linux and the Designer shows strange artifacts or doesn’t 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 fails to start with the error: IPC process exited. Exit code: 127

The embedded browser used by Designer 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 can’t 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

By default, some Linux distributions don’t have the correct libraries installed that are required by Chromium. Check the logs and install the appropriate libraries. For example, if you see these error messages:

There are next missing dependencies:
	browsercore64 => libgconf-2.so.4
	libbrowsercore64.so => libgconf-2.so.4

The missing library is libgconf-2.so.4. Install the library manually:

sudo apt-get install libgconf-2-4

Make sure you are running Eclipse with an up to date version of the JRE. At least some versions of OpenJDK and Oracle JDK 11 are known to cause crashes when running Designer.

Does Vaadin Designer support Java 11?

  • Starting from Eclipse 2018 running Vaadin Designer with Java 11 isn’t supported.

  • From IntelliJ 2018.2 upwards Designer supports projects running Java 11.

To run Eclipse with a specific Java version: * Open your eclipse.ini file in your Eclipse folder * Modify or add the -vm parameter as instructed in the Eclipse wiki: https://wiki.eclipse.org/Eclipse.ini#Specifying_the_JVM

See https://github.com/vaadin/designer/blob/master/RELEASE-NOTES.md#requirements for more details on supported versions.

Does Vaadin Designer support Maven multi-modules project structures?

Yes. A Maven multi-module project can also have different Vaadin versions in separate sub-modules.

In case a module (A) want to re-use the same node_modules dependencies from another module (B), you can create project-root/[module_A]/.vaadin/designer/project-settings.json to define node_modules location.

{
  "--node.modules.project.name": "[module_B]"
}

483A9EED-BA74-4206-8BFE-C7B859A55435