我有一个 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 模块主题问题。
【问题讨论】：
标签： google-app-engine gwt
据我所知，在运行时无法更改 uibinder 模板（因为它在编译时被编译成 javascript 并且在运行时不再可访问）。
您可能必须手动更改 gwt 代码中的颜色（= 在 java 文件中，而不是在 .xml 文件中）。
直截了当：
实现 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);
}
}
}
}-*/
;
结论
解决您的问题的三种解决方法，其中没有一个是真正的解决方案 - 但希望它可以帮助您实现代码。祝你好运！
PS：我的代码未经测试...
【讨论】：
与 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>
【讨论】：
样式之间的切换很容易。见programmatically select inline styles。只需在不同的 CSS 类下声明您的配色方案，然后将它们分配给您的元素。如果您有很多元素，这可能会很麻烦。
在 GWT 中不直接支持 AFAIK 操作现有的 CSS 样式。您将需要求助于 JSNI。看到这个帖子：change css rules dynamically
【讨论】：