Friday, May 8, 2015

GWT - how dynamically change a static css of theme in GWT Dev Mode

We know that all static resources e.g. images, css should be kept in project structure in static way e.g. through resource or public packages. This principle supposes that these kind of resources rarely will be changed. But if in your RIA GWT project you have to override some theme's css by some custom-style.css and see the result lets say "right now" in Dev Mode there would be the problem because if both css stored statically you can not dynamically see the result of the change just by refreshing the browser page e.g. F5.

If you want to see your css changes dynamically in GWT Dev Mode you have to inject your e.g. custom-style.css through ClientBundle somewhere in the beginning e.g. onModuleLoad().

===== Create this class inside resource package in you java src ====
 
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.CssResource.NotStrict;

/**
 * Created by panoand on 08/05/2015.
 */
public interface AppResources extends ClientBundle {

    AppResources INSTANCE = GWT.create(AppResources.class);

    @Source("css/custom-style.css")
    @NotStrict
    CssResource foo();
}

===== In your EntryPoint class put it inside onLoadModule() methode =====
AppResources.INSTANCE.foo().ensureInjected();