пятница, 6 мая 2011 г.

Vaadin, Set Table Row Background Color / Раскрашиваем таблицу в Vaadin

И так - задача:
Раскрасить строки в таблице, чтобы получить примерно вот такой результат:

Тривиальная задача, казалось бы, но решения в интернете быстро найти не удалось. Поэтому выкладываю сюда разжеванное решение.



Решение:
Все делается через стили (файл styles.css).Найтифайлик со стилями можно в папке "VAADIN\themes\reindeer". Если Vaadin используется в виде jar'ника, то меняем файл styles.css по указанному пути прямо в архиве.
Выкладываю то, что я дописал в конец styles.css (оставил только 3 цвета которые использовал: lightgreen, lightorange и lightblue иначе получится очень длинный пост):
/* Basic style for all cells. */
.colored-table .v-table-cell-content {
    white-space: nowrap;
    overflow: hidden;
    padding: 0 6px;
    border-right: 1px solid #aaa;
}
.colored-table .v-table-cell-content-lightgreen {
    background: #C1FFAC;
    color:      black;
    border-bottom: 1px solid #AAAAAA;
}
.colored-table .v-table-cell-content-lightorange{
    background: #F9B34A;
    color:      black;
    border-bottom: 1px solid #AAAAAA;
}
.colored-table .v-table-cell-content-lightblue {
    background: #8CE0EC;
    color:      black;
    border-bottom: 1px solid #AAAAAA;
}

/* Basic style for all selected cells . */
.colored-table .v-selected .v-table-cell-content {
    border-right-color: #466c90;
}

.colored-table .v-selected .v-table-cell-content-lightgreen,
.colored-table .black .v-selected .v-table-cell-content-lightgreen{
    background: #4d749f url(common/img/sel-bg.png) repeat-x;
    color: #fff;
    text-shadow: #3b5a7a 0 1px 0;
}
.colored-table .v-selected .v-table-cell-content-lightorange,
.colored-table .black .v-selected .v-table-cell-content-lightorange{
    background: #4d749f url(common/img/sel-bg.png) repeat-x;
    color: #fff;
    text-shadow: #3b5a7a 0 1px 0;
}
.colored-table .v-selected .v-table-cell-content-lightblue,
.colored-table .black .v-selected .v-table-cell-content-lightblue{
    background: #4d749f url(common/img/sel-bg.png) repeat-x;
    color: #fff;
    text-shadow: #3b5a7a 0 1px 0;
}

В java же добавляем стиль к таблице:
requestsTable.addStyleName("colored-table");
И устанавливаем свойства для ячеек, точнее сказать для строк:
requestsTable.setCellStyleGenerator(new Table.CellStyleGenerator() {

            @Override
            public String getStyle(Object itemId, Object propertyId) {
                Requests r = (Requests) itemId;
                /*lightgreen, lightorange, lightblue, yellow, green, pink, lightgray, darkgray, red*/
                if (r.getStatus().getId() == 1) {
                    return "lightgreen";
                }
                if (r.getStatus().getId() == 2) {
                    return "lightorange";
                }
                if (r.getStatus().getId() == 3) {
                    return "lightblue";
                }
                return null;
            }
        });
Вот и все,теперь делаем редеплой проекта и смотрим раскрашенные по вашим условиям в CellStyleGenerator'e строки.