Loading...
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
TUTORIAL

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

TabSheet rename

Matthew Walsh
9 years ago May 01, 2012 8:01pm
Jouni Koivuviita
9 years ago May 02, 2012 9:16am
Matthew Walsh
9 years ago May 02, 2012 2:50pm
Jouni Koivuviita
9 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:

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

MyTabsheet.java

@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
					.get("captions");
        for (String key : captions.keySet()) {
          int tab = Integer.parseInt(key);
          String caption = (String) captions.get(key);
          getTab(tab).setCaption(caption);
        }
      }
    }

}

VMyTabsheet.java

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);
      captions.clear();
   }

}

MyTabsheetWidgetset.gwt.xml

<?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">
<module>
	<inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
</module>

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