Removing Injected CssResources at Runtime

[Hulles]

Is there any way (within stock GWT) to remove CssResources on the fly? I currently use JSNI to do just that when I change themes in my application. The JSNI code was adapted from the Showcase example, btw. The JSNI I'm currently using (or rather, was using before my CssResource adventures) follows and it seems to work great:

static native void removeStyleSheet(String ssID)/*-{

var ss = $doc.getElementById(ssID);

if (ss != null) {

ss.parentNode.removeChild(ss);

}

}-*/;

static native void loadStyleSheet(String cssName, String ssID)/*-{

var ss = $doc.getElementById(ssID);

if (ss != null) {

ss.parentNode.removeChild(ss);

}

var fileref=document.createElement("link");

fileref.setAttribute("id", ssID);

fileref.setAttribute("rel", "stylesheet");

fileref.setAttribute("type", "text/css");

fileref.setAttribute("href", cssName);

var hd = $doc.getElementsByTagName("head")[0];

hd.appendChild(fileref);

}-*/;

However, because it would be nice to a) conditionally change background images instead of cascading yet another stylesheet just for a new image, and b) use ClientBundle for the background images, I thought I'd switch to CssResource and StyleInjector. Great idea, except I don't want to infinitely cascade stylesheets or let stylesheets from other themes linger. It is much cleaner to, in one place (called ThemeSelector, oddly enough), swap an old theme stylesheet out and swap a new one in using the above code. The themes then each cascade from the main stylesheet, not each other. So, before I give up and restore the stylesheets and images and code from version control, does anyone have any ideas on this? Am I missing something obvious?

By the way, if you want to see the way theme selection works in practice you can go to my website http://projectsandy.org and take a look. You don't have to join the program to swap themes, just use the button in the upper right hand corner. And even though I am not a graphics designer by any means I had HUGE fun designing the themes. Eventually I hope to have user-submitted themes.

Thanks.

[Ed]

I don't think that GWT is currently well suited for doing this dynamically.

It is however well suited to do this statically through a refresh of the page.

I do it statically by using @eval in my css files that reference preference classes. Preference classes are selected through a theme and the theme is loaded through deferred binding in the gwt.xml file.

See also: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Runtime_substitution

This mechanism works well.

However, doing it dynamically might be tricky as CssResource contains a method ensureInjected() method to inject the css in the DOM, but there doesn't exists a method to remove it (as far as I know).

The generated style names are unique per CssResource sub class type (see above link). So calling ensureInjected() on the same CssResource  class with another Css file  from another ClientBundle will override the previous injected names (I noticed this behavior due to some bugs in a app I was building). 

You could do it in this way: that is a ClientBundle per theme that contains the smae CssResource with another css file, but it would be more elegant to be able to remove the first injected css. I can do this probably, but have to digg in the gwt code and write some Js code called from GWT.

- Ed

[Thomas Broyer]

How about "making other rules apply" rather than changing the "content" of the rules that apply? I.e. have ".theme1 .someClass" in "theme1" and ".theme2 .someClass" in "theme2", and simply switch the class name on the Document.get().getBody() to switch theme.

That way, you don't need to "uninstall" the current theme before "installing" the new one.

[Ed Bras]

Yes of course, simple and straight forward...  Just change the parent (cascading) style.

On Tue, Dec 20, 2011 at 11:28 AM, Thomas Broyer <t.br...@gmail.com> wrote:

How about "making other rules apply" rather than changing the "content" of the rules that apply? I.e. have ".theme1 .someClass" in "theme1" and ".theme2 .someClass" in "theme2", and simply switch the class name on the Document.get().getBody() to switch theme.

That way, you don't need to "uninstall" the current theme before "installing" the new one.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/9Jxk-QL8uBsJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.