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

直接前进：

创建用于存储颜色信息的数据库结构
创建服务器代码以从数据库中获取颜色
实现gwt-service（以及异步接口和servlet实现类）以向客户端提供颜色信息
实现gwt客户端代码，该代码询问颜色信息，然后设置gwt-components的颜色。您可以这样做（使用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);
            }
        }
    }
 }-*/
;

<强>结论

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

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

Answer 2

与slartidan所回答的相反，可以将UIBinder样式推迟到runtime substitution。唯一需要注意的是，在尝试注入样式表之前必须加载颜色首选项，我相信这是在create和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

在样式之间切换很容易。见programmatically select inline styles。只需在不同的CSS类下声明您的颜色方案，然后将它们分配给您的元素。如果你有很多元素，这可能很麻烦。
操纵现有的CSS样式是GWT中不直接支持的AFAIK。你需要求助于JSNI。请参阅此主题：change css rules dynamically

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

3 个答案: