Gestion des skins et ClientBundle

With GWT 2.0 ClientBundle appeared. This mechanism is very interesting because it optimize the loading time of a web application resources, such as CSS files, images files, and many others.
This mechanism also allows typing of CSS using Java interfaces to access styles; The compiler verifies the existence of CSS classes used.
To do this, simply declare an interface that inherits CssResource and define methods corresponding to names of CSS classes.
To inject the CSS in the HTML page is then necessary to generate an instance of the CSS resource through : GWT.create (MyCSSResource.class). Then call the method "ensureInjected ()" on this instance.

This mechanism works very well, now let us see how to manage skin with this mechanism.

The idea is to change style sheet dynamically. The HTML page elements remain unchanged and refer to the same CSS classes.

For this, we can use the inheritance mechanism between interfaces CssRessources to structure CSS skins. To have identical CSS class names, do not forget to add the annotation @Shared on parent interface.

To inject the selected CSS skin, do not use the method "ensureInjected ()" because it controls the injection of resources and CSS will injected only once. Should be used instead : StyleInjector.inject (cssStyle.getText ())

But not to overload the page, we must removing the contents of the previous CSS, stored in the header of the page.

Here an example of code :

To make dynamic discovery of skins, we can use a generator (see previous article).

Stay tuned