java - 我的 Vaadin 应用程序中所有布局的半透明横幅，à la Vaadin Charts 2 Demo 许可证？

Question

新Vaadin Charts 2附加组件提供限时试用许可证。

在该试用期内，您的应用启动时会在用户界面(浏览器窗口/选项卡)底部显示一个半透明的灰色条。灰色条显示一些文本。灰色条也会对用户的点击使用react(条消失)。即使我更改了下方的布局，该栏仍保留在 UI 上。

我想在我自己的应用程序中提供完全相同的行为。当紧急警报未决时，我想在屏幕上用一个栏来通知用户。我想在用户单击该栏时使用react。我希望该栏出现并保持显示状态，而不管栏下方的布局如何变化。

我不想让每个布局都管理一些紧急警报通知小部件，我只想让一个小部件(半透明栏) float 在应用程序的整个其余部分上。

有什么方法可以让我自己提供应用范围内的栏吗？

澄清一下，问题中更重要的部分不是条的半透明性。更重要的部分是:如何将此栏 float 到 UI 中的任何和所有内容上。当我从 VerticalLayout 更改为 GridLayout 再到 TabSheet 时，Vaadin 图表“使用评估许可证”仍然显示。所以，这就是我的问题的核心，如何在该 UI 中的不断变化的布局上 float 一个栏，而不让每个布局都知道栏小部件。

Answer 1

利用CssLayout .

public class Bar extends CssLayout
{
    public Bar()
    {
        addStyleName("bar");
        addComponent(new Button("Click"));
    }
}

并将其设置为:

.bar
{
    position: fixed;
    width: 100%;
    height: 80px;
    bottom: 100px;
    z-index: 100;
    opacity: 0.7;
    background: blueviolet;
}

与对应表一起产生:

请记住将您的 UI 类的 setContent 设置为另一个 CssLayout，否则您的栏将出现在表格旁边。这是因为大多数情况下使用的 VerticalLayout 会为每个子组件分配相等的空间。

protected void init(VaadinRequest request) {
    final CssLayout layout = new CssLayout();
    setContent(layout);
...
    Bar bar = new Bar();
    layout.addComponent(bar);
}

您可以下载完整示例 here .