2012-06-04 9 views
6

Ich versuche herauszufinden, wie die DataGridHeader-Stil in DataGrid.css definierten überschreiben! GWT-Kern. Der GWT-Stilname ist mit adler32 verschleiert, so dass ich .dataGridHeader nicht einfach in meinem CSS verwenden kann. In meinem Fall wünsche ich eine einfache Änderung des Leerraums: normal.So überschreiben GWT verschleierten Stil für DataGrid-Header

Ich habe Artikel über das Injizieren von CSS gesehen, aber sie scheinen alle auf Klassenebene zu sein und nicht wie ein Sub-Stil innerhalb einer Komponente wie DataGrid.

Wie überschreibe ich einen Header-Stil innerhalb einer Komponente wie DataGrid?

Antwort

10

Genau wie bei jedem ClientBundle und CssResource: Erstellen Sie eine Schnittstelle, die Datagrid.Resources und überschreibt die dataGridStyle Methode mit einer @Source Anmerkung des auf Ihre eigene CSS-Datei (oder möglicherweise sowohl die Original-Datei und Ihre eigene Datei erweitert, so sie werden miteinander kombiniert werden).

es auf diese Weise tun wird den Stil für allDataGrid s in Ihrer Anwendung außer Kraft setzt aber (es hängt wirklich von der CssResource Instanz ensureInjected() zuerst bekommt: die eine von den ursprünglichen DataGrid.Resources oder den von Ihrem Unter Interface): Da Sie denselben Rückgabetyp verwenden (DataGrid.Style), sind die verschleierten Klassennamen identisch.

Wenn Sie den Stil auf einer Fall-zu-Fall-Basis ändern möchten dann, zusätzlich erklären eine Schnittstelle, die DataGrid.Style und verwenden erstreckt, dass als Rückgabetyp auf Ihre dataGridStyle Überschreibung: weil die verschleierten Klassenname basiert auf Sowohl der vollqualifizierte Interface-Name als auch der Methodenname, Ihre DataGrid.Style-Subschnittstelle, generiert verschiedene verschleierte Klassennamen als die ursprüngliche DataGrid.Style-Schnittstelle.

Dann natürlich GWT.create() Ihre DataGrid.Resources Sub-Schnittstelle und übergeben Sie es als Argument an die DataGrid Konstruktor.

Siehe auch http://code.google.com/p/google-web-toolkit/issues/detail?id=6144

+2

ich in der Lage war Ihren ersten Vorschlag zur Arbeit zu kommen, aber ich konnte es mit ensureInject Ordnung nicht. Jede Reihenfolge würde dazu führen, dass das ursprüngliche css verwendet wird. Wenn Sie DataGrid.java betrachten, sieht es so aus, als ob es immer sein eigenes GWT.create-Ergebnis verwendet. Das Übergeben an den Konstruktor hat funktioniert. '\t öffentliche Schnittstelle MyResources erweitert DataGrid.Resources { \t @Source ({DataGrid.Style.DEFAULT_CSS," DataGrid.css "}) \t \t DataGrid.Stil dataGridStyle(); \t} \t statische MyResources-Ressourcen = GWT.create (MyResources.class); ' – Glenn

+1

Das bisschen über die Verwendung eines anderen Stils von Fall zu Fall hat mich gerettet. Vielen Dank :) –

9

Dank Thomas.

Gerade für die Leser es einfacher zu machen ...

eine neue Schnittstelle erstellen

public interface GwtCssDataGridResources extends DataGrid.Resources { 
     @Source({Style.DEFAULT_CSS, "gwtDataGrid.css"}) 
     Style dataGrid(); 
} 

public static final GwtCssDataGridResources gwtCssDataGridResources = GWT.create(GwtCssDataGridResources.class); 

    static { 
     gwtCssDataGridResources.dataGrid().ensureInjected(); 
    } 

erstellen schließlich eine neue CSS-Datei gwtDataGrid.css eine statische Referenz verwenden . Wenn Sie einen Stil überschreiben müssen, müssen Sie für jede Definition ! Wichtig verwenden.

.dataGridHeader { 
    color: #FF0000 !important; 
} 

.dataGridFirstColumnHeader { 
    -moz-border-radius-topleft: 5px; 
    -webkit-border-top-left-radius: 5px; 
} 

.dataGridLastColumnHeader { 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-right-radius: 5px; 
} 

Das ist es

Verwandte Themen