GWT CellList Horizontal

Question

Weiß jemand, wie man eine CellList horizontal orientiert? Wenn möglich, bitte mit UiBinder, aber das ist nicht notwendig.

Answer 1

Versuchen Sie, die CellList.renderRowValues-Methode zu überschreiben. Sie müssen in der Lage sein, eine horizontale Präsentationsvorlage zu erstellen.

Answer 2

Es in diesem Verfahren eine Menge Logik, die ich nicht reproduzieren wollte, aber meine hacky Lösung nur alle divs mit Span ersetzen gearbeitet:

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

Eine Variante mit CSS - Set CSS Klassennamen auf Sie Zellenliste

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

dann CSS-Regel für die Zellen anwenden, um sie horizontal ausrichten zu machen:

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

Answer 4

Ich kann das lösen, indem ich CellList erweitere und meine eigene Vorlage erstelle + die renderRowValues ​​Methode überschreibe. Einfach divs in Spannen zu ändern, hat für mich den Trick nicht gemacht, vielleicht lag es daran, dass ich benutzerdefinierte Zellen habe (jede Zelle wird als Tabelle gerendert). Das Hinzufügen von Display: Inline auf dem CSS funktionierte auch nicht für mich.

Mein Vorlagencode ist so ziemlich das gleiche wie das Original, außer dass ich den "float: left;" Stil:

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

Hier ist ein Ausschnitt aus meiner renderRowValue Methode:

Answer 5

Thomas Broyer Vorschlag Nach on the google-web-toolkit group und How to style GWT CellList?, können wir eine neue CSS-Ressource in den CellList Konstruktor injizieren.

Die CSS für die horizonltal Formatierung MyCellList.css bekommen:

/* 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; 
} 

Definieren Sie eine neue Ressource wie folgt aus:

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

Injizieren Sie den neuen Stil, und übergeben es CellList Konstruktor:

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

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

Beachten Sie, dass der neue Stil in der Kaskade nach DEFAULT angezeigt wird le für CellList, so dass Sie nur die gewünschten Änderungen in Ihre MyCellList.css einfügen müssen.