如何让 message/label 关闭

Question

我需要你的帮助或一些关于我的挑战的指导。

在我的 Web 应用程序中，我向用户显示一条警告消息和一个仪表板。

消息是一个标签，用于告知有关仪表板的一些信息。我正在浏览器框架中播放仪表板。

请参考下面的代码，

Label warningMessage = new Label("Warning : Dashboard is only accessible under local network/VPN.");
BrowserFrame boxInfo = new BrowserFrame(null, new ExternalResource(address));
boxInfo.setSizeFull();
VerticalLayout layout = new VerticalLayout();
layout.addComponent(warningMessage);
layout.addComponent(boxInfo);
layout.setExpandRatio(warningMessage, 0);
layout.setExpandRatio(boxInfo, 1);
layout.setSizeFull();
body.addComponent(layout);
body.setSizeFull();

我的要求如下，

显示消息的标签或任何其他组件应有权在用户单击标签上的 "X" 按钮后立即关闭。

应该是

警告：仪表板只能在本地 network/VPN 下访问。 X

当用户阅读消息并点击 "X" button/whatever 时。该消息应该会消失，并且需要重新调整浏览器框架的大小以占据 label/component.

的 space

请指教如何做到这一点。

Answer 1

我很可能会为它创建一个新的服务器端组件。

伪代码如下。

class ClosableLabel extends HorizontalLayout { 
  public CloseableLabel(String label, Button.ClickListener listener){
    addComponent(new Label(label));
    addComponent(new Button("x", listener);
  }

  // Probably needs some setters and such
}

在视图中，您可以使用这些：

CloseableLabel label = new CloseableLabel("Warning : Dashboard is only accessible under local network/VPN.", new ClickListener {
  @Override
  public onClick(event){ //or what ever the implementable method of ClickListener is called.
    layout.removeComponent(label);
  }
});
layout.addComponent(label);

然后您可以向该组件添加更多功能，例如标签边框、比字母 x 更好的图标、按钮无边框、过渡等。

所有代码都直接写入 Whosebug，需要进行错误检查并正确实施。

如何让 message/label 关闭

How to make the message/label to be closed

vaadin

vaadin8