Come sovrascrivere lo stile offuscato GWT per l'intestazione DataGrid

Question

Sto cercando di capire come sovrascrivere lo stile dataGridHeader definito in DataGrid.css! Core GWT. Il nome di stile GWT è offuscato con adler32, quindi non posso semplicemente usare .dataGridHeader nel mio css. Nel mio caso, desidero un semplice cambiamento di spazio bianco: normale.

Ho visto qui articoli sull'iniezione di css ma sembrano tutti di livello di classe piuttosto che uno stile secondario utilizzato all'interno di un componente come DataGrid.

Come sovrascrivere uno stile di intestazione utilizzato all'interno di un componente come DataGrid?

Answer 1

Proprio come con qualsiasi ClientBundle e CssResource: creare un'interfaccia che si estende Datagrid.Resources e l'override del metodo dataGridStyle con un'annotazione @Source punta al tuo file CSS (o, eventualmente, sia al file originale e il proprio file, in modo faranno essere combinati insieme).

Facendo in questo modo avrà la precedenza lo stile per tuttiDataGrid s nella vostra applicazione se (Dipende in realtà su cui CssResource esempio ottiene ensureInjected() prima: quello dall'originale DataGrid.Resources o quello dal sub-interfaccia): poiché si utilizza lo stesso tipo di ritorno (DataGrid.Style), i nomi di classe offuscati saranno uguali.

Se si vuole cambiare lo stile su una base caso per caso, allora, in aggiunta, dichiarare un'interfaccia che si estende DataGrid.Style e utilizzarlo come il tipo di ritorno al vostro dataGridStyle sostituzione: perché il nome della classe offuscato si basa su sia il nome completo dell'interfaccia che il nome del metodo, l'interfaccia secondaria DataGrid.Style genererà nomi di classe offuscati diversi rispetto all'interfaccia originale DataGrid.Style.

Quindi, naturalmente, GWT.create() l'interfaccia secondaria DataGrid.Resources e passarla come argomento al costruttore DataGrid.

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

Answer 2

Grazie Thomas.

solo per rendere più facile per i lettori ...

creare una nuova interfaccia

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

utilizzare un riferimento statico

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

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

infine creare un nuovo file CSS gwtDataGrid.css . Si noti che se è necessario sostituire uno stile, è necessario utilizzare ! Importante in ogni definizione.

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

Questo è tutto