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 <[email protected]> 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 ");
> 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 [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
