Connecting Vaadin design class to Vaadin Main UI class .

Hi all,
I am new user of Vaadin 7.4.1(Latest Version of Vaadin).I made a vaadin design class(That extends the absolute layout) and prepared a user interactive page through visual editor of Vaadin now I am trying to connect that page to my Main UI Java class of the project but not able to connect it.
In previous version through Vaadin composite class there are many tutorials are provided but for Vaadin design class not able to find any solution.
Can anyone please provide the code for this?
Help will be appreciated :slight_smile:

let’s say your src folder structure somthing like this :

  | \\that extends com.vaadin.ui.UI and  inner class  you write your  servlet configrations on.
  |_Design.html  \\ for vaadin designer
  |  \\ generated with Vaadin Designer

go to init(VaadinRequest vaadinRequest) method – and create an object From your generated Class and use setContent(object); or read about “Book of Vaadin " Navigation” to apply advanced feature.

init(VaadinRequest vaadinRequest){
      Design design = new Design();

if you looking for coding events or access to generated Components into your Design Class you can use MVP,
or simply do somthing like this:

init(VaadinRequest vaadinRequest){ Design design = new Design(); setContent(design); design.myButton.addClickListener(()->{"U Just Clicked Me ..");}); } i hope that is what you looking for.

init(VaadinRequest vaadinRequest){
Design design = new Design();
setContent(VaadinRequest vaadinRequest);

Insted of the above code I am passing Desgin object of the vaadin Design class as below.

init(VaadinRequest vaadinRequest){
Design design = new Design();

Now it is working fine.
Thank you very much for the help.I appreciate it. :slight_smile:

It’s my pleasure, and i’m sorry for above mistake.
i will edit my comment. :slight_smile:

Can you provide me some input on below concern?
Please help me if possible.
I made two Vaadin Design class(Design1 and Design2) and want to navigate from design1 page to design2 page by a button click.
First page I called in Main UI class through below code.

init(VaadinRequest vaadinRequest){
Design1 design = new Design1();
Design1.button.addClickListener(new Button.ClickListener() {


public void buttonClick(ClickEvent event) {

// TODO Auto-generated method stub“You Just Clicked”);

////From this point I want to navigate to design2 page.


Is it possible to assign a encrypted URL to a new Vaadin Design class and navigate to it?

firstly it’s n’t page, cuz vaadin is a based on SPA your whole application is a single page so what you need is just replacing design1 object by design2 object, what vaadin do behind the scenes is just JS so …

//inside your event method you can create an object and use setContent() again somthing like


i highly recomanded for you to take a look on the book of vaadin.
cuz all you need is there and can explain better than me …

Yeah just understood the concept of Single Page Application.
Thanks for the guidence.It’s working again. :slight_smile:

that is greate …
now i have one ques for you … how i can write this "
". smilly face just like you did ?

Happy :slight_smile: " : + ) "
Sad :frowning: " : + ( "
Winking :wink: " ; + ) "
Toung sticking out :stuck_out_tongue: " : + P "
Surprised =O " = + O "
Yelling :open_mouth: " : + O"
Cool B+ " B + ) "
Undecided +\ " : + \ "
Laughing :smiley: " : + D "
Crying :cry: " : + ’ + ( "
Mad X( " X + ( "
Confused o_O " o + _ + O "
Above are the most common expressions that a programmer uses when get stuck.
To use the above smilly use the symbol within double quotes and remove the + sign and attach rest of the symbols without giving space.
Do not know if all smilly will work.

Warm Regards
Abhinav Mishra

ahaa i get it … Thank you !