Java 在Vaadin中带有滑块的水平按钮条

我的目标是创建一个带有可变数量按钮的水平按钮栏。每次单击按钮都会打开一个特定的新gui，该gui嵌入到横向布局上方的扩展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>

}

我的问题是:

如何在按钮的水平布局中获得滑块？这样，当按钮太多时，我可以切换视图

稍后我想更新按钮栏，所以这个数字在运行时会改变。按钮栏应识别此更改，并创建给定数量的按钮。如何实现更新

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

为此，我建议使用提供两个类VerticalScrollLayout和HorizontalScrollLayout的插件。在这种情况下，您可以使用水平的。像任何其他水平布局一样使用它，但如果没有足够的空间显示所有内容，它将水平展开并添加一个水平滚动条。我自己制作了这个插件，所以如果有任何问题，请毫不犹豫地询问。此加载项没有V14版本，但您可以在V14项目中使用V13版本，它是兼容的

稍后我想更新按钮栏，所以这个数字在运行时会改变。按钮栏应识别此更改，并创建给定数量的按钮。如何实现更新

1移除所有现有按钮 2再次添加适量的按钮

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

编辑：这是一种简单的方法，删除所有按钮，然后重新添加适量。如果你想更别致一点，你可以试着保留一些按钮，如果它们无论如何都会被读取的话。例如：假设您最初有4个按钮。当您将数字更改为3时，只需删除最后一个按钮，而不是删除4然后添加3。这样做的好处是，您在显示的按钮布局中所做的任何更改都不会被放弃。如果在显示/隐藏布局中使用活页夹，这将是一个重要的区别

作为旁注，您基本上实现了带有按钮的选项卡功能。虽然这当然是可能的，但我建议您尝试使用标签。我知道你昨天试过了，但我觉得你放弃得太快了。我意识到选项卡有些复杂，但您必须使用此按钮解决方案创建类似的复杂度您当前的实现尚未完成-您仍然必须创建显示每个按钮的布局，并添加一个单击侦听器，以触发此可见性更改

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

为此，我建议使用提供两个类VerticalScrollLayout和HorizontalScrollLayout的插件。在这种情况下，您可以使用水平的。像任何其他水平布局一样使用它，但如果没有足够的空间显示所有内容，它将水平展开并添加一个水平滚动条。我自己制作了这个插件，所以如果有任何问题，请毫不犹豫地询问。此加载项没有V14版本，但您可以在V14项目中使用V13版本，它是兼容的

稍后我想更新按钮栏，所以这个数字在运行时会改变。按钮栏应识别此更改，并创建给定数量的按钮。如何实现更新

1移除所有现有按钮 2再次添加适量的按钮

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

编辑：这是一种简单的方法，删除所有按钮，然后重新添加适量。如果你想更别致一点，你可以试着保留一些按钮，如果它们无论如何都会被读取的话。例如：假设您最初有4个按钮。当您将数字更改为3时，只需删除最后一个按钮，而不是删除4然后添加3。这样做的好处是，您在显示的按钮布局中所做的任何更改都不会被放弃。如果在显示/隐藏布局中使用活页夹，这将是一个重要的区别

作为旁注，您基本上实现了带有按钮的选项卡功能。虽然这当然是可能的，但我建议您尝试使用标签。我知道你昨天试过了，但我觉得你放弃得太快了。我意识到选项卡有些复杂，但您必须使用此按钮解决方案创建类似的复杂度您当前的实现尚未完成-您仍然必须创建一个显示每个按钮的布局，并添加一个单击侦听器，以触发此可见性更改

选项卡 您正在复制已经内置到Vaadin和小部件中的功能。没有必要在这里重新发明轮子。此外，您将使用类似于选项卡的按钮来迷惑用户，而只是在窗口内的内容面板之间切换

标签 具有您要求的功能：

在窗口内切换内容面板 如果太多而无法在屏幕上显示，则滚动 外观可以通过Vaadin和CSS进行定制。请参见本手册底部的示例。 可以添加和删除选项卡。您还可以禁用选项卡，使其在不活动时褪色但仍然可读。 要切换内容，只需通过调用隐藏或显示即可。通过CSS隐藏是非常快的。setVisible to false还将关闭从Vaadin服务器对Vaadin组件的更新，因此，如果需要，您可以刷新隐藏内容，而无需不必要地更新浏览器

