java - CellTables 和 css (GWT)

Question

谁能帮我设置 CellTable 行的背景 拜托，我整晚都在努力做这件事，但一直失败，这是 快把我逼疯了。我试过调用 setRowStyles() 但那 似乎没有用，我读过你不能改变 设置样式后 CellTable 的样式 - 作为默认样式 已设置。 然后我尝试用我自己的界面构建一个 CellTable CellTableResources 在关于这个确切主题的帖子中看到但是 给了我关于未混淆的 ccs 元素的错误消息....这是我的 css 未被混淆是一个明显的错误消息。 现在我不知道该尝试什么，我正式陷入困境。

我一直在阅读关于这个 @external 的文章，它似乎没有帮助......甚至不确定外部位应该去哪里......我猜是在 css 中，但像往常一样，当卡住时我'我正在尝试任何事情!

托尼克

Answer 1

我知道这有多令人沮丧，我也遇到过同样的情况。我已经包括了我用来让它工作的所有步骤。但听起来您就快到了，所以您可能不需要所有这些。

正如您提到的，要使用您自己的 css 类名称，您必须实现 com.google.gwt.user.cellview.client.CellTable.Resources 并将您的类的一个实例传递给 CellTable 构造函数。

CellTable 声明

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

Resources 的实现还需要 com.google.gwt.resources.client.ImageResource 和 com.google.gwt.user.cellview.client.CellTable.Style 的实例，将提供您的 css 类名称的类。为了简单起见，这里使用了 Resources、ImageResource 和 Style 的 stub 实现，它们除了提供字符串作为样式名称外什么都不做。最后，这些可以来自 ClientBundle，但这不是必需的。

样式 stub (使用字符串文字)

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

图像资源 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;
    }
}

资源 stub

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

因此，此时您应该有一个没有样式的 Cell Tabula Rasa，您应该能够在浏览器中检查您的 CellTable 元素，并将 myCssClassName 视为无处不在的 CSS 类名，未混淆。

如果此时您使用传统方法之一链接到样式表，您应该能够设置“myCssClassName”字符串以与您的特定样式表相对应。

样式表链接

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

现在，如果你想使用 ClientBundle 注入(inject)你的样式，你还有一些额外的步骤。

首先，确保您在某个时刻注入(inject)了您的样式表；这真的很容易忘记。模块的 EntryPoint 中有一个简单的位置，这样您就可以确定它被调用了。

CssResource 注入(inject)

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

最后使用您的 CssResource 为之前的 Style 实现提供名称。无论 CSS 类名称是否被混淆，它们都应该被注入(inject)并以这种方式使用正确的名称。

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();
}

样式表 stub

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

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

样式 stub (使用 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();
    }
}

应该是这样的。我敢肯定还有其他方法可以做同样的事情，但到目前为止这对我来说效果很好。祝你好运，我希望这能为你节省一些时间。