Question

我有两个问题。

问题＃1。这个问题（帖子标题）直接来自@Cataclysm关于here的第一个答案的最后评论：

dataGrid = new DataGrid<T>(pageSize, resource)，如何设置CSS UIBinder的资源？

我正在尝试设置在UIBinder中定义的DataGrid的样式：

<g:south size="400">
    <c:DataGrid ui:field="documentDataTable" />
</g:south>

使用此ClientBundle接口代码：

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
import com.google.gwt.user.cellview.client.DataGrid.Style;

/**
 * Resources = "DataGrid.Resources"
 * Style     = "DataGrid.Style"
 * 
 * http://federico.defaveri.org/?p=157
 * https://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3
 * https://stackoverflow.com/questions/7394151/datagrid-celltable-styling-frustration-overriding-row-styles/7395175#comment26605442_7395175
 */
public interface CustomDataGridResource extends Resources {

    @Source({Style.DEFAULT_CSS, "css/CDD_DataGridStyle.css"})
    CustomStyle dataGridStyle();

    interface CustomStyle extends Style {
        String dataGridHeader();
    }
}

CDD_DataGridStyle.css：

.dataGridHeader {
    background-color: purple;
}

使用这些参考文献：

DataGrid / CellTable styling frustration -- overriding row styles
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/DataGrid.html
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/DataGrid.Style.html
http://crazygui.wordpress.com/2011/11/01/how-to-skin-a-gwt-celltable/
https://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3

根据我从参考文献1的答案中所理解的，此资源样式表未注入＆＃34;像一个普通的客户端包，但应该作为资源传递给以编程方式实例化的数据网格：

＆＃34;要构建新风格的数据网格，您只需要：
DataGridResource resource = GWT.create(DataGridResource.class);
dataGrid = new DataGrid<T>(pageSize, resource)"

奇怪的是，虽然我引用了DataGrid @UIField，但DataGrid.java API documentation至＆＃34;设置＆＃34;中似乎没有任何方法。资源（因此该问题是关于此问题的最后评论的转贴，该问题涉及已在UIBinder中定义的DataGrid - DataGrid / CellTable styling frustration -- overriding row styles）。

问题2：DataGrid与CellTable之间的区别是什么，哪种是正确的实现语法？

为什么DataGrid.java（参考文献2）的Google GWT API文档仅以编程方式详细说明CellTable实例化？我了解DataGrid.java扩展了AbstractCellTable.java，但为什么不在API示例代码中使用七个DataGrid构造函数中的任何一个？

为了让事情更加混乱，参考文献4和5建议我的客户端捆绑接口应该扩展CellTable.Resources，而参考1建议扩展DataGrid.Resources（另请参阅此链接：http://federico.defaveri.org/?p=157）

我尝试调整＆＃34; After＆＃34;来自Reference 5的上一篇文章（＃13）的代码示例，但嵌套接口引发了错误：

public interface NxoCellTableResources extends CellTable.Resources {
    public interface NormalStyle extends CellTable.Style {}

    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css" })
    public NormalStyle cellTableStyle();
}

public interface NxoCellTableThinResources extends CellTable.Resources {
    public interface ThinStyle extends CellTable.Style {}

    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css", "NxoCellTableThin.css" })
    public ThinStyle cellTableStyle();
}

总之，我正在寻找最简单的方法来为UIBinder中定义的DataGrid中的所有元素设置样式，并清楚地解释要使用哪种Resource语法（DataGrid与CellTable）。我愿意从UIBinder中删除引用并在必要时以编程方式插入到视图中，提前感谢！

Answer 1

GWT记录了here。

可以找到一个很好的例子here。

Answer 2

问题1：

你说的一切都是正确的。

确保您将provided=true传递给您的DataGrid UiField：

@UiField(provided = true)
DataGrid<MyDTO> dataGrid;

然后在构造函数中，您将创建DataGrid，如下所示：

public MyView() {
   CustomDataGridResource resource = GWT.create(CustomDataGridResource.class);
   resource.dataGridStyle().ensureInjected();
   dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
   binder.createAndBindUi(this);
}

确保在样式上调用ensureInjected()。此外，如果您的构造函数上有Inject。您可以传递CustomDataGridresource并自动调用GWT.create()：

@Inject
public MyView(CustomDataGridResource resource) {
   resource.dataGridStyle().ensureInjected();
   dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
   binder.createAndBindUi(this);
}

问题2：
关于CellTable和DataGrid之间的区别，请参阅此主题：

https://groups.google.com/forum/#!topic/google-web-toolkit/PBhu6RtP4G8

基本上，如果你使用LayoutPanels DataGrid是一个很好的选择，因为它包含固定标题和可滚动的内容区域。 CellTable也适用于FlowPanel和普通Panels。

如何在UIBinder中为DataGrid设置CSS资源？

2 个答案: