How to set CSS style colors in GWT

Question

I have a GWT + AppEngine app that allows users to create online polls. I want the survey creator to choose from a variety of topics for his survey. We will save the topic of the survey creator selected on the server, and whenever the respondent of the survey addresses the survey, he will receive questions with the selected topic.

For us, a theme means a set of 4-5 colors that we will use to create a survey page. Our client application is a GWT application with styles built into UiBinder template elements, for example:

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

Please suggest how we can install color1 and color2 from a theme stored on the server. Please note that this is not a topic topic for the GWT module.

Answer 1

As far as I know, changing the uibinder pattern at run time is not possible (since it compiles into javascript at compiletime and is no longer available at run time).

You will probably have to manually change the colors in your gwt code (= in java files, not in .xml files).

Straight ahead:

• create a database structure for storing color information.
• create server code to get colors from the database
• implement gwt-service (both the asynchronous interface and the servlet implementation class) to deliver color information to the client

• implements a gwt client code that requests color information and then sets colors for your gwt components. You can do it like this (use the camel case as described at http://www.francoismaillet.com/blog/?p=68 ):

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

Of course, this solution is rather inconvenient when you need to change many widgets.

Alternative 1:

Deploy a simple old servlet (without gwt) that can provide a css file (a standard servlet that loads color data from the database and returns those colors as CSS definitions to the browser). Use the link to this servlet on the gwt-html start page.

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

The problem with this alternative is that you cannot instantly update color information. The user must reload the page to see the changes in his color styles.

Alternative 2:

Use javascript (native code) to dynamically change css settings.

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

and

 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); } } } }-*/ ; 

Conclusion

Three workarounds for your problem, but they are not a solution - but hopefully this will help you implement your code. Good luck

PS: my code is not verified ...

Answer 2

Contrary to what slartidan answered, you can defer UIBinder styles until runtime overrides. The only caveat to this is that before loading the stylesheet, you must add a color preference, which I assume is done for the create and bind ui methods, and you must make these settings available using the static method.

 <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

• Switching between styles is easy. See programmatically select inline styles . Just declare your color schemes under different CSS classes, and then assign them to your elements. This can be cumbersome if you have many elements.

• Manipulating an existing AFAIK CSS style is not directly supported in GWT. You will need to resort to JSNI. See this topic: dynamically change css rules