CellTables和css(GWT)

Question

CellTables和css(GWT)

请有人帮我设置一个CellTable行的背景,我一直在努力做到这一点,并且一直在失败,这让我很生气.我已经使用呼叫尝试setRowStyles(),但似乎并不奏效,我读过,一旦风格已经设置你不能改变风格的CellTable -作为默认的设置.然后我尝试用我自己的接口CellTableResources构建一个CellTable,就像在这个确切主题的帖子上看到的那样,这给了我关于未经混淆的ccs元素的错误消息....我的css没有被混淆是一个明显的错误消息.现在我不知道该尝试什么,我正式服用.

我一直在阅读有关本@external,它似乎并没有帮助......甚至不知道在哪里的外部位应该去...我想在CSS但像往常一样,当卡住我想任何与!

TonyK

Answer 1

小智 13

我知道这有多令人沮丧,我一直在同一个地方.我已经包含了我用来实现这一目标的所有步骤.但听起来你几乎就在那里,所以你可能不需要所有这些.

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

CellTable声明

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

Run Code Online (Sandbox Code Playgroud)

Resources的实现还需要com.google.gwt.resources.client.ImageResource和com.google.gwt.user.cellview.client.CellTable.Style的实例,该类将提供您的css类名.这里简单的是Resources,ImageResource和Style的存根实现,除了提供字符串作为样式名称之外什么都不做.最后这些可以来自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 "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";
    }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

资源存根

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

Run Code Online (Sandbox Code Playgroud)

所以,此时你应该有一个没有样式的Cell Tabula Rasa,你应该能够在浏览器中检查你的CellTable元素,并将myCssClassName视为无处不在的CSS类名,不进行模糊处理.

如果此时使用其中一种传统方法链接到样式表,则应该能够将"myCssClassName"字符串设置为与特定样式表对应.

样式表链接

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

Run Code Online (Sandbox Code Playgroud)

现在,如果您想使用ClientBundle注入样式,您还需要执行一些其他步骤.

首先,请确保您在某个时候注入样式表; 这真的很容易忘记.一个简单的地方在你的模块的EntryPoint中,你可以确定它被调用.

CssResource注入

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

Run Code Online (Sandbox Code Playgroud)

最后使用您的CssResource为之前的Style实现提供名称.无论CSS类名是否被混淆,都应该注入并使用正确的名称.

ClientBundle存根

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

Run Code Online (Sandbox Code Playgroud)

CssResource Stub

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

public interface MyCssResource extends CssResource {

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

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

Run Code Online (Sandbox Code Playgroud)

样式表存根

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

多么精彩的答案.凯莉,不能够感谢你.我现在完成了我的任务的第1部分,我得到了一个更简单的方法,这使我最终可以使用我自己的CSS规则为GWT CellTable!我在此处概述了我使用的解决方案:http://groups.google.com/group/google-web-toolkit/browse_thread/thread/9ab3911a8d981864/我的第二项任务现在也在详细说明,仍然是关于在CellTable上设置此背景但是再进一步:) (3认同)

归档时间：	14 年，9 月前
查看次数：	3931 次
最近记录：	14 年，9 月前