Разочарование в стилях DataGrid / CellTable - переопределение стилей строк - PullRequest
Новая
       15

Разочарование в стилях DataGrid / CellTable - переопределение стилей строк

5 голосов
/ 13 сентября 2011

Я очень стараюсь стилизовать свою GWT 2.4 DataGrid и на каждом шагу сталкиваюсь с препятствиями. Я добавил следующий стиль строки в свою DataGrid: 

dataTable.setRowStyles(new RowStyles<IntegrityItem>() {
  @Override
  public String getStyleNames(IntegrityItem row, int rowIndex) {
      if (row.getSomeValue() >= 100) {
        return MyResources.INSTANCE.mystyles().alertRow();
      } else {
        return "";
      }
  }
});

Стиль alertRow просто такой: 

.alertEntry {
    font-weight: bold;
    color: #00ff00;
    background-color: #ff0000;
}

Дополнительная информация: я сделал локальную копию DataGrid.css и удалил ВСЕ "фоновые" элементы из всех стилей, и я использовал это для создания ClientBundle: 

public interface MyDataGridResources extends DataGrid.Resources {

  public static final FmeaDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);

  @Override
  @Source({"../resources/styling/mydatagridstyles.css"})
  Style dataGridStyle();

}

Я использовал это (MyDataGridResources.INSTANCE) в своем конструкторе DataGrid.

Когда я пытаюсь это сделать, строки, соответствующие критериям, содержат зеленый (# 00ff00) текст, но цвет фона остается белым или серым в зависимости от того, является ли эта строка четной или нечетной. Как получается, что цвет фона игнорируется таким, какой он есть? Откуда он берет эти цвета? Я полностью удалил информацию о цвете фона из файла css.

Ответы [ 2 ]

12 голосов
/ 02 февраля 2012

Вы можете создать собственный CSS-файл и предоставить его в DataGrid посредством определения нового ресурса стиля.Это делается путем создания типа, расширяющего DataGrid.Resources, который знает о вашем файле CSS.Затем вы передаете это конструктору сетки данных.

Чтобы предоставить достаточно полный пример, сначала создайте новый тип для стиля DataGrid.(Определение такого нового типа просто уникально идентифицирует ваш стиль в GWT). 

public interface MyStyle extends DataGrid.Style {
}

Затем определите интерфейс, который переопределяет заглушку метода dataGridStyle () в DataGrid.Resources.Метод dataGridStyle должен возвращать ранее определенный MyStyle.

Обратите внимание на два элемента, заданных для аннотации @Source - вы можете просто переопределить любое из имен классов в CSS по умолчанию (DataGrid.css) во втором файле, который вы используете.Обеспечить ("DataGridOverride.css" здесь). 

public interface DataGridResource extends DataGrid.Resources {

  @Source({ DataGrid.Style.DEFAULT_CSS, "DataGridOverride.css" })
  MyStyle dataGridStyle();
};

Чтобы создать свою заново стилизованную сетку данных, все, что вам нужно сделать, это: 

DataGridResource resource = GWT.create(DataGridResource.class);
    dataGrid = new DataGrid<T>(pageSize, resource)

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

3 голосов
/ 13 сентября 2011

См. http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3 (что не является ошибкой!)

Вкратце продлите DataGrid.Style (цель состоит только в том, чтобы иметь новый тип, вам не нужно ничего добавлять к нему), и ваш переопределенный метод dataGridStyle возвращает ваш собственный подтип, а не DataGrid.Style ( и это будет работать из-за ковариации возвращаемого типа)

...