another problem or maybe only a question!?

Yesterday i fix the problem by updating my IE 8 to IE11.

After several hours spending time on trying to fix, i decided to work further today.

No i create a new Vaadin Project - Demo ( as the guy in the Demo video on youtoube has done that)
Rightclick to to the src folder , choose new – others – Vaadin Composite named it DemoThing.

I try to opend it with rightclick – openWith-- VaadinEditor (behind the Editor there is a text – Deprecated)
Nothing happend maybe because of deprecated

Then i tryed to create a VaadinDesign
src – rightclick - new - - others - VaadinDesign

That works fine - i can drag and drop components to the Grid.

But it will not ( anyhow for me) create the source code, so i can´t work with it.

The Java file looks like this

package com.example.demo;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.annotations.DesignRoot;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.declarative.Design;



  • This class is generated by Vaadin Designer and will be overwritten.

  • Please make a subclass with logic and additional interfaces as needed,

  • e.g class LoginView extends LoginDesign implements View { … }
    public class MessageThings extends AbsoluteLayout {
    protected com.vaadin.ui.Button find;
    protected com.vaadin.ui.Button search;

    public MessageThings() {;

the source Mode in the Designer looks like this

Button Button

thank you for your help


I’m not entirely sure what your problem is, but I think it might be that the new Vaadin Designer works differently than the old Visual Designer. In short, it will create a html file with the layout and a Java class that exposes the components to Java. Usually you want to extend the Java class, and add your logic - so in your case:

public class MessageThingsImpl extends MessageThings { // Your logic goes in this class public MessageThingsImpl() { find.addClickListener(...); } } I do recommend naming the design (the layout you make with the Designer) Something
or Something
. This way you’ll end up with structures like:

  • LoginDesign.html
  • extends LoginDesign (<- your code)


  • MainLayout.html
  • extends MainLayout (<- your code)

(In some cases you might also use the design class (e.g LoginDesign) directly in compositions or such.)

Please review to chapter 10 in the Book of Vaadin for some more details:

Did this answer your question?

Best Regards,

Thank you for your Help