Динамический Стиль GroupTable

Вопросы и проблемы
#1

Здравствуйте.

Хотел уточнить есть ли возможность менять стиль динамически.
К примеру:
Есть GroupTable и ColorPicker. Можно при изменении цвета в ColorPicker получить этот цвет и поставить его на все рядки таблицы не используя JavaScript или Helium.
Если да, то опишите как это сделать или скиньте пример.

Заранее спасибо.

#3

Добрый день,

Могу предложить вам использование Table.StyleProvider и динамически инжектируемого CSS.

Добавим StyleProvider для таблицы, который возвращает имя стиля CSS для цвета, определенного в сущности:

@Install(to = "clientsTable", subject = "styleProvider")
private String clientsTableStyleProvider(Client entity, String property) {
    if ("color".equals(property) && entity.getColor() != null) {
        return "colored-cell-" + entity.getColor();
    }
    return null;
}

Эти CSS классы colored-cell- будут инжектироваться на лету:

protected void injectColorCss(String color) {
    Page.Styles styles = Page.getCurrent().getStyles();
    styles.add(String.format(
            ".colored-cell-%s { background-color: #%s; }",
            color, color));
}

Мы можем применить цвет при изменении значения компонента ColorPicker:

@Subscribe("colorPicker")
public void onColorPickerValueChange(HasValue.ValueChangeEvent<String> event) {
    Client client = clientsTable.getSingleSelected();
    if (client != null) {
        client.setColor((String) event.getValue());
        injectColorCss((String) event.getValue());
        clientsTable.repaint();
    }
}

Я создала небольшой проект, где вы можете увидеть этот подход в действии. prjforumtablestyle.zip (78.0 КБ)

С уважением,
Мария

2 симпатии
#4

Спасибо)

#6

Здравствуйте,

Использовал данный метод, все отлично работает, но при каждом открытии экрана, css стили каждый раз добавляются на страницу

Скрин

image

Может можно как-то проверять наличие стиля на странице?

Заранее спасибо.

1 симпатия
#7

Добрый день!

К сожалению, проверить наличие стиля на странице не удастся.

Можно просто сгенерировать набор предопределенных цветовых вариантов. Добавить сгенерированный CSS для этих цветовых стилей в файл halo-ext.scss (См. Расширение темы) и использовать те же имена цветов в своем коде.