Closing the GWT Tab Bar

Question

I am creating an application in GWT. I have a decorated tab in my application. Where I add panels to it dynamically. Now I want to achieve closing these tabs. I want to add a close image to the tab bar and an event for this image to close. I am using UIbinder.

Answer 1

working code is:

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; } 

To add a 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 will 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())); }} 

Answer 2

It is not supported natively in GWT.

You can manually try adding it.

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

I have not tried this personally, but I will look at the solution gregor (last).

Answer 3

You need to do something in accordance with this

GWT button Close in the title bar of the dialog box

First you need to pass the tab title when creating a new tab. The title you go to should have the text of your tab, as well as an X-shaped or text label. Then add an event handler to the close object, which gets the widget that you add to the tabPanel and removes it. Here are some built-in codes that work

 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); }