Горизонтальная панель кнопок с ползунком в Ваадине

Question

Моя цель - создать горизонтальную панель кнопок с переменным количеством кнопок. Каждое нажатие кнопки должно открывать определенный новый графический интерфейс, встроенный в существующий, над HorizontalLayout.

Первая кнопка всегда должна быть там. Это код на данный момент:

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 этого дополнения, но вы можете использовать версию V13 в своем проекте V14, она совместима)

Позже я хотел бы обновить панель кнопок, поэтому «номер»будет меняться во время выполнения. Панель кнопок должна распознавать это изменение и создавать столько кнопок, сколько указано. Как реализовать обновление?

1) Удалить все существующие кнопки
2) Добавить нужное количество кнопок еще раз

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

Редактировать: Это простой способсделать это, удалив ВСЕ кнопки, затем повторно добавив нужную сумму. Если вы хотите быть немного более модным, вы можете попытаться сохранить некоторые кнопки, если они все равно будут читаться. пример: допустим, у вас изначально есть 4 кнопки. Если вы измените значение number на 3, вам нужно будет удалить только последнюю кнопку, вместо удаления 4, а затем добавления 3. Это будет иметь преимущество, что любые изменения, которые вы могли сделать в соответствующих показанных макетах кнопок, не будутбыть отброшеннымЭто было бы важным отличием, если вы используете Binder внутри показанных / скрытых макетов.

---

В качестве идентификатора вы в основном реализуете функциональность Tabs с помощью кнопок здесь. Хотя это, безусловно, возможно, я бы порекомендовал вам попробовать это с помощью вкладок. Я знаю, что ты попробовал это вчера, но я думаю, что ты сдался слишком рано. Я понимаю, что вкладки несколько сложны, но вам придется создать аналогичную сложность, используя это решение для кнопок (ваша текущая реализация еще не закончена - вам все равно нужно создать макет, который отображается для каждой кнопки, и добавить прослушиватель щелчков, которыйвызовет это изменение видимости)

Answer 2

Вкладки

Вы реплицируете функциональность, уже встроенную в виджеты Vaadin * и Tab . Не нужно заново изобретать колесо здесь. Кроме того, вы будете вводить пользователя в заблуждение, имея кнопки, которые действуют как вкладки, просто переключаясь между панелями содержимого в окне.

Вкладки имеют функции, которые вы можетезапрашивается:

• Переключение панелей содержимого в окне
• Прокрутка, если их слишком много, чтобы поместиться на экране
• Внешний вид можно настроить с помощью Vaadin themes ( Lumo & Материал ) и CSS. (См. Примеры внизу этой страницы .)
• Вкладки можно добавлять и удалять. Вы также можете отключить вкладку, чтобы она была блеклой, но все еще читаемой, пока она не активна.

Чтобы переключить контент, просто спрячьте или покажите, позвонив по номеру setVisible. Скрытие с помощью CSS очень быстро. И setVisible в false также отключает обновления компонента Vaadin с сервера Vaadin, так что вы можете обновлять скрытый контент (если это необходимо) без дополнительных затрат на обновление браузера.

Вкладки со страницами этой страницы examples дают хороший пример кода для управления переключением контента. A 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 widget

Как видно из приведенного выше фрагмента кода, виджеты Tabs & Tab в комплекте с Vaadin фактически не переключают содержимое. Эти виджеты - это просто минимум для (а) отображения себя на экране в соответствии с темой и (б) знания, когда на них нажимали.

К счастью, Алехандро Дуарте создал оболочку для виджета Tabs & Tab. постраничные вкладки описаны в Vaadin Directory . Вы можете скачать или установить через Maven. Продукт бесплатный и с открытым исходным кодом (Apache License 2).

С PagedTabs вы передаете контент при добавлении каждой вкладки. Этот контент автоматически переставляется при переходе между вкладками. Вам не нужно отслеживать, какой контент принадлежит какой вкладке. И вам не нужно показывать / скрывать контент. Виджет включает в себя методы для добавления или удаления вкладок, а также удаления соответствующего содержимого. Действительно, этот виджет поддерживает наличие элемента управления «Закрыть» для удаления вкладки.

К сожалению, я не могу заставить этот PagedTabs виджет ограничивать себяна ширину окна браузера. Элемент прокрутки никогда не появляется в панели вкладок. Вместо этого пользователь должен прокрутить всю веб-страницу вправо, чтобы получить доступ к дополнительным вкладкам. Я подал Issue # 11 .

Этот проект PagedTabs, безусловно, хорошая идея и выглядит многообещающе. Проверьте это, возможно, эта проблема будет исправлена, или, возможно, вы можете найти обходной путь.