Author: b...@google.com Date: Thu May 21 06:53:08 2009 New Revision: 5452 Added: wiki/StyleInjector.wiki
Log: Copy StyleInjector wiki page from incubator and update with current information. Added: wiki/StyleInjector.wiki ============================================================================== --- (empty file) +++ wiki/StyleInjector.wiki Thu May 21 06:53:08 2009 @@ -0,0 +1,51 @@ +#summary A utility class for injecting CSS styleshees + += Goal = + + * Provide a cross-browser abstraction for injecting additional CSS at runtime. + += Details = + +StyleInjector is part of the `com.google.gwt.dom.user` package. + +Define your ClientBundle and CssResource: +{{{ +public interface Resources extends ClientBundle { + public static final Resources INSTANCE = + GWT.create(Resources.class); + + @ImageOptions(repeatStyle = RepeatStyle.Horizontal) + @Source("myBackground.png") + public ImageResource backgroundFunction(); + + @Source("myCss.css") + public CssResource css(); +} +}}} + +The CSS contents (see CssResource for more information): +{{{ +...@sprite .some .selector { + gwt-image: 'backgroundFunction'; +} +}}} + +In your `onModuleLoad`: +{{{ +StyleInjector.injectStylesheet(Resources.INSTANCE.css().getText()); +}}} + + +You now have your stylesheet applied to the document while taking advantage of strongly-named or inlined resource URLs. Because the standard I18N-style of resource naming is applied to the `ImageResource` instance, it is possible to provide localized CSS background images without the need for multiple, per-locale stylesheets. It is now possible to have `myBackground_fr.png` and `myBackground_en.png` substituted based on the `locale` deferred binding property. + +It is possible to update the contents of a previously-injected stylesheet using the `setContents()` method: +{{{ +StyleElement elt = StyleInjector.injectStylesheet("CSS contents"); +StyleInjector.setContents(elt, "New CSS contents"); +}}} + += Caveats = + +Certain browsers have an upper bound on the total number of stylesheets that can be injected. In this case, StyleInjector will append to previously-created stylesheets when `injectStylesheet` is called. If the developer wishes to maintain relative ordering of CSS content, the `injectStylesheetAtEnd` and `injectStylesheetAtStart` methods should be used instead of `injectStylesheet`. + +In general, it is more efficient to concatenate the output of multiple CssResource instances before injecting the CSS to reduce the amount of time the CSS is re-parsed by the browser. --~--~---------~--~----~------------~-------~--~----~ http://groups.google.com/group/Google-Web-Toolkit-Contributors -~----------~----~----~----~------~----~------~--~---