CellTables y css (GWT)

Question

Podría alguien ayudarme a establecer el fondo de una fila de CellTable por favor, he intentado toda la noche para hacerlo y sigo fallando y es que me vuelve loco. Intenté usar una llamada al setRowStyles() pero parece que no funciona y he leído que no se puede cambiar el estilo para una CellTable una vez que se ha establecido un estilo, ya que se configuró el predeterminado . Luego traté de construir una CellTable con mi propia interfaz CellTableResources como se ve en una publicación sobre este tema exacto PERO que me dio mensajes de error sobre elementos de ccs no utilizados .... que mi css no se ofusca es un mensaje de error obvio. Ahora no sé qué probar y oficialmente estoy PICADO.

He estado leyendo sobre este @external y no parece haber sido de ayuda ... ni siquiera estoy seguro de dónde se supone que irá la parte externa ... Supongo que en el CSS, pero como de costumbre cuando estoy atascado I estoy intentando cualquier cosa!

TONYK

Answer 1

Yo sé lo frustrante que puede ser, he estado en el mismo lugar. He incluido todos los pasos que utilicé para que esto funcione. Pero parece que ya casi estás allí, por lo que probablemente no necesites todo esto.

Como usted ha mencionado a utilizar sus propios nombres de clases CSS debe implementar com.google.gwt.user.cellview.client.CellTable.Resources y pasar una instancia de su clase para el constructor CellTable.

Declaración CellTable

CellTable<MyData> myCellTable = new CellTable<MyData>(10, MyResources.INSTANCE); 

La implementación de recursos también requiere una instancia de com.google.gwt.resources.client.ImageResource y com.google.gwt.user.cellview.client .CellTable.Style, la clase que proporcionará los nombres de clase de css. Para simplificar las cosas aquí, hay implementaciones de recursos, ImageResource y Style que no hacen más que proporcionar cadenas como nombres de estilo. Al final, estos pueden provenir de ClientBundle, pero no es un requisito.

Estilo Stub (Utilizando serie literales)

import com.google.gwt.user.cellview.client.CellTable.Style; 

public class MyStyle implements Style { 

    public static final MyStyle INSTANCE = new MyStyle(); 

    @Override public boolean ensureInjected() { 

     return false; 
    } 

    @Override public String cellTableCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableEvenRow() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableEvenRowCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableOddRow() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableOddRowCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableFirstColumn() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableFirstColumnFooter() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableFirstColumnHeader() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableFooter() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableHeader() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableHoveredRow() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableHoveredRowCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableKeyboardSelectedCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableKeyboardSelectedRow() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableKeyboardSelectedRowCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableLastColumn() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableLastColumnFooter() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableLastColumnHeader() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableLoading() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableSelectedRow() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableSelectedRowCell() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableSortableHeader() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableSortedHeaderAscending() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableSortedHeaderDescending() { 

     return "myCssClassName"; 
    } 

    @Override public String cellTableWidget() { 

     return "myCssClassName"; 
    } 

    @Override public String getName() { 

     return "myCssClassName"; 
    } 

    @Override public String getText() { 

     return "myCssClassName"; 
    } 
} 

ImageResource Stub

import com.google.gwt.resources.client.ImageResource; 

class MyImageResource implements ImageResource { 

    public static final MyImageResource INSTANCE = new MyImageResource(); 

    @Override public int getHeight() { 

     return 0; 
    } 

    @Override public int getLeft() { 

     return 0; 
    } 

    @Override public String getName() { 

     return ""; 
    } 

    @Override public int getTop() { 

     return 0; 
    } 

    @Override public String getURL() { 

     return ""; 
    } 

    @Override public int getWidth() { 

     return 0; 
    } 

    @Override public boolean isAnimated() { 

     return false; 
    } 
} 

Trozo de Recursos

import com.google.gwt.resources.client.ImageResource; 
import com.google.gwt.user.cellview.client.CellTable.Resources; 
import com.google.gwt.user.cellview.client.CellTable.Style; 

public class MyResources implements Resources { 

    public static final MyResources INSTANCE = new MyResources(); 

