如何在GWT中设置CSS样式颜色

Question

我有一个GWT + AppEngine应用程序，可以让用户创建在线投票。我想让投票创建者从他的投票的各种主题中进行选择。我们将把投票创建者选择的主题保存在服务器上，无论何时投票受访者访问投票，他都会得到具有所选主题的问题。

对于我们来说，主题意味着一组4-5种颜色，我们将使用这些颜色来设计投票页面的样式。我们的客户端应用程序是一个在UiBinder模板元素中内联设置了样式的GWT应用程序，例如：

<ui:style>
.header {
background: color1;
padding: 6px 6px;
}
.anothercssclass {
background: color2;
padding: 6px 6px;
}
</ui:style>

请建议我们如何从保存在服务器上的主题设置color1和color2。请注意，这不是GWT模块的主题问题。

Answer 1

据我所知，不可能在运行时更改uibinder模板(因为它在编译时被编译成javascript，并且在运行时不能再访问)。

您可能需要手动更改gwt代码中的颜色(=在java文件中，而不是在.xml文件中)。

直截了当：

servlet服务创建数据库结构来存储您的颜色information

• create服务器代码，以便从database

• implement gwt -

• (以及异步接口和servlet实现类)获取颜色，以便将颜色信息传递给client

• implement gwt客户端代码，该代码请求颜色信息，然后为您的gwt组件设置颜色。您可以这样做(使用http://www.francoismaillet.com/blog/?p=68中描述的驼峰大小写)：

widget.getElement().getStyle().setProperty("background"，colorValueFromDatabase);

当然，当需要更改许多小部件时，这种解决方案非常不方便。

备选方案1:

实现一个普通的Java Servlet (没有gwt)，它可以提供一个css文件(一个标准的servlet，它从数据库加载颜色数据，并将这些颜色作为css定义返回给浏览器)。在gwt-html起始页面中使用指向该Servlet的链接。

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CssServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // you somehow have to get your user's information out of the session
        User user = (User) request.getSession().getAttribute("loggedInUser");
        PrintWriter writer = response.getWriter();

        // use saved color values and generate css
        writer.append(".header {");
        writer.append(" background: " + getHeaderColorForUser(user) + ";");
        writer.append(" padding: 6px 6px;");
        writer.append(" }");
        writer.append(" .anothercssclass {");
        writer.append(" background: " + getAnotherCssClassColorForUser(user) + ";");
        writer.append(" padding: 6px 6px;");
        writer.append(" }");

        // finish request
        writer.close();
        response.setStatus(HttpServletResponse.SC_OK);
    }

    private String getAnotherCssClassColorForUser(User user) {
        // TODO Auto-generated method stub
        return null;
    }

    private String getHeaderColorForUser(User user) {
        // TODO Auto-generated method stub
        return null;
    }

}

这种替代方法的问题是，您不能立即刷新颜色信息。用户必须重新加载页面才能看到其颜色样式的变化。

备选方案2:

使用javascript (本机代码)动态更改css配置。

// in java code:
changeCssStyle("header", "background", colorFromDatabase);

和

private native void changeCssStyle(String cssClass, String cssName, String cssValue)
/*-{
    var children = document.getElementsByTagName('*') || document.all;
    var elements = new Array();

    // iterate over ALL elements
    for (i in children) {
        var child = children[i];
        var classNames = child.className.split(' ');
        for (c in classNames) {

            // does this element use our css class?
            if (classNames[c] == '.' + cssClass) {

                // now modify this element: set the attribute with name "cssName" to the value "cssValue"
                child.style.setAttribute(cssName, cssValue);
            }
        }
    }
 }-*/
;

结论

你的问题有三种解决方法，没有一种是真正的解决方案--但希望它能帮助你实现你的代码。祝好运!

附言:我的代码是未经测试的。

Answer 2

与slartidan的回答相反，可以将UIBinder样式推迟到runtime substitution。唯一需要注意的是，您必须在尝试注入样式表之前加载颜色首选项，我相信这是在create and bind ui方法上完成的，并且您必须通过静态方法使这些首选项可用。

<ui:style>
    @eval color1 com.module.UserPreferences.getColor1();
    .header {
      background: color1;
      padding: 6px 6px;
    }
    @eval color2 com.module.UserPreferences.getColor2();
    .anothercssclass {
      background: color2;
      padding: 6px 6px;
    }
</ui:style>

Answer 3

1. 在样式之间的切换很容易。参见programmatically select inline styles。只需在不同的CSS类下声明配色方案，然后将它们分配给元素即可。如果您有很多elements.
2. Manipulating，现有的CSS style是AFAIK，而GWT不直接支持，这可能会很麻烦。您将需要求助于JSNI。请查看此帖子：change css rules dynamically