Re: TabLayoutPanel with custom widget for tabs

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

}


On Tue, Apr 24, 2012 at 11:12 PM, bryanb <webbtide@gmail.com> wrote:
>
> 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);
>
> --
> 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-web-toolkit@googlegroups.com.
> To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@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

--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.