2010-12-30 16 views
6

Tengo una aplicación GWT + App Engine que permite a los usuarios crear encuestas en línea. Quiero permitir que el creador de la encuesta elija entre una variedad de temas para su encuesta. Guardaremos el tema elegido por el creador de la encuesta en el servidor y cada vez que un encuestado acceda a la encuesta, recibirá las preguntas con el tema elegido.Cómo configurar colores de estilo CSS en GWT

Un tema para nosotros significa un conjunto de 4-5 colores que utilizaremos para dar estilo a la página de encuestas. Nuestra aplicación del lado del cliente es una aplicación GWT con los estilos en línea establecidos en UiBinder plantillas de elementos, por ejemplo:

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

Para sugerir cómo podemos establecer el color1 color2 y del tema guardado en el servidor. Tenga en cuenta que esta NO es una pregunta del tema del módulo GWT.

Respuesta

4

Hasta donde yo sé, no es posible cambiar la plantilla uibinder durante el tiempo de ejecución (ya que se compila en javascript en tiempo de compilación y ya no se puede acceder en tiempo de ejecución).

Probablemente tendrá que cambiar manualmente los colores en su código gwt (= en archivos java, no en archivos .xml).

Sencillo:

  1. crear bases de datos de estructura para almacenar su información de color
  2. crear el código del servidor para obtener los colores de la base de datos
  3. aplicar GWT-servicio (y interfaz asíncrona y la clase de implementación servlet) para entregar información de color al cliente
  4. implementar código de cliente gwt, que solicita la información del color y luego establece los colores para su gwt-compone nts. Puede hacerlo así (use camel case como se describe en http://www.francoismaillet.com/blog/?p=68):

    widget.getElement(). GetStyle(). SetProperty ("background", colorValueFromDatabase);

Por supuesto, esta solución es bastante desagradable cuando se tienen que cambiar muchos widgets.

Alternativa 1:

Implementar un viejo y simple de Java Servlet (sin GWT), que puede proporcionar un archivo CSS (un servlet estándar, que los datos de cargas de color de base de datos y rendimientos que los colores como las definiciones CSS para la navegador). Use un enlace a ese servlet en su página de inicio de gwt-html.

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

} 

El problema con esta alternativa es que no se puede actualizar al instante la información del color. El usuario tiene que volver a cargar la página para ver los cambios en sus estilos de color.

Alternativa 2:

el uso de JavaScript (código nativo) para cambiar dinámicamente sus configuraciones css.

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

y

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

Conclusión

tres soluciones para su problema, no de ellos es realmente una solución - pero espero que le ayuda a la implementación de su código. ¡Buena suerte!

PD: mi código no se ha probado ...

+0

Si bien estas soluciones son utilizables, existe una solución basada en GWT mal documentada en la guía de desarrollo de CssResource. Ver mi respuesta – LINEMAN78

0
  1. Cambio entre los estilos es fácil. Ver programmatically select inline styles. Simplemente declare sus combinaciones de colores en diferentes clases de CSS y luego asígnelas a sus elementos. Esto puede ser engorroso si tienes muchos elementos.

  2. La manipulación de un estilo CSS existente es AFAIK no admitido directamente en GWT. Necesitarás recurrir a JSNI. Ver este tema: change css rules dynamically

2

Contrariamente a lo que respondió slartidan es posible aplazar estilos UiBinder a runtime substitution. La única advertencia a esto es que debe tener cargada la preferencia de color antes de intentar inyectar la hoja de estilo, que creo que se realiza en el método create y bind ui, y debe hacer que estas preferencias estén disponibles a través de un método estático.

<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> 
Cuestiones relacionadas