2012-06-04 9 views
6

Estoy intentando averiguar cómo anular el estilo dataGridHeader definido en DataGrid.css! GWT core El nombre de estilo GWT está ofuscado con adler32, así que no puedo simplemente usar .dataGridHeader en mi css. En mi caso, deseo un simple cambio de espacio en blanco: normal.Cómo anular el estilo ofuscado GWT para el encabezado DataGrid

He visto algunos artículos sobre cómo inyectar CSS, pero todos parecen ser de nivel de clase en lugar de un sub estilo utilizado en un componente como DataGrid.

¿Cómo anulo el estilo de encabezado utilizado en un componente como DataGrid?

Respuesta

10

Al igual que con cualquier ClientBundle y CssResource: crear una interfaz que se extiende Datagrid.Resources y reemplaza el método dataGridStyle con una anotación @Source que apuntan a su propio archivo CSS (o, posiblemente, a la vez el archivo original y su propio archivo, por lo que van a combinarse juntos).

Hacerlo de esa manera anulará el estilo de todosDataGrid s en su aplicación, aunque (en realidad depende de lo que CssResource ejemplo pone ensureInjected() primero: el de la original DataGrid.Resources o el de su sub-interfaz): porque usa el mismo tipo de devolución (DataGrid.Style), los nombres de clase ofuscados serán los mismos.

Si desea cambiar el estilo sobre una base de caso por caso, entonces, además, declarar una interfaz que se extiende DataGrid.Style y usar eso como el tipo de retorno a su anulación dataGridStyle: debido a que el nombre de la clase ofuscado se basa en tanto el nombre completo de la interfaz como el nombre del método, su subinterfaz DataGrid.Style generará diferentes nombres de clase ofuscados que la interfaz original DataGrid.Style.

Luego, por supuesto, GWT.create() su DataGrid.Resources interfaz secundaria y páselo como argumento al constructor DataGrid.

Ver también http://code.google.com/p/google-web-toolkit/issues/detail?id=6144

+2

yo era capaz de conseguir su primera sugerencia para trabajar, pero no podía hacerlo con ensureInject pedido. Cualquiera de los dos pedidos daría como resultado el uso del css original. Al mirar DataGrid.java, parece que siempre usa su propio resultado GWT.create. Pasarlo al constructor funcionó. '\t interfaz pública MyResources extiende DataGrid.Resources { \t @Source ({DataGrid.Style.DEFAULT_CSS," DataGrid.css "}) \t \t DataGrid.Estilo dataGridStyle(); \t} \t estático MyResources resources = GWT.create (MyResources.class); ' – Glenn

+1

La cuestión sobre el uso de un estilo diferente caso por caso me salvó. Gracias :) –

9

Gracias Thomas.

sólo para que sea más fácil para los lectores ...

Crear una nueva interfaz

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

utilizar una referencia estática

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

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

Finalmente crear un nuevo archivo CSS gwtDataGrid.css . Tenga en cuenta que si necesita anular un estilo, debe usar ! Important en cada definición.

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

Eso es todo

Cuestiones relacionadas