At this point the basic MyComponent has no functionality except inherited basic component features (we’ll add functionality in following articles):

Java

The main thing to notice here is that it inherits , which is the most common case (unless it will contain other components, see separate article about component containers). The component will automatically have the basic component features, such as size and caption.

At this point our basic client-side widget will just statically render some text:

Java

package com.example.mycomponent.client;
import com.google.gwt.user.client.ui.Label;
public class MyComponentWidget extends Label {
  public static final String CLASSNAME = "mycomponent";
  public MyComponentWidget() {
    setText("This is MyComponent");
}

Notice that this is actually a plain GWT widget that can be used as any other GWT widget. It’s a good idea to set a style name from the start, so that the component can be styled.

Now all we have to do is connect the component to the widget using a Connector:

The crucial Connect annotation is what actually tells the framework what is connected where - do this first, since it’s easy to forget.

In createWidget() use GWT.create() instead of new whenever possible, since it allows for some flexibility that might come in handy later on.

Though this is optional, you might also want to override getWidget() so that you can narrow it’s return type from Widget to your actual implementation class:

Java

@Override
public MyComponentWidget getWidget() {
  return (MyComponentWidget) super.getWidget();
}

The package structure usually looks something like this:

• com.example.mycomponent

  • MyComponent.java

• com.example.mycomponent.client

  • MyComponentConnector.java

  • MyComponentWidget.java

Finally, compile the widgetset, and make sure the widgetset is defined with the @Widgetset annotation in the UI class:

Java

If you are using web.xml, it should contain the widgetset parameter:

XML

  <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
  <init-param>
    <description>Vaadin UI</description>
    <param-name>UI</param-name>
    <param-value>com.example.myexampleproject.MyApplicationUI</param-value>
  </init-param>
  <init-param>
    <param-name>widgetset</param-name>
    <param-value>com.example.mycomponent.MyComponentWidgetset</param-value>
  </init-param>

Next have a look at the articles covering shared state and RPC, to learn how to add more functionality to the component.