其中的Tabs with pages部分为您提供了一个很好的管理内容切换的代码示例。地图跟踪每个选项卡与其内容的关系。底部的listener方法通过隐藏和显示来切换内容。复制于此：

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捆绑在一起的选项卡和选项卡小部件实际上并没有切换内容。这些小部件只是a以符合主题的方式在屏幕上显示自己的最低要求，b知道何时单击了它们

幸运的是，亚历杭德罗·杜阿尔特（Alejandro Duarte）编写了一个包装标签的小部件&Tab。有关的说明，请参见。您可以通过Maven下载或安装。该产品是免费的，并且是开源的Apache许可证2

使用PagedTabs，您可以在添加每个选项卡时传递内容。在选项卡之间单击时，该内容将自动交换。无需跟踪哪些内容属于哪个选项卡。无需显示/隐藏内容。小部件包括添加或删除选项卡的方法，以及删除匹配内容的方法。实际上，这个小部件支持使用Close控件来删除选项卡

不幸的是，我无法使这个PagedTabs小部件将其自身约束到浏览器窗口的宽度。滚动控件永远不会出现在选项卡栏中。相反，用户必须向右滚动整个网页才能访问额外的选项卡。我归档了

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

标签 您正在复制已经内置到Vaadin和小部件中的功能。没有必要在这里重新发明轮子。此外，您将使用类似于选项卡的按钮来迷惑用户，而只是在窗口内的内容面板之间切换

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

在窗口内切换内容面板 如果太多而无法在屏幕上显示，则滚动 外观可以通过Vaadin和CSS进行定制。请参见本手册底部的示例。 可以添加和删除选项卡。您还可以禁用选项卡，使其在不活动时褪色但仍然可读。 要切换内容，只需通过调用隐藏或显示即可。通过CSS隐藏是非常快的。setVisible to false还将关闭从Vaadin服务器对Vaadin组件的更新，因此，如果需要，您可以刷新隐藏内容，而无需不必要地更新浏览器

其中的Tabs with pages部分为您提供了一个很好的管理内容切换的代码示例。地图跟踪每个选项卡与其内容的关系。底部的listener方法通过隐藏和显示来切换内容。复制于此：

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捆绑在一起的选项卡和选项卡小部件实际上并没有切换内容。这些小部件只是a以符合主题的方式在屏幕上显示自己的最低要求，b知道何时单击了它们

幸运的是，亚历杭德罗·杜阿尔特（Alejandro Duarte）编写了一个包装标签的小部件&Tab。有关的说明，请参见。您可以通过Maven下载或安装。该产品是免费的，并且是开源的Apache许可证2

使用PagedTabs，您可以在添加每个选项卡时传递内容。在选项卡之间单击时，该内容将自动交换。无需跟踪哪些内容属于哪个选项卡。无需显示/隐藏内容。小部件包括添加或删除选项卡的方法，以及删除匹配内容的方法。实际上，这个小部件支持使用Close控件来删除选项卡

不幸的是，我无法使这个PagedTabs小部件将其自身约束到浏览器窗口的宽度。滚动控件永远不会出现在选项卡栏中。相反，用户必须向右滚动整个网页才能访问额外的选项卡。我归档了

---

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

听起来您应该使用Vaadin附带的Tabs小部件在视图之间切换。你的按钮栏是否不仅仅是切换内容？支持动态添加/删除选项卡，当您的选项卡超过屏幕所能容纳的数量时，可以使用滚动条。我使用的是Vaadin Flow，听起来您应该使用Vaadin附带的tabs小部件，用于sw

---

众说纷纭。你的按钮栏是否不仅仅是切换内容？支持动态添加/删除选项卡，当您的选项卡超过屏幕所能容纳的范围时，支持滚动条。我使用Vaadin Flow另一个原因是我更改为按钮是因为有更多的可能性来设置它们的样式。还是我错了？它肯定会有不同的外观/款式。从技术上讲，您可以在每个选项卡中添加一个按钮。但我不确定那会有多好。我不是想强迫你使用标签，只是要知道，按钮的使用并没有变得容易。只要它没有死胡同，那就好。我改为按钮的另一个原因是，有更多的可能性来设计它们。还是我错了？它肯定会有不同的外观/款式。从技术上讲，您可以在每个选项卡中添加一个按钮。但我不确定那会有多好。我并不是想强迫你使用标签，只是要知道，按钮的使用并不是一件容易的事。只要它没有死胡同，那就好了。