How do I display a table in Vaadin?

Question

I've got two classes in my Vaadin 7 project. I'm having a hard time displaying the table in my main UI class. MyTable.java and DocUI.java. How can I get my table to show/display in DocUI.java when I load localhost:8080?

public class MyTable extends DocUI{

public MyTable() {

    Table table = new Table("The Brightest Stars");

    table.addContainerProperty("Name", String.class, null);
    table.addContainerProperty("Mag", Float.class, null);

    Object newItemId = table.addItem();
    Item row1 = table.getItem(newItemId);
    row1.getItemProperty("Name").setValue("Sirius");
    row1.getItemProperty("Mag").setValue(-1.46f);

    table.addItem(new Object[] {"Canopus", -0.72f}, 2);
    table.addItem(new Object[] {"Arcturus", -0.04f}, 3);
    table.addItem(new Object[] {"Alpha Centauri", -0.04f}, 4);

    table.setPageLength(table.size());
    }
}



public class DocUI extends UI {

// new addition 4/28
public String[] userString = { "jacob.smith@example.com",
        "isabella.johnson@example.com", "ethan.williams@example.com",
        "emma.jones@example.com", "michael.brown@example.com" };

// create combo box
public ComboBox comboBox1 = new ComboBox("Random Combo Box") {

};

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

@Override
protected void init(VaadinRequest request) {

    final VerticalLayout layout = new VerticalLayout();

    layout.setMargin(true);

    setContent(layout);

    Button button = new Button("Click Me");
    Button button2 = new Button("I am button 2");

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

    @SuppressWarnings("deprecation")
    FieldGroup form = new FieldGroup();
    layout.setSizeFull();
    layout.addComponent(button);
    layout.addComponent(button2);
    addComponent(MyTable.table);


    //new addition 4/28

    layout.addComponent(comboBox1);     
    comboBox1.setInputPrompt("Select a value");         
    comboBox1.addItems("--add new user--", "jacob.smith@example.com", "isabella.johnson@example.com","ethan.williams@example.com","emma.jones@example.com","michael.brown@example.com");

}
}

Answer 1

Do you know Java ? Don´t extend from UI in MyTable.

public class MyTable{

private Table table;

  public MyTable() {

    this.table = new Table("The Brightest Stars");
    /* do something with table */
  }

 public function getTable() {
   return this.table;
 }
}

Know you can create a MyTable-Object and then use it to getTable and add it to the layout.