Полупрозрачный баннер на всех макетах в моем приложении Vaadin, по лицензии Vaadin Charts 2 Demo?

Новое дополнение Vaadin Charts 2 предлагает ограниченную по времени пробную лицензию.

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

снимок экрана таблиц приложения Vaadin, скрытых плавающей полупрозрачной полосой

Я хотел бы обеспечить точно такое же поведение в моем собственном приложении. Когда ожидаются срочные предупреждения, я хочу уведомить пользователя полосой поперек экрана. Я хочу реагировать, когда пользователь нажимает на эту панель. Я хочу, чтобы эта панель появлялась и оставалась отображаемой независимо от того, какие макеты меняются под панелью.

Вместо того, чтобы каждый макет управлял каким-то виджетом уведомлений о срочном предупреждении, я хочу, чтобы только один виджет (полупрозрачная полоса) плавал по всему остальному приложению.

Есть ли способ предоставить эту панель для всего приложения самостоятельно?

Чтобы уточнить, более важная часть вопроса - это не полупрозрачность планки. Более важная часть: как разместить эту панель над любым контентом в пользовательском интерфейсе. Эти диаграммы Vaadin «Использование оценочной лицензии» остаются отображенными, в то время как внизу я меняю с VerticalLayout на GridLayout на TabSheet. Итак, в этом суть моего вопроса: как разместить панель над изменяющимися макетами в этом пользовательском интерфейсе, без уведомления каждого макета о виджете панели.


java vaadin vaadin7
person Basil Bourque    schedule 30.12.2014    source источник
comment
Я уверен, что вы можете сделать это, расширив CssLayout и используя абсолютное позиционирование.   -  person kukis    schedule 30.12.2014

Ответы (1)


arrow_upward
3
arrow_downward

Воспользуйтесь 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;
}

Это дает вместе с соответствующей таблицей:

введите описание изображения здесь

Не забудьте установитьContent вашего UI-класса на другой CssLayout, иначе ваша панель появится рядом с таблицей. Это потому, что в большинстве случаев используется VerticalLayout, для каждого дочернего компонента назначается равное пространство.

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

Вы можете загрузить полный пример здесь.

person kukis    schedule 30.12.2014
comment
Это отвечает полупрозрачному слою. Но более важная часть вопроса заключается в том, как разместить эту панель над любым контентом в пользовательском интерфейсе. Эти диаграммы Vaadin, использующие оценочную лицензию, остаются отображенными, в то время как внизу я меняю с VerticalLayout на GridLayout на TabSheet. Итак, это суть моего вопроса, как разместить панель над изменяющимися макетами в этом пользовательском интерфейсе без необходимости информировать каждый макет о виджете панели. Но спасибо за этот ответ, я уверен, что он поможет другим. - person Basil Bourque; 05.01.2015