GWT CellList Horizo​​ntal

Question

有谁知道如何使CellList水平定向？如果可能的话，请与UiBinder协商，但这不是必需的。

Answer 1

试着重写CellList.renderRowValues方法。您必须能够创建一个水平的演示文稿模板。

Answer 2

有很多在该方法的逻辑我不想复制，但我只是跨度的更换所有的div的哈克解决方案工作：

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

与CSS一个变种 - 设置CSS类名你小区列表上

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

然后应用CSS规则的细胞，使它们水平对齐：

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

Answer 4

我可以通过扩展CellList和创建我自己的模板+覆盖renderRowValues方法来解决此问题。简单地将div转换为跨度对我来说并没有诀窍，也许是因为我有自定义单元格（每个单元格都以表格的形式呈现）。添加显示：内联CSS也不适用于我。

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

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

这里是我的renderRowValue方法的一个片段：

Answer 5

继托马斯Broyer的建议on the google-web-toolkit group和How to style GWT CellList?，我们可以注入新的CSS资源到CellList构造。

用于获取horizo​​nltal格式MyCellList.css的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风格后的级联中le为CellList，所以你只需要把你需要的修改放到你的MyCellList.css中。