how to call visual designer class into default claas created at the time pr

Below is the code from default created class
package com.example.documentmanager;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class DocUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = DocUI.class)
public static class Servlet extends VaadinServlet {

protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();

    Button button = new Button("Click Me");
    button.addClickListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            layout.addComponent(new Label("Thank you for clicking"));


Could someone please help me out on this topic?
This is my first application using Vaadin framework.

In eclipse create a new class by File->New->Other and select Vaadin Composite.

When you are done creating the view with the Visual Designer (Composite) then in your UI.init() -method do setContent(new MyComposite()) and the view will be shown.