Author: [email protected]
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
-~----------~----~----~----~------~----~------~--~---