    @Override public ImageResource cellTableFooterBackground() { 

     return MyImageResource.INSTANCE; 
    } 

    @Override public ImageResource cellTableHeaderBackground() { 

     return MyImageResource.INSTANCE; 
    } 

    @Override public ImageResource cellTableLoading() { 

     return MyImageResource.INSTANCE; 
    } 

    @Override public ImageResource cellTableSelectedBackground() { 

     return MyImageResource.INSTANCE; 
    } 

    @Override public ImageResource cellTableSortAscending() { 

     return MyImageResource.INSTANCE; 
    } 

    @Override public ImageResource cellTableSortDescending() { 

     return MyImageResource.INSTANCE; 
    } 

    @Override public Style cellTableStyle() { 

     return MyStyle.INSTANCE; 
    } 
} 

Por lo tanto, en este punto debe tener una Cell Tabula Rasa sin estilo y debe poder inspeccionar su elemento CellTable en el navegador y ver myCssClassName como el ubicuo nombre de la clase CSS, sin mostrar.

Si en este punto se vincula a una hoja de estilo utilizando uno de los métodos tradicionales, debería poder establecer las cadenas "myCssClassName" para que se correspondan con su hoja de estilos específica.

hoja de estilo de Enlace

<link href="myStyleSheet.css" rel="stylesheet" type="text/css"> 

Ahora, si se desea inyectar sus estilos usando ClientBundle que tienen algunos pasos adicionales.

Primero, asegúrese de estar inyectando su hoja de estilo en algún momento; esto es realmente fácil de olvidar Un lugar simple está en el EntryPoint de su módulo de esa manera usted puede estar seguro de que se está llamando.

CssResource inyección

MyClientBundle.INSTANCE.myCssResource().ensureInjected(); 

finalmente utilizar su CssResource para proporcionar los nombres a la aplicación del estilo de antes. Independientemente de que los nombres de las clases de CSS estén o no ofuscados, deben ser inyectados y usando el nombre correcto de esta manera.

ClientBundle Stub

import com.google.gwt.core.client.GWT; 
import com.google.gwt.resources.client.ClientBundle; 

public interface MyClientBundle extends ClientBundle { 

    public static final MyClientBundle INSTANCE = GWT.<MyClientBundle>create(MyClientBundle.class); 

    @Override @Source("path/to/myStyleSheet.css") MyCssResource myCssResource(); 
} 

CssResource Stub

import com.google.gwt.resources.client.CssResource; 

public interface MyCssResource extends CssResource { 

    @ClassName("myCssClassName") String myCssClassName(); 

    @ClassName("myOtherName") String myOtherCssClassName(); 
} 

hoja de estilo Stub

.myCssClassName { 
    background-color: magenta; 
    /* Yes, you will see when it is working. */ 
} 

@external .myOtherName { 
    background-color: yellow; 
} 

Estilo del trozo (Usando ClientBundle)

import com.google.gwt.user.cellview.client.CellTable.Style; 

public class MyStyle implements Style { 

    public static final MyStyle INSTANCE = new MyStyle(); 

    @Override public boolean ensureInjected() { 

     return false; 
    } 

    @Override public String cellTableCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableEvenRow() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableEvenRowCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableOddRow() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableOddRowCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableFirstColumn() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableFirstColumnFooter() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableFirstColumnHeader() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableFooter() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableHeader() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableHoveredRow() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableHoveredRowCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableKeyboardSelectedCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableKeyboardSelectedRow() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableKeyboardSelectedRowCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableLastColumn() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableLastColumnFooter() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableLastColumnHeader() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableLoading() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableSelectedRow() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableSelectedRowCell() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableSortableHeader() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableSortedHeaderAscending() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableSortedHeaderDescending() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String cellTableWidget() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String getName() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 

    @Override public String getText() { 

     return MyCssResource.INSTANCE.myCssClassName(); 
    } 
} 

Esa debe ser la misma. Estoy seguro de que hay otras maneras de hacer lo mismo, pero hasta ahora me ha funcionado bien. Buena suerte y espero que esto te ahorre algo de tiempo.