【问题标题】:GWT CellList HorizontalGWT CellList 水平
【发布时间】:2024-01-20 08:49:01
【问题描述】:

有人知道如何制作水平方向的 CellList 吗?如果可能,请使用 UiBinder,但这不是必需的。

【问题讨论】:

  • 你有没有得到一个好的答案?
  • @slugmandrew - 希望您的问题的答案现在是“是”:-) 请参阅 *.com/a/25568087/685715
  • 两年前我问了这个问题真是太棒了,你一年前回答了,现在我又回来了,现在正在使用它:) 干杯!

标签: gwt uibinder


【解决方案1】:

按照 Thomas Broyer 的建议 on the google-web-toolkit groupHow to style 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);

请注意,新样式出现在 CellList 的 DEFAULT 样式之后的级联中,因此您只需将所需的修改放入您的 MyCellList.css 中。

【讨论】:

    【解决方案2】:

    尝试覆盖 CellList.renderRowValues 方法。您必须能够创建水平演示模板。

    【讨论】:

      【解决方案3】:

      我不想重现该方法中有很多逻辑,但我只是用 span 替换所有 div 的 hacky 解决方案有效:

      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));
        }
      }
      

      【讨论】:

        【解决方案4】:

        带有 CSS 的变体 - 在您的单元格列表上设置 CSS 类名

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

        然后将 CSS 规则应用于单元格以使它们水平对齐:

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

        【讨论】:

          【解决方案5】:

          我可以通过扩展 CellList 并创建我自己的模板 + 覆盖 renderRowValues 方法来解决这个问题。简单地将 div 更改为 span 对我来说没有用,可能是因为我有自定义单元格(每个单元格都呈现为表格)。在 CSS 上添加 display:inline 对我也不起作用。

          我的模板代码与原始代码几乎相同,只是我添加了“float:left;”风格:

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

          这是我的 renderRowValue 方法的 sn-p:

              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()));
          
              }
          

          【讨论】: