代码之家 › 专栏 › 技术社区 › PAINKILLER

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

clientbundle uibinder gwt

0

PAINKILLER · 技术社区 · 10 年前

我有两个问题。

问题#1。这个问题(帖子标题)直接来自@Catalysm对第一个答案的最后一条评论 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;
}

使用这些参考:

根据我从参考文献1的答案中所理解的,这个资源样式表不像普通的客户端捆绑包那样“注入”,而是应该作为资源传递给编程实例化的数据网格:

“要构建新样式的数据网格,您需要做的就是:
DataGridResource resource = GWT.create(DataGridResource.class);
dataGrid = new DataGrid<T>(pageSize, resource)"

奇怪的是,尽管我提到了 DataGrid @UIField ,中似乎没有任何方法 DataGrid.java API documentation “设置”资源(因此,问题是关于 DataGrid 已在UIBinder中定义-- DataGrid / CellTable styling frustration -- overriding row styles ).

问题2: 数据网格 与。 CellTable ,哪个是正确的实现语法?

为什么Google GWT API文档 数据网格.java (参考2)仅详图a 单元格表格 编程实例化?我明白 数据网格.java 延伸 AbstractCellTable.java 但为什么不使用七个 数据网格 API示例代码中的构造函数?

为了使事情更加混乱,参考文献4和5建议我的客户机捆绑包接口应该扩展 CellTable.Resources ,而参考文献1建议扩展 DataGrid.Resources (另请参见此链接: http://federico.defaveri.org/?p=157 ).

我尝试改编上一篇文章(#13)中的“After”代码示例 Reference 5 但是嵌套接口抛出了一个错误:

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中的所有元素的样式,并明确说明要使用的资源语法(DataGrid与CellTable)。我愿意从UIBinder中删除引用,并在必要时以编程方式插入视图,提前感谢!

2 回复 | 直到 7 年前

1

Ümit 10 年前

问题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 和 数据网格 请参阅此线程:

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

基本上,如果您使用 LayoutPanels 数据网格 非常适合,因为它包含固定的标题和可滚动的内容区域。 单元格表格 也将与 FlowPanel 和正常的 Panels .

2

1

pratZ 10 年前

GWT记录了这一点 here .

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