2012-08-15 2 views
10

Ich entwickle GWT-Anwendung in Eclipse im Hosted-Modus.GWT + Eclipse - wie statische Ressourcen wie CSS aktualisiert werden

Wenn ich etwas in CSS ändere, kann ich es im Browser nicht sehen. Ich versuche das vollständige Neuladen im Browser mit STRG + F5, Neustart meiner App in Eclipse und keine Änderung.

Nur was hilft, ist meine App neu zu erstellen mit Maven saubere Installation, App in Eclipse neu starten und dann kann ich Änderungen sehen. Das braucht viel Zeit.

Irgendeine Idee, was ich falsch mache? Ich denke, es muss einen besseren Weg geben.

Grüße, Lukas

+0

Ich bin nicht sicher, ob ich STRG + F5 vollständig vertrauen - Sie könnten versuchen, das Browsermenü gehen durch den Cache zu löschen und sehen, ob das einen Unterschied macht. –

+0

Auf jeden Fall sollte die Schaltfläche "Server neu starten" in der Entwicklungsmodusansicht (es sind die zwei kreisförmigen gelben Pfeile) genau das tun, wonach Sie fragen. Aber ich habe das Gleiche erlebt; es schneidet nicht immer. –

+0

Reload Web Server funktioniert nicht. Ich verwende eine klassische CSS-Datei, aber meine Kollegen, die mit GWT in einem anderen Projekt arbeiten, erzählen mir etwas über das Laden von CSS-Dateien mit dem Ressourcenpaket https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle. Ich habe es noch nicht studiert, aber ich werde es mir später ansehen und einige Erfahrungen veröffentlichen. Danke für den Rat. – Gondri

Antwort

0

Es gibt drei Möglichkeiten, dieses Problem zu lösen. Ich benutze Eclipse jedoch nicht (ich programmiere mit IntelliJ und benutze den gehosteten Modus von meinem Kommandozeilen-Skript Gradle), aber hoffentlich sollten sie trotzdem funktionieren.

Die erste ist, herauszufinden, wo Ihr gehosteter Modus die Dateien liefert, idealerweise ein explodiertes Kriegsverzeichnis. Dort finden Sie die CSS-Datei, die eine exakte Kopie Ihrer CSS-Datei darstellt, die Sie ändern möchten. Nehmen Sie Ihre Änderungen dort vor, laden Sie sie neu, ändern Sie sie usw., und vergessen Sie dann nicht, diese Datei zu kopieren und sie wieder in Ihr Quellverzeichnis einzufügen. Ich benutze VIM und wechsle hin und her. Ich bin sicher, dass Sie ein Skript schreiben könnten, das die Datei zurückkopiert, wenn der gehostete Modus endete, wenn Sie ein schärferer waren.

Die zweite Methode (und eine viel bessere Methode), wie user1570921 hervorhebt, besteht darin, das CSS in Ihren UIBinder-Code einzubetten. Zum Beispiel könnten Sie haben:

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

In dem obigen Beispiel, können Sie die CSS in der ui bearbeiten könnte: Stil Abschnitt, drücken Sie F5, und die Änderungen sehen, dann weitere Änderungen vornehmen, usw. Keine Notwendigkeit, Dateien zu kopieren Über.

Hier ist ein guter Link für weitere Informationen: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Hello_Stylish_World

Der dritte Weg ist Google Chrome Dev-Tools (Ctrl-Shift-I) oder F12 in Firefox zu verwenden. Dort können Sie das CSS inline bearbeiten, ohne Ihre Datei zu ändern. Stellen Sie alle richtigen Werte her, fügen Sie neue hinzu, entfernen Sie alte und nehmen Sie dann die gleichen Änderungen an Ihrer CSS-Datei vor. Dann müssen Sie nicht erneut bereitstellen, um Änderungen zu sehen.

Ich persönlich benutze eine Kombination von # 2 und # 3.

+3

Der Autor der Frage befürwortet tatsächlich die Verwendung eines CSS-Client-Bundle, nicht Eingabe von CSS in UI: Binder, die ich glaube, ist die schlechteste Option. Jede CSS-Regel in der App muss einmal an einer Stelle geschrieben werden - jeder andere Ansatz führt zu Inkonsistenzen und erfordert viel Arbeit, wenn Änderungen erforderlich sind, ganz zu schweigen von der Unterstützung mehrerer Skins. –

1

Ich verwende eine externe CSS-Datei für meine App, und ich sehe sofort alle Änderungen in meinem Browser bei einer einfachen Aktualisierung (kein Leeren des Cache, Serverneustart usw.) in Chrome und Firefox.

Das Problem hängt möglicherweise mit dem Speicherort der Datei zusammen. Meine Datei befindet sich im Verzeichnis/war und ich bearbeite es direkt. Eine andere Möglichkeit ist, wie Sie Ihre Datei auf Ihrer Host-Seite referenzieren. Stellen Sie sicher, dass Sie einen relativen Pfad wie "/myCss.css" haben.

2

Das Problem ist, dass im Dev-Modus der src Webapp-Ordner nur beim Start als Ziel kopiert wird und DevMode ihn nicht aktualisiert. Als Workaround können Sie copy-resources verwenden, die Änderungen im laufenden Betrieb übernehmen.

<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

Versuchen Sie, eine Linie <stylesheet src="sheet.css" /> oder <stylesheet src="/sheet.css" /> in Ihre project.gwt.xml Datei zu setzen.

Grüße,

Eddy

Verwandte Themen