Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

TabSheet rename

Matthew Walsh
10 years ago May 01, 2012 8:01pm
Jouni Koivuviita
10 years ago May 02, 2012 9:16am
Matthew Walsh
10 years ago May 02, 2012 2:50pm
Jouni Koivuviita
10 years ago May 02, 2012 9:05pm

Here's a quick rundown of the things you need to do. I recommend that you use Eclipse to make things easier, such as the widgetset compilation.

It's a recommended practice that you create your customized components in a separate project and export the component as an add-on which you then use in your real project.

So first, create a Vaadin project in Eclipse (or just a regular Dynamic Web Project with the Vaadin jar).

Then create a package & class/file structure along these lines:

          -MyTabsheet.java  [i]the server side part of your component[/i]
          -MyTabsheetWidgetset.gwt.xml  [i]GWT definition which just inherits the DefaultWidgetset[/i]
            -VMyTabsheet.java  [i]the client side part of your component (needs to be under a package named 'client'[/i]


@ClientWidget(VMyTabsheet.class)  // Glue the server and client parts together
public class MyTabsheet extends TabSheet {

    public void changeVariables(Object source, Map<String, Object> variables) {
      if (variables.containsKey("captions")) {
        Map<String, Object> captions = (Map<String, Object>) variables
        for (String key : captions.keySet()) {
          int tab = Integer.parseInt(key);
          String caption = (String) captions.get(key);



public class VMyTabsheet extends VTabsheet {

   protected void renderTab(final UIDL tabUidl, int index, boolean selected,
            boolean hidden) {
      super.renderTab(tabUidl, index, selected, hidden);
      Tab tab = tb.getTab(index);
      // Add event handler and logic for showing the text input on top of the tab, and call the following methods when needed

   private Map<String, Object> captions = new HashMap<String, Object>();

   private void updateTabCaption(int index, String newCaption) {
      captions.put(index+"", newCaption);

   private void sendCaptionsToServer() {
      client.updateVariable(id, "captions", captions, true);



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
	<inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />

Then recompile the widgetset - in Eclipse just click the "Compile Vaadin widgets" button in the toolbar (I think the IDEA plugin also does this nowadays).

Remember to define the widgetset parameter in your web.xml also to use the new widgetset. Then just create a small test app where you use your new component and test it out.

Hope this gets you started. There's a whole chapter about GWT widget development in the book, although I think it's a bit outdated currently, which should give more in-depth info about all this: https://vaadin.com/book/-/page/gwt.development.html