GWT 选项卡面板关闭

Question

我正在 GWT 中构建一个应用程序。我有一个装饰过的标签面板 我的应用程序。在哪里动态添加面板。现在我想要 来实现这些选项卡的关闭。我想添加一张近距离图像 将选项卡栏和事件添加到该图像以进行关闭。我正在使用 UIbinder。

Answer 1

您有点需要按照此

标题中的 GWT 关闭按钮 做一些事情DialogBox 的 bar

首先，创建新选项卡时需要传入选项卡标题。您传入的标头应包含选项卡文本以及可供单击的 X 图像或文本标签。然后在 close 对象上添加一个事件处理程序，该事件处理程序获取要添加到 tabPanel 的小部件并将其删除。这是一些有效的内联代码

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

Answer 2

GWT 本身不支持它。

您可以手动尝试添加。

请阅读此内容 - http://groups.google。 com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1

我个人没有尝试过，但看看gregor 的解决方案（最后一个）。

Answer 3

工作代码是这样的；

    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("   "));
    hPanel.add(closeBtn);
    hPanel.setStyleName("gwt-TabLayoutPanelTab");
    return hPanel;
}

为了添加选项卡，

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

您将需要 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()));
}}