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中。