Revision: 6757
Author: [email protected]
Date: Mon Nov 9 03:00:34 2009
Log: Edited wiki page through web user interface.
http://code.google.com/p/google-web-toolkit/source/detail?r=6757
Modified:
/wiki/StyleInjector.wiki
=======================================
--- /wiki/StyleInjector.wiki Thu May 21 06:55:33 2009
+++ /wiki/StyleInjector.wiki Mon Nov 9 03:00:34 2009
@@ -32,20 +32,22 @@
In your `onModuleLoad`:
{{{
+// Preferred
+Resources.INSTANCE.css().ensureInjected();
+
+// Older style
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 number of
times the CSS is re-parsed by the browser.
+= Optimization =
+
+DOM manipulation, especially manipulating `style` elements, has a
measurable cost. In the interest of improving runtime performance,
StyleInjector does not manipulate the DOM immediately. Each call to
`CssResource.ensureInjected()` or `StyleInjector.inject()` will append the
contents to be injected into a buffer and use `Scheduler.scheduleFinally()`
to perform the DOM manipulation immediately before control returns to the
browser's event loop. This optimization makes the
inject-in-static-initializer pattern operate without excessive runtime cost.
+
+If it is necessary to have StyleInjector mutate the DOM immediately, there
are overloads of the `inject()` method which accept a boolean parameter
indicating that the DOM should be updated immediately.
+
+= 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
`injectAtEnd()` and `injectAtStart()` methods should be used instead of
`inject()`.
--~--~---------~--~----~------------~-------~--~----~
http://groups.google.com/group/Google-Web-Toolkit-Contributors
-~----------~----~----~----~------~----~------~--~---
