Come impostare i colori stile CSS in GWT

Question

Ho un'applicazione GWT + AppEngine che consente agli utenti di creare sondaggi online. Voglio consentire al creatore del sondaggio di scegliere tra una varietà di temi per il suo sondaggio. Salveremo il tema scelto da un autore di sondaggi sul server e ogni volta che un rispondente al sondaggio accede al sondaggio otterrà le domande con il tema scelto.

Un tema per noi significa un set di 4-5 colori che utilizzeremo per definire la pagina del sondaggio. La nostra applicazione lato client è un'applicazione GWT con stili impostati inline in UiBinder modelli elementi, ad esempio:

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

si prega di suggerire come possiamo impostare la color1 color2 e dal tema salvato sul server. Si prega di notare che questa NON è una domanda sul tema del modulo GWT.

Answer 1

Per quanto ne so non è possibile cambiare il modello di uibinder durante il runtime (poiché è compilato in javascript in compiletime e non è più accessibile in fase di runtime).

Probabilmente dovrai modificare manualmente i colori nel tuo codice gwt (= nei file java, non nei file .xml).

Dritto in avanti:

1. creare il database-struttura per la memorizzazione delle informazioni di colore
2. creare il codice server per ottenere i colori dal database
3. implementare GWT-servizio (e interfaccia asincrona e classe di implementazione servlet) per fornire informazioni sul colore al cliente

4. implementare il codice client gwt, che richiede le informazioni sul colore e quindi imposta i colori per il tuo gwt-componente nti. Puoi farlo in questo modo (usa il caso cammello come descritto allo http://www.francoismaillet.com/blog/?p=68):

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

Ovviamente questa soluzione è piuttosto scomoda quando è necessario modificare molti widget.

Alternativa 1:

implementare una pianura vecchio Java Servlet (senza GWT), che può fornire un file CSS (una servlet di serie, che carica i dati del colore dal database e ritorni che colori come definizioni CSS al browser). Utilizzare un collegamento a tale servlet nella pagina iniziale di 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; 
    } 

} 

Il problema con questa alternativa è che non è possibile aggiornare immediatamente le informazioni sul colore. L'utente deve ricaricare la pagina per vedere i cambiamenti nei suoi stili di colore.

Alternativa 2:

usare javascript (codice nativo) per modificare dinamicamente le configurazioni css.

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

e

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

Conclusione

Tre soluzioni per il vostro problema, non di loro è davvero una soluzione - ma spero che ti aiuta a implementare il codice. In bocca al lupo!

PS: il mio codice non è testato ...

Answer 2

1. commutazione tra stili è facile. Vedi programmatically select inline styles. Basta dichiarare le combinazioni di colori in diverse classi CSS e quindi assegnarle ai tuoi elementi. Questo può essere ingombrante se hai molti elementi.

2. Manipolare uno stile CSS esistente è AFAIK non direttamente supportato in GWT. Dovrai ricorrere a JSNI. Vedere questa discussione: change css rules dynamically

Answer 3

Contrariamente a quanto slartidan risposto è possibile rinviare stili UIBinder a runtime substitution. L'unica avvertenza a questo è che devi avere la preferenza cromatica caricata prima di provare a iniettare il foglio di stile, che credo sia fatto con il metodo di creazione e associazione ui e devi rendere queste preferenze disponibili tramite un metodo statico.

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