TabSheet rename

Vaadin 6 / 7 / 8 Framework UI
1

I’m looking for a way to allow a user to doubleclick or rightclick on a tab in a tabSheet and be able to edit the caption of the tab. Anyone know how I would go about doing that?

2

Hi,

For the doubleclick/rightclick you will most likely need to extend the client side
VTabSheet
 and override the renderTab method and attach a new event handler to each tab. There you might also then generate a new input element for the text and send that back to the server and update the tab caption there.

So basically you need to extend TabSheet on the server side and VTabsheet on the client side, and add the extra functionality.

If you need some more info how to get started, just ask.

Cheers,
Jouni

3

Yeah more info would be great, since I haven’t extended any client side component before.

Thanks for the quick reply,
Matt

4

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