2012-08-15 14 views
10

Sto sviluppando un'applicazione GWT in Eclipse in modalità Hosted.GWT + Eclipse - come aggiornare le risorse statiche come i CSS

Quando cambio qualcosa in CSS non riesco a vederlo nel browser. Sto provando a ricaricare completamente nel browser usando CTRL + F5, riavviando la mia app in Eclipse e senza modifiche.

L'unica cosa che aiuta è ricostruire la mia app usando l'installazione pulita di Maven, riavviare l'app in Eclipse e quindi posso vedere le modifiche. Questo richiede molto tempo.

Qualche idea su cosa sto facendo male? Penso che ci debba essere un modo migliore.

saluti, Lukas

+0

non sono sicuro ho completa fiducia CTRL + F5 - si potrebbe provare a passare attraverso menu del browser per cancellare la cache e vedere se questo fa la differenza. –

+0

In ogni caso, il pulsante "Riavvia server" nella vista Modalità sviluppo (si tratta delle due frecce gialle circolari) dovrebbe fare proprio quello che stai chiedendo. Ma ho vissuto la stessa cosa; non sempre lo taglia. –

+0

Il server Web di ricaricamento non funziona. Sto usando il classico file CSS, ma i miei colleghi che lavorano con GWT in diversi progetti raccontano qualcosa sul caricamento differente dei file CSS usando il pacchetto di risorse https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle. Non l'ho ancora studiato ma lo vedrò più avanti e pubblicherò alcune esperienze. Grazie per il consiglio. – Gondri

risposta

0

Ci sono 3 modi per risolvere questo problema. Non uso comunque eclipse (utilizzo codice con IntelliJ e utilizzo la modalità hosted dal mio script Gradle a riga di comando), ma speriamo che tutti lavorino comunque.

Il primo è capire da dove viene la modalità ospitata a servire i file, idealmente una directory di guerra esplosa. Qui puoi trovare il file CSS, che sarà una replica esatta del tuo file CSS che stai cercando di cambiare. Apporta le tue modifiche lì, ricarica, modifica, ecc, e poi quando hai finito non dimenticare di copiare quel file e incollarlo di nuovo nella directory di origine. Io uso VIM e cambio avanti e indietro. Sono sicuro che potresti scrivere uno script che ha copiato il file quando è finita la modalità host, se eri un keener.

Il secondo metodo (e un metodo molto migliore), come sottolinea l'utente1570921, è di incorporare il codice CSS nel codice UIBinder. Ad esempio, si potrebbe avere:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' 
     xmlns:g='urn:import:com.google.gwt.user.client.ui'> 

<ui:style> 
    .outsidePanel { 
     background: #00F; 
    } 
</ui:style> 

<g:HTMLPanel styleName="{style.outsidePanel}"> 
    Hello, World! 
</g:HTMLPanel> 

Nel precedente esempio, è possibile modificare il CSS all'interno della ui: sezione di stile, premere F5 e vedere i cambiamenti, quindi apportare ulteriori modifiche, ecc Non c'è bisogno di copiare i file al di sopra di.

Ecco un buon link per maggiori informazioni: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Hello_Stylish_World

Il terzo modo è quello di utilizzare di Google Chrome Dev Tools (Ctrl-Shift-I) o F12 in Firefox. Qui puoi modificare il CSS in linea senza modificare il tuo file. Estrai tutti i valori corretti, aggiungi quelli nuovi, rimuovi quelli vecchi e apporta le stesse modifiche al tuo file CSS. Quindi non è necessario mantenere il ridistribuzione per vedere le modifiche.

Personalmente uso una combinazione di # 2 e # 3.

+3

L'autore della domanda difende in realtà l'utilizzo di un pacchetto client CSS, non l'inserimento di CSS nell'interfaccia utente: Binder, che credo sia l'opzione peggiore. Ogni regola CSS nell'app deve essere scritta una volta nello stesso posto - qualsiasi altro approccio potrebbe portare a incongruenze e richiedere molto lavoro se sono richieste modifiche, per non parlare dell'assenza di supporto per più skin. –

1

Uso un file CSS esterno per la mia app, e vedo immediatamente tutte le modifiche nel mio browser al semplice aggiornamento (senza svuotare la cache, riavvio del server, ecc.) In Chrome e Firefox.

Il problema potrebbe essere correlato alla posizione del file. Il mio file si trova nella directory/war e lo modifico direttamente. Un'altra possibilità è come fai riferimento al tuo file nella tua pagina host. Assicurati di avere un percorso relativo come "/myCss.css".

2

Il problema è che in modalità dev la cartella src webapp viene copiata sulla destinazione solo all'avvio e DevMode non la aggiorna. Per ovviare al problema, è possibile utilizzare copy-resources, che si occupano di applicare le modifiche al volo.

<plugin> 
     <artifactId>maven-resources-plugin</artifactId> 
     <version>3.0.1</version> 
     <executions> 
      <execution> 
       <id>copy-resources</id> 
       <phase>validate</phase> 
       <goals> 
        <goal>copy-resources</goal> 
       </goals> 
       <configuration> 
        <outputDirectory>${project.build.directory}/gwt-webapp</outputDirectory> 
        <resources> 
         <resource> 
          <directory>src/main/webapp</directory> 
          <filtering>true</filtering> 
         </resource> 
        </resources> 
       </configuration> 
      </execution> 
     </executions> 
    </plugin> 
0

tenta di mettere una linea <stylesheet src="sheet.css" /> o <stylesheet src="/sheet.css" /> nel file project.gwt.xml.

saluti,

Eddy

Problemi correlati