И так - задача:
Раскрасить строки в таблице, чтобы получить примерно вот такой результат:
Тривиальная задача, казалось бы, но решения в интернете быстро найти не удалось. Поэтому выкладываю сюда разжеванное решение.
Решение:
Все делается через стили (файл styles.css).Найтифайлик со стилями можно в папке "VAADIN\themes\reindeer". Если Vaadin используется в виде jar'ника, то меняем файл styles.css по указанному пути прямо в архиве.
Выкладываю то, что я дописал в конец styles.css (оставил только 3 цвета которые использовал: lightgreen, lightorange и lightblue иначе получится очень длинный пост):
Раскрасить строки в таблице, чтобы получить примерно вот такой результат:
Тривиальная задача, казалось бы, но решения в интернете быстро найти не удалось. Поэтому выкладываю сюда разжеванное решение.
Решение:
Все делается через стили (файл 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;
}
.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;
}
});
@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 строки.