Vaadin带滑块的水平按钮条

Question

我的目标是创建一个具有可变数目按钮的水平按钮条。每个按钮单击都应该打开一个特定的、新的gui，该gui嵌入到HorizontalLayout上方的精练gui中。

​

第一个按钮应该一直在那里。这是目前为止的代码：

public class MainLayout extends VerticalLayout implements PageConfigurator
{
    int number = 10;

/**
 *
 */
public MainLayout()
{
    super();
    this.initUI();
    this.createButtons();
}

private void createButtons()
{
    for(int i = 1; i <= this.number; i++)
    {
        final Button button = new Button();
        button.setText("Button" + i);
        button.setHeight("120px");
        button.setWidth("120px");

        this.horizontalLayout.addComponentAtIndex(i, button);
    }
}

@Override
public void configurePage(final InitialPageSettings settings)
{
    settings.addLink("shortcut icon", "frontend/images/favicon.ico");
    settings.addFavIcon("icon", "frontend/images/favicon256.png", "256x256");
}

/* WARNING: Do NOT edit!<br>The content of this method is always regenerated by the UI designer. */
// <generated-code name="initUI">
private void initUI()
{
    this.div              = new Div();
    this.horizontalLayout = new HorizontalLayout();
    this.button           = new Button();

    this.button.setText("Button");

    this.button.setWidth("120px");
    this.button.setHeight("120px");
    this.horizontalLayout.add(this.button);
    this.div.setWidth("100px");
    this.div.setHeight("100px");
    this.horizontalLayout.setWidthFull();
    this.horizontalLayout.setHeight("100px");
    this.add(this.div, this.horizontalLayout);
    this.setSizeFull();
} // </generated-code>

// <generated-code name="variables">
private Button           button;
private HorizontalLayout horizontalLayout;
private Div              div;
// </generated-code>

}

我的问题：

• 如何在按钮的水平布局中获得滑块？所以，当按钮太多的时候，我就可以在视野中游走。
• 稍后，我想更新按钮栏，这样“数字”在运行时就会发生变化。按钮栏应识别此更改，并创建给定的按钮。如何实现更新？

Answer 1

如何在按钮的水平布局中获得滑块？

为此，我建议使用外接程序ScrollLayout，它提供了两个类VerticalScrollLayout和HorizontalScrollLayout。在这种情况下，您可以使用水平的。与任何其他HorizontalLayout一样使用它，但是如果没有足够的空间显示所有内容，它将水平展开并添加一个水平滚动条。这是我自己做的，所以如果有什么问题，请不要犹豫。(这个插件没有V14版本，但是您可以在V14项目中使用V13版本，它是兼容的)

稍后，我想更新按钮栏，这样“数字”在运行时就会发生变化。按钮栏应识别此更改，并创建给定的按钮。如何实现更新？

1)删除所有现有按钮

2)再次添加正确的按钮数量

private void updateButtons(){
    this.horizontalLayout.removeAll();
    createButtons();
}

编辑:这是一个简单的方法，通过删除所有的按钮，然后重新添加正确的数量。如果你想变得更花哨一点，你可以试着保留一些按钮，如果它们要被阅读的话。示例:假设您最初有4个按钮。当您将number更改为3时，只需移除最后一个按钮，而不是删除4，然后添加3。这样做的好处是，您可能在相应显示的按钮布局中所做的任何更改都不会被丢弃。如果在显示/隐藏的布局中使用Binder，这将是一个重要的区别。

作为一个侧面，您基本上是在这里用按钮实现Tabs的功能。虽然这当然是可能的，但我建议您尝试使用Tabs。我知道你昨天试过了，但我觉得你放弃得太早了。我意识到Tabs有点复杂，但是您必须使用此按钮解决方案创建类似的复杂性(您当前的实现还没有完成-您仍然必须为每个按钮创建一个显示的布局，并添加一个单击监听器来触发此可见性更改)。

Answer 2

选项卡

您正在复制已经内置到Vaadin https://vaadin.com/components/vaadin-tabs/和https://vaadin.com/api/platform/14.0.9/com/vaadin/flow/component/tabs/Tab.html小部件中的功能。没必要在这里重新发明轮子。此外，您将使用类似选项卡的按钮来迷惑用户，只需在窗口内的内容面板之间切换即可。

​

​

选项卡具有您所要求的功能：

• 在窗口内切换内容面板
• 滚动，如果太多，不适合在屏幕上
• 外观可以通过Vaadin 主题 (https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/ & https://cdn.vaadin.com/vaadin-material-styles/1.2.3/demo/)和CSS定制。 (请参阅此页底部的示例。)
• 标签可以添加和删除。您也可以禁用一个选项卡，使之褪色，但在不活动时仍然可读。

要切换内容，只需通过调用setVisible来隐藏或显示。通过CSS隐藏是非常快的。setVisible to false还关闭了Vaadin服务器对Vaadin组件的更新，这样您就可以刷新隐藏的内容(如果需要的话)，而不需要不必要地更新浏览器。

该示例页中带有页面的Tabs部分为您提供了一个管理内容切换的不错的代码示例。Map跟踪每个选项卡与其内容的关系。底部的侦听器方法通过隐藏和显示来切换内容。在此复制：

Tab tab1 = new Tab("Tab one");
Div page1 = new Div();
page1.setText("Page#1");

Tab tab2 = new Tab("Tab two");
Div page2 = new Div();
page2.setText("Page#2");
page2.setVisible(false);

Tab tab3 = new Tab("Tab three");
Div page3 = new Div();
page3.setText("Page#3");
page3.setVisible(false);

Map<Tab, Component> tabsToPages = new HashMap<>();
tabsToPages.put(tab1, page1);
tabsToPages.put(tab2, page2);
tabsToPages.put(tab3, page3);
Tabs tabs = new Tabs(tab1, tab2, tab3);
Div pages = new Div(page1, page2, page3);
Set<Component> pagesShown = Stream.of(page1)
        .collect(Collectors.toSet());

tabs.addSelectedChangeListener(event -> {
    pagesShown.forEach(page -> page.setVisible(false));
    pagesShown.clear();
    Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
    selectedPage.setVisible(true);
    pagesShown.add(selectedPage);
});

PagedTabs小部件

从上面的代码片段中可以看到，与Vaadin捆绑在一起的Tabs & Tab小部件实际上并不会切换内容。这些小部件仅仅是(a)以与主题兼容的方式在屏幕上显示自己的最低限度，(b)知道它们何时被单击。

幸运的是，Alejandro编写了一个包装Tabs & Tab的小部件。https://vaadin.com/directory/component/paged-tabs是在https://vaadin.com/directory/search上描述的。您可以通过Maven下载或安装。该产品是免费和开放源码( 2)。

使用PagedTabs，在添加每个选项卡时传递内容。当在选项卡之间单击时，将自动交换该内容。不需要跟踪哪些内容属于哪个选项卡。也不需要你显示/隐藏内容。小部件包括添加或删除选项卡、删除匹配内容的方法。实际上，这个小部件支持有一个“关闭”控件来删除一个选项卡。

​

​

不幸的是，我不能让这个PagedTabs小部件将自己限制在浏览器窗口的宽度上。滚动控件从未出现在选项卡栏中。相反，用户必须将整个网页滚动到右侧，以访问额外的选项卡。我提交了第11期。

这个PagedTabs项目无疑是个好主意，看起来很有希望。看看它，也许这个问题会被解决，或者你可以找到解决办法。