Adding close button to TabPanel(to its TabBar exactly)

[nandini]

Hi..........

I have started to work on gwt and have some issue.
I have created a TabPanel in my sample code.Now I want to add a close
button image to be added in the TabBar on clicking of which the tab
show get closed....Can ny one help with respect to this........

thanks in advance.............

Nandini

[Carl Scott]

It's not inherently supported. Only thing I can think to do within
the GWT scope is to inject regular HTML into the tab that has an image
that, onclick, makes a call to a javascript function, say,
tabClose(). use JSNI to hook tabClose() to the $wnd object, and have
tabClose call a function that does something meaningful, like hide/
remove the tab. Somewhat annoying but would work.

MyGWT's framework, on the other hand, inherently, and nicely, supports
this, so it may be worth checkout out. Just google mygwt. I use it
currently in my projects, and before that I implemented my own
tabPanel to support the extra functionality I needed.

--
Carl Scott
Software Developer, Solertium Corporation

[mooner]

You can create close button using DOM object:

// Create tab
myTabPanel.insert(myWidget, "<span id=\"tab123\" />", true,
myTabIndex);

// Create close button
Element closeElement = DOM.createImg();
// set image properties
DOM.setElementProperty(closeElement, "width", "16");
// ...

DOM.setEventListener(closeElement, new EventListener() {
public void onBrowserEvent(Event event) {
myTabPanel.remove(myTabIndex);
}
});
DOM.sinkEvents(closeElement, Event.BUTTON_LEFT);

Element tabElement = DOM.getElementById("tab123"); // Find placeholder
for close button of created tab
DOM.appendChild(tabElement, closeElement); // Append close button

[gregor]

You can also also use TabPanel.add(Widget,Widget) where the second
Widget is the tab header. This can be e.g. a HorizontalPanel with text
aligned left and a close icon button aligned right. Add a
ClickListener to this that closes the tab.

regards
gregor

[sandeep adari]

just try with tapPanel object say tabPanel.setClosable(true);

This statement should provide the close button as you are expecting.

[sandeep adari]

just try tabPanel.setClosable(true);

On Wednesday, 2 April 2008 17:36:11 UTC+5:30, nandini wrote: