TabLayoutPanel with custom widget for tabs

[bryanb]

I'm trying to get custom tabs with a closing "X" image next to the
label. Something like "Blah X" with the X a clickable image.

I cannot get the tab widget to display correctly.

Below is a simplified example which shows the problem. The "Bad Tab"
should float the label left and the "X" right. On Chrome this will
cause the tab to be "detached" from the tab panel. i.e. it display
about 4px above the main tab panel. In FF the tab isn't detached, but
the floating doesn't seem to work.

Has anyone got something similar working ?

TabLayoutPanel panel = new TabLayoutPanel(32, Unit.PX);
panel.setSize("300px", "300px");

HTML hello = new HTML("Bad Tab&nbsp");
hello.getElement().getStyle().setProperty("float", "left");
HTML exit = new HTML("X");
exit.getElement().getStyle().setProperty("color", "red");
exit.getElement().getStyle().setProperty("float", "right");

FlowPanel fp = new FlowPanel();
fp.add(hello);
fp.add(exit);

panel.add(new Label("Blah"), fp);

hello = new HTML("Good Tab");
exit = new HTML("X");
exit.getElement().getStyle().setProperty("color", "red");

fp = new FlowPanel();
fp.add(hello);
fp.add(exit);

panel.add(new Label("Blah"), fp);

RootLayoutPanel root = RootLayoutPanel.get();
root.add(panel);

[Alfredo Quiroga-Villamil]

There are probably a few ways to accomplish this. I had a few minutes
so I hacked something up, in a hurry, so not sure if this is the best
way to do it, but see below.

I would do something along these lines, create a TabItem that contains
an image (the x you suggested for close for example.). A nice to have
would be to change the cursor when hovering over the TabItem for
example. This would allow me to close tabs for instance and act upon
it. I would probably enhance TabPanel to do all this, but you should
get an idea. See below to see a TabItem being added to the TabPanel
consisting of text and a clickable image with a CloseHandler.

TabItem tabItem = new TabItem("Tab 1");
TabLayoutPanel tabPanel = new TabLayoutPanel(2.5, Unit.EM);
tabPanel.add(new Image(icons.close()), tabItem);
dockPanel.addNorth(tabPanel, 25);

tabItem.addCloseHandler(new
CloseHandler<DestinationViewImpl.TabItem>() {
@Override
public void onClose(CloseEvent<TabItem> event) {
System.out.println("Closing here!");
event.getTarget().removeFromParent();
}
});

private class TabItem extends Composite implements
HasCloseHandlers<TabItem> {

private FlowPanel tabItem;
private InlineLabel tabItemTittle;
private String text;
private Image image;

public TabItem(String title) {
tabItem = new FlowPanel();
initWidget(tabItem);
tabItemTittle = new InlineLabel(title);
tabItem.add(tabItemTittle);
image = new Image(icons.asteriskOrange());
tabItem.add(image);
addHandlers();
}

/**
* @return the text
*/
public String getText() {
return text;
}

/**
* @param text the text to set
*/
public void setText(String text) {
this.text = text;
tabItemTittle.setText(text);
}

@Override
public HandlerRegistration
addCloseHandler(CloseHandler<TabItem> handler) {
return addHandler(handler, CloseEvent.getType());
}

private void addHandlers() {
image.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
CloseEvent.fire(TabItem.this, TabItem.this);
}
});

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>



--
Alfredo Quiroga-Villamil

AOL/Yahoo/Gmail/MSN IM:  lawwton

[bryanb]

Hi Alfredo,

Thanks for the reply.

It turns out the "magic sauce" for getting the elements to display
correctly is to use InlineLabel or InlineHTML rather than plain Label
or HTML. Thanks to your code, all is good.

Cheers.

[Maithilish]

Very elegant solution. I had been looking for this for a long time. Thank you
very much