GWT CellList Горизонтальный

Question

Кто-нибудь знает, как сделать CellList, ориентированный горизонтально? Если возможно, пожалуйста, с UiBinder, но это не обязательно.

Answer 1

Следуя совету Томаса Бройера в группе google-web-toolkit и Как стилизовать GWT CellList? , мы можем добавить новый CSS-ресурс в конструктор CellList.

CSS для получения горизонтального форматирования MyCellList.css:

/* This file is based on the CSS for a GWT CellList:
 * https://gwt.googlesource.com/gwt/+/master/./user/src/com/google/gwt/user/cellview/client/CellList.css
 * The primary purpose is to arrange for the <div> elements that contain each cell to be laid out inline (horizontally).
 */

/* Using inline-block, following Thomas Broyer's recommendations (with link to justification) here:
 * https://groups.google.com/forum/#!topic/google-web-toolkit/rPfCO5H91Rk
 */
.cellListEvenItem {
    display: inline-block;
    padding: 5px;
}

.cellListOddItem {
    display: inline-block;
    padding: 5px;
}

Определите новый ресурс следующим образом:

public interface MyCellListResource extends CellList.Resources {
  public static MyCellListResource INSTANCE = GWT.create(MyCellListResource.class);
  interface MyCellListStyle extends CellList.Style {}

  @Override
  @Source({CellList.Style.DEFAULT_CSS, "MyCellList.css"})
  MyCellListStyle cellListStyle();
}

Внедрить новый стиль и передать его конструктору CellList:

    MyCellListResource.INSTANCE.cellListStyle().ensureInjected();

    CellList<Fare> cellList = new CellList<Fare>(cell, MyCellListResource.INSTANCE);

Обратите внимание, что новый стиль появляется в каскаде после стиля DEFAULT для CellList, поэтому вам нужно только внести необходимые изменения в ваш MyCellList.css.

Answer 2

В этом методе много логики, которую я не хотел воспроизводить, но мое хакерское решение просто заменить все div на span работает:

public class HorizontalCellList<T> extends CellList<T> {

  public HorizontalCellList(Cell<T> cell) {
    super(cell);
  }

  @Override
  protected void renderRowValues(
      SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
    SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
    super.renderRowValues(filteredSB, values, start, selectionModel);
    SafeHtml safeHtml = filteredSB.toSafeHtml();
    String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
    sb.append(SafeHtmlUtils.fromTrustedString(filtered));
  }
}

Answer 3

Попробуйте переопределить метод CellList.renderRowValues. Вы должны быть в состоянии создать шаблон горизонтальной презентации.

Answer 4

Я могу решить эту проблему, расширив CellList и создав собственный шаблон + переопределив метод renderRowValues.Простое изменение div на span не помогло мне, может быть, потому, что у меня есть пользовательские ячейки (каждая ячейка отображается как таблица).Добавление display: inline в CSS также не работает для меня.

Мой код шаблона почти такой же, как и оригинал, за исключением того, что я добавил "float: left;"стиль:

    interface Template extends SafeHtmlTemplates {
    @Template("<div onclick=\"\" __idx=\"{0}\" style=\"float:left;\">{1}</div>")
    SafeHtml span(int idx, SafeHtml cellContents); ...

Вот фрагмент моего метода renderRowValue:

    int length = values.size();
    int end = start + length;
    for (int i = start; i < end; i++) {
        SingleKeyValueModel value = values.get(i - start);

        //super.renderRowValues(sb, values, start, selectionModel);

        SafeHtmlBuilder cellBuilder = new SafeHtmlBuilder();
        Context context = new Context(i, 0, getValueKey(value));
        cell.render(context, value, cellBuilder);


        sb.append(TEMPLATE.span(i, cellBuilder.toSafeHtml()));

    }

Answer 5

Вариант с CSS - установите имя класса CSS в вашем списке ячеек

CellList<T> list = new CellList<T>(...);
list.addStyleName('myList');

, затем примените правило CSS к ячейкам, чтобы выровнять их по горизонтали:

.myList > div > div > div {
    display: inline;
}