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

Question

我有一个GWT + AppEngine应用程序,可以让用户创建在线民意调查.我想让民意调查创作者从他的民意调查中选择各种主题.我们将保存投票创建者在服务器上选择的主题,并且每当投票受访者访问投票时,他将获得具有所选主题的问题.

我们的主题意味着一组4-5种颜色,我们将用它来设置民意调查页面的样式.我们的客户端应用程序是一个GWT应用程序,其样式在UiBinder模板元素中设置为内联,例如:

<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 文件中）。

直接说：

1. 创建用于存储颜色信息的数据库结构
2. 创建服务器代码以从数据库获取颜色
3. 实现gwt-service（以及异步接口和servlet实现类）以将颜色信息传递给客户端

4. 实现 gwt 客户端代码，该代码请求颜色信息，然后为您的 gwt 组件设置颜色。你可以这样做（使用驼峰式大小写，如http://www.francoismaillet.com/blog/?p=68中所述）：

   widget.getElement().getStyle().setProperty("背景", 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);
            }
        }
    }
 }-*/
;

结论

针对您的问题的三种解决方法，它们都不是真正的解决方案 - 但希望它可以帮助您实现代码。祝你好运！

PS：我的代码未经测试...