CellList GWT CSS样式 [英] CellList GWT CSS Style

问题描述

我在我的入口点创建了一个CellList。现在我想对它进行风格化（将所选单元格的颜色从蓝色改为深黑色）

根据我的知识，我只需要重写cellList的样式，选择一个并更改背景颜色（然后保存在module.css中）

这是我自带的。

  @sprite .cellListSelectedItem {
 / * gwt-image：'cellListSelectedBackground'; * / 
 / * BEFORE：background-color：＃628cd5; * / 
 background-color：＃2D2D2D; 
 color：white; 
 height：auto; 
 overflow：visible;然而每次我选择一个单元格，它仍然显示旧的颜色（＃628cd5） 。什么我做错了？
 
 
 
而且是的，我清理了项目并重新启动了服务器，并清除浏览器缓存。
解决方案
您需要告诉GWT使用新的样式 - 只需将它们添加到您的模块CSS文件是不够的：
  table = new CellTable< FooType>（12，
 CellTableResources.INSTANCE，keyProvider）; 
  
 CellTableResources.INSTANCE应为扩展CellTable资源包的资源包实例。像：
  import com.google.gwt.core.client.GWT; 
 import com.google.gwt.resources.client.ImageResource; 
 import com.google.gwt.resources.client.ImageResource.ImageOptions; 
 import com.google.gwt.resources.client.ImageResource.RepeatStyle; 
 import com.google.gwt.user.cellview.client.CellTable; 
 import com.google.gwt.user.cellview.client.CellTable.Style; 
 
 public interface CellTableResources extends CellTable.Resources {
 
 public static CellTableResources INSTANCE = GWT.create（CellTableResources.class）; 
 
 @Source（footer_bg.png）
 @ImageOptions（repeatStyle = RepeatStyle.Both，flipRtl = true）
 ImageResource cellTableFooterBackground 
 
 @Source（header.png）
 @ImageOptions（repeatStyle = RepeatStyle.Horizo​​ntal，flipRtl = true）
 ImageResource cellTableHeaderBackground（）; 
 
 @Source（table_head_bg_left.png）
 @ImageOptions（repeatStyle = RepeatStyle.None，flipRtl = true）
 ImageResource cellTableHeaderFirstColumnBackground（）; 
 
 @Source（table_head_bg_right.png）
 @ImageOptions（repeatStyle = RepeatStyle.None，flipRtl = true）
 ImageResource cellTableHeaderLastColumnBackground（）; 
 
 @Source（CellTableStyle.DEFAULT_CSS）
 style cellTableStyle（）; 
} 
  
然后对于CellTableStyle当然是同样的事情：
  import com.google.gwt.user.cellview.client.CellTable; 
 
 public interface CellTableStyle extends CellTable.Style {
 
 String DEFAULT_CSS =path / to / your / new / CellTable.css; 
 
 String cellTableCell（）; 
 
 // .... 
 
} 
  
 
I created a CellList in my entry point. Now I want to style it.( Changing the color of selected cell from blue to dark black )

In my knowledge, I only need to override the style of cellList, choose the selected one and change the background color (and then save inside the module.css)

So this is what I came with.    
@sprite .cellListSelectedItem {
/*gwt-image: 'cellListSelectedBackground';*/
/*BEFORE : background-color: #628cd5;*/
background-color: #2D2D2D;
color: white;
height: auto;
overflow: visible;
}
However everytime I select a cell, it still displaying old color (#628cd5). Anything I did wrong?

And oh yes, I cleaned the project and restarted the server-and also clear browser cache.
解决方案
You need to tell GWT to use the new styles -- simply adding them to your module CSS file isn't going to be enough:
table = new CellTable<FooType>(12,
    CellTableResources.INSTANCE, keyProvider);
CellTableResources.INSTANCE should be a Resource bundle instance that extends the CellTable Resource bundle. Something like:
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.resources.client.ImageResource.ImageOptions;
import com.google.gwt.resources.client.ImageResource.RepeatStyle;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.CellTable.Style;

public interface CellTableResources extends CellTable.Resources {

  public static CellTableResources INSTANCE = GWT.create(CellTableResources.class);

  @Source("footer_bg.png")
  @ImageOptions(repeatStyle = RepeatStyle.Both, flipRtl = true)
  ImageResource cellTableFooterBackground();

  @Source("header.png")
  @ImageOptions(repeatStyle = RepeatStyle.Horizontal, flipRtl = true)
  ImageResource cellTableHeaderBackground();

  @Source("table_head_bg_left.png")
  @ImageOptions(repeatStyle = RepeatStyle.None, flipRtl = true)
  ImageResource cellTableHeaderFirstColumnBackground();

  @Source("table_head_bg_right.png")
  @ImageOptions(repeatStyle = RepeatStyle.None, flipRtl = true)
  ImageResource cellTableHeaderLastColumnBackground();

  @Source(CellTableStyle.DEFAULT_CSS)
  Style cellTableStyle();
}
And then of course the same sort of thing for CellTableStyle:
import com.google.gwt.user.cellview.client.CellTable;

public interface CellTableStyle extends CellTable.Style {

   String DEFAULT_CSS = "path/to/your/new/CellTable.css";

   String cellTableCell();

   // ....

}


                        
这篇关于CellList GWT CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！