GWT Tab panel close

I am building an application in GWT. I have a decorated tabpanel in my application.Where in am adding panels to it dynamically.Now i want to achieve the closing of these tabs. I开发者_如何学JAVA want to add a close image to the tab bar and event to that image for closing. I am using UIbinder.

the working code is like that;

    private Widget getTabTitle(final Widget widget, final String title) {

    final HorizontalPanel hPanel = new HorizontalPanel();
    final Label label = new Label(title);
    DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");

    ImageAnchor closeBtn = new ImageAnchor();
    closeBtn.setResource(images.cross());

    closeBtn.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            int widgetIndex = tabs.getWidgetIndex(widget);
            if (widgetIndex == tabs.getSelectedIndex()) {
                tabs.selectTab(widgetIndex - 1);
            }
            tabs.remove(widgetIndex);               
        }
    });
    hPanel.add(label);
    hPanel.add(new HTML("&nbsp&nbsp&nbsp"));
    hPanel.add(closeBtn);
    hPanel.setStyleName("gwt-TabLayoutPanelTab");
    return hPanel;
}

In order to add tab,

    public void addTab() {
    TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
    tabs.add(tw, getTabTitle(tw, "Writing"));
    tabs.selectTab(tw);
}

You'll going to need, ImageAnchorClass

public class ImageAnchor extends Anchor {

public ImageAnchor() {
}

public void setResource(ImageResource imageResource) {
    Image img = new Image(imageResource);
    img.setStyleName("navbarimg");
    DOM.insertBefore(getElement(), img.getElement(), DOM
            .getFirstChild(getElement()));
}}

It isn't supported natively in GWT.

You can manually try to add it.

Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1

I haven't tried it personally, but look at the solution by gregor (last one).

You kinda need to do something along the lines of this

GWT Close button in title bar of DialogBox

First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works

public void loadTab(final Widget widget, String headingText, String tooltip) {

        HorizontalPanel panel = new HorizontalPanel();
        panel.setStyleName("tabHeader");
        panel.setTitle(tooltip);
        Label text = new Label();
        text.setText(headingText);
        text.setStyleDependentName("text", true);
        Label close = new Label();
        close.setText("X");
        close.setTitle(closeText_ + headingText);
        text.setStyleDependentName("close", true);
        close.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                Window.alert("close this tab");
                ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
                tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
            }
        });
        panel.add(text);
        panel.add(close);
        panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
        panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);

        tabPanel_.add(widget, panel);
        tabPanel_.getTabWidget(widget).setTitle(tooltip);
        tabPanel_.selectTab(widget);
    }