Ottenere le risorse CS - qual è il vantaggio del modo migliore

Question

Ehi, sto sviluppando un GWT app e ora di fronte la parte CSS. Ho letto molto su questo argomento dal sito ufficiale, ma hanno ancora alcune domande e spero che qualcuno mi possa dare un suggerimento.

• Quando sto usando CSSResource gli stili CSS saranno raccolte in codice - giusto? Quindi non è possibile cambiare senza ricompilazione l'applicazione. Ma quello che voglio fare è quello di avere gli stili siano modificabili da "fuori".
• Allora, qual è questo CSSResource per, dal momento che non si può semplicemente cambiare un colore o un'immagine senza compilare l'applicazione di nuovo?
• Che cosa è il modo migliore per utilizzare i CSS in quanto ci sono alcuni modi (file css, CSSResource, stili in ui.xml) per fare questo?

I miei pensieri sono ora, che sto usando solo il file CSS normale per gestire tutta la mia roba "mutevole" e aggiungere il file alla testa, dal momento che non riesco a vedere il vantaggio di questa cosa CSSResource. Speriamo che qualcuno mi può aiutare in questo. Grazie.

Answer 1

E 'tutto dipende dal modo in cui si lavora con CSSes - se è necessario applicare alcune piccole modifiche, prima di loro prova "dal vivo", in Firebug strumento / simile. Durante la fase di progettazione (se non si dispone di una vista finalizzato di come si desidera stile la vostra applicazione ancora), si potrebbe desiderare di lavoro con i normali file CSS, ma non appena i chiarisce stile generale, si dovrebbe passare a ClientBundle / CssResource.

Perché? Permettetemi di rispondere, scrivendo un po 'di pensiero circa la obiettivi elencati sulla documentazione di CssResource pagina:

• Primaria

  • La compatibilità con i parser CSS non GWT-aware (ovvero eventuali estensioni dovrebbe essere la sintassi CSS valido)
    Questo non implica che il foglio di stile sarebbe necessariamente avere un senso solo se si visualizzato in un browser - il che significa, vogliamo utilizzare solo la sintassi CSS valido, non po 'di zucchero sintattico che di incomprensibili ad altri parser - potrebbe non essere così importante dal tuo punto di vista (anche se, di conseguenza, non è necessario cambiare la sintassi dei vostri stili esistenti)
  • Sintassi convalida - molto punto importante, IMHO. È possibile ottenere cose come il controllo mancanti (forse scritto male) classi CSS, errori di sintassi, ecc - qualcosa che doveva essere (di solito, dolorosamente) rintracciato tramite qualche strumento specifico sviluppatore del browser (Firebug). Qui, si ottiene quegli errori all'inizio, durante la fase di compilazione (o ancora più veloce, con l'aiuto del plugin Google Eclipse).
  • Minification - questo non è il run-of-the-mill minification, si ottiene anche selettore e proprietà fusione. Vedere il punto successivo anche.
  • Leverage GWT compilatore - se una classe CSS non viene utilizzato (il GWT compilatore possono fare una simile distinzione, dal momento che ha la visione d'insieme l'intera applicazione), è è potati e non incluso nel codice compilato. Quante volte hai trovato classi CSS che ci sono stati lasciati dopo alcune modifiche al progetto? Questo si prende cura di loro (vedi anche il punto CSS modularizzazione)
  • Diverso CSS per diversi browser , automaticamente - dal momento che il CSS generato in questo modo è incluso con il codice JS, si può (ed è) ottimizzato per il browser di destinazione - non c'è bisogno di includere lunghe hack IE in ogni permutazione
  • valutazione statica del contenuto - già accennato prima

• secondaria

  • Basic CSS modularizzazione
    • Via dipendenza-iniezione stile API - è possibile iniettare CssResources se necessario (ad esempio, per facilitare temi personalizzati nell'applicazione)
    • Widget può iniettare il proprio CSS solo quando è necessario - questo è uno dei miei punti preferiti, anche se in un primo momento non ho visto il suo significato - si divide il vostro (di solito) enorme, monolitico CSS file in piccoli moduli, uno per ogni widget che utilizza UiBinder (che a sua volta utilizza CssResource internamente), più probabilmente una CssResource globale per gli stili a livello di applicazione. Il risultato è un molto più pulito, più facile da MAINTstili CSS ain (almeno, nella mia esperienza). Questo anche significa, che se il codice non utilizza quella particolare Widget (forse perché hai utilizzato divisione OCDE e non è stato ancora caricato), non sarà possibile scaricare questi stili.
  • BiDi (in stile Janus ?) - supporto testo bidirezionale, non hanno usato, ma la documentazione sembrano promettenti:)
  • strisce di immagini CSS - sprite automagiche immagine generazione - che altro posso dire? ;)
  • "Migliorare CSS"
    • Costanti - ho sempre perso questa caratteristica nella specifica CSS - quando si cambia il colore primario, dovete trovare e sostituire in tutto il file (che possano portare ad alcuni errori, in cui è volete per usare il vecchio colore in alcuni posti) - questo lo rende più intuitivo, IMHO, con l'introduzione di costanti (attraverso la sintassi CSS valido e , senza alcuna penalità runtime)
    • espressioni semplici - si dovrebbe sfogliare la documentazione per vedere le possibilità c'è, davvero cool stuff

• Terziario

  • manipolazione Runtime (StyleElement. setEnabled () gestisce molti casi) - sull'iniezione foglio di stile (durante il runtime), vengono valutati alcuni valori -. questo permette di skinning, etc
  • compile-time class-name controllo (Java / CSS) - già menzionato le (evidenti) benefici di questo
  • offuscamento - questo è davvero troppo cool, il GWT compilatore può offuscare in modo sicuro tutti gli stili in CssResources, perché ha la visione d'insieme l'intera applicazione - in tal modo, il nome scontri sono impossibili. Ciò significa che è possibile utilizzare a lungo (ma non troppo lungo;)), i nomi delle classi significativi, senza preoccuparsi di come hanno un'incidenza sulle dimensioni dell'applicazione - sarà tutto ottenere offuscato a nifty, breve (lunghi anche 1-2 carattere), stringhe casuali. Ciò consente inoltre di definire uno stile .warning in due Widget e il compilatore capire che questi due stili sono in diversi spazi dei nomi (diversi Widget) e, quindi, devono essere trattati in modo diverso (che è, offuscato per nomi diversi).

---

A proposito di iniezione di stile

La classe StyleInjector permette l'iniezione di stili in fase di esecuzione. Inoltre, il CssResource permette (almeno secondo i documenti, non ho ancora provato) per la sostituzione di esecuzione. Ad esempio, quando si inietta un CssResource contenente le seguenti informazioni:

@eval userBackground com.module.UserPreferences.getUserBackground();
div {
  background: userBackground;
}

Il userBackground otterrà valutato e iniettato (al contrario di costanti , che vengono risolti in fase di esecuzione).