изменить определение стиля в vaadin

#css #vaadin7

#css #vaadin7

Вопрос:

У меня есть код, который будет динамически скрывать компоненты; он использует [component].addStyleName(«имя») для добавления стиля к компоненту, и этот стиль определен для скрытия компонента.

У меня есть страница, на которой будет большое количество компонентов; Я могу поместить их в массив и сделать это, но я надеюсь на другой способ. Я хотел бы присвоить всем этим компонентам свой собственный стиль — что-то вроде «costPanel» — а затем использовать серверный код vaadin для изменения определения стиля «costPanel» во время выполнения.

Page.Styles Класс в Vaadin не имеет методов для получения существующих стилей или изменения существующих — единственные методы предназначены для их добавления.

Возможно ли это в Vaadin, даже если мне нужно что-то сделать для этого на стороне клиента?

Комментарии:

1. 1) Почему бы просто не использовать component.setVisible(true/false); ? . 2) Не очень понятно, что вы имеете в виду altering the style … например, добавление или удаление стилей, определенных в вашей теме, к компонентам или физическое изменение определения стиля?

2. Было бы намного лучше использовать component.setVisible(true / false); компоненты, для которых вы установили значение visible false с помощью component.setVisible(false); вообще не отправляются в браузер, поэтому было бы более эффективно, особенно если у вас много скрытых компонентов.

3. Как Morfic, так и Chris M — думаю, я не дал понять, я хочу, чтобы эти элементы не занимали места, пока они не будут обнаружены, и чтобы они были обнаружены и скрыты во время выполнения. Добавление и удаление стиля CSS будет делать то, что я хочу, но я надеялся, что смогу установить стиль для каждого компонента, а затем изменить определение стиля во время выполнения, вместо добавления и удаления имени стиля из компонента во время выполнения.

Ответ №1:

Возможно, это лучше всего подходит в качестве комментария, но на самом деле оно туда не вписывается.

Не пытаюсь быть снисходительным, но звучит так, как будто вы пытаетесь очень сложным способом изобрести велосипед. component.setVisible(false) будет делать именно то, что вам нужно, так как в компоненте не будет занимать никакого места, поскольку он фактически не будет существовать в самом DOM. Взгляните на пример ниже:

Код:

 public class LayoutWithInvisibleComponents extends VerticalLayout {
    private int index = 0;

    public LayoutWithInvisibleComponents() {
        // add a visibility toggling button
        addComponent(new Button("Toggle next", event -> {
            Component component = getComponent(  index);
            if (component instanceof Button) {
                // just toggle the next one if it's a button
                component.setVisible(!component.isVisible());
            }
            if (index == getComponentCount() - 1) {
                // reset counter
                index = 0;
            }
        }));

        // add some invisible dummy buttons
        for (int i = 0; i < 5; i  ) {
            Button button = new Button("Button "   i);
            button.setVisible(false);
            addComponent(button);
        }

        // and add a visual delimiter
        Panel rightPanel = new Panel(new Label("---------- some visual delimiter ----------"));
        rightPanel.setSizeFull();
        addComponent(rightPanel);
    }
}
  

Результат:

Модификации DOM

Есть ли что-нибудь еще, чего мне не хватает?

Комментарии:

1. Делюсь немного больше о setVisible() в другом ответе, который не является ответом ниже. Большое спасибо.

2. @arcy нет проблем, рад, что вы разобрались. Однако я не уверен, что полностью понимаю, что вы имеете в виду в приведенном выше комментарии.

Ответ №2:

Это также сделало бы лучший комментарий, но он недостаточно хорошо подходит.

Следующее взято из книги Vaadin:

 Beware that invisible beings can leave footprints. The containing layout cell that holds the invisible
component will not go away, but will show in the layout as extra empty space. Also expand ratios
work just like if the component was visible - it is the layout cell that expands, not the component.
  

Фраза «показывать в макете как дополнительное пустое пространство» убедила меня в том, что там, где должен был быть мой компонент, будет пустое, открытое, окрашенное фоном пространство. Я не помню, пробовал ли я это, но, возможно, у меня была и была какая-то другая ошибка, которая заставила меня сделать вывод, что мое предположение было правильным, и что настройка была для того, чтобы сделать его не отображаемым, но с видимым пробелом.

Документация Vaadin намного лучше, чем у большинства в отрасли, но в данном случае я перепутал смысл. В последующих абзацах у них даже есть дополнительное объяснение, в котором говорится о том, что я узнал из этого вопроса, но приведенная здесь часть, похоже, противоречит этому.

Комментарии:

1. Теперь я, наконец, понял ваш комментарий 🙂 Было бы полезно, если бы вы также могли сослаться на раздел » Очистить его » из книги, просто для будущих ссылок

2. Просматривая PDF-версию книги, я не вижу чего-то под названием «Очистить это» — где это?

3. Ах. Как быстро забываешь, что написал. Да, в параграфах, следующих за приведенным мною объяснением, они «объясняют» дальше и фактически говорят то, что вы сказали о setVisible() . Я пропустил это в первый раз, потому что меня смутило первоначальное объяснение. Я перефразирую свой ответ, чтобы сделать это более понятным. Еще раз спасибо.