Author: lfryc(a)redhat.com Date: 2011-11-16 11:29:56 -0500 (Wed, 16 Nov 2011) New Revision: 22943 Modified: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-RichFaces_overview.xml modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-Skinning_and_theming.xml Log: RFPL-1850: Document workaround for h:outputStylesheet head and components' resources Modified: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-RichFaces_overview.xml =================================================================== --- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-RichFaces_overview.xml 2011-11-16 16:29:30 UTC (rev 22942) +++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-RichFaces_overview.xml 2011-11-16 16:29:56 UTC (rev 22943) @@ -327,6 +327,11 @@ JSF 2 does not allow resources such as JavaScript or Cascading Style Sheets (<acronym>CSS</acronym>) to be added if the element requiring the resource is not initially present in the JSF tree. As such, components added to the tree via Ajax must have any required resources already loaded. In RichFaces, any components added to the JSF tree should have components with corresponding resources included on the main page initially. To facilitate this, components can use the <code>rendered="false"</code> setting to not be rendered on the page. </para> </listitem> + <listitem> + <para> + JSF does render resource links (stylesheets, scripts) in order of occurence, thus if you add <code>&lt;h:outputStylesheet&gt;</code> to the <code>&lt;h:head&gt;</code> section, JSF will render it before the RichFaces resource links (dependencies of RichFaces components). To be able to overwrite RichFaces stylesheets and re-use RichFaces JavaScript implementation, you need to render <code>&lt;h:outputStylesheet target=&quot;head&quot;&gt;</code> to the <code>&lt;h:body&gt;</code> section (safe solution is to place it on the end of the section; however to keep readability, you can use start of the section). + </para> + </listitem> <listitem> <para> Switching RichFaces skins via Ajax during runtime should be avoided, as this requires all the stylesheets to be reloaded. Modified: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-Skinning_and_theming.xml =================================================================== --- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-Skinning_and_theming.xml 2011-11-16 16:29:30 UTC (rev 22942) +++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer_Guide-Skinning_and_theming.xml 2011-11-16 16:29:56 UTC (rev 22943) @@ -432,14 +432,29 @@ </listitem> </varlistentry> <varlistentry> - <term>Custom style classes</term> + <term>Custom components style classes</term> <listitem> <para> Individual components can use the <varname>styleClass</varname> attribute to use a unique style class. Add the new style class to the application CSS and reference it from an individual component with the <varname>styleClass</varname> attribute. </para> </listitem> </varlistentry> + <varlistentry> + <term>Overwriting stylesheets in application</term> + <listitem> + <para> + You can load custom stylesheets using <code>&lt;h:outputStylesheet&gt;</code> which rewrites of extends styles defined for style classes of components. + </para> + </listitem> + </varlistentry> </variablelist> + + <note> + <title>Customizing skins by rewriting/extending component style classes</title> + <para> + If you want to extend/overwrite style sheet definitions with own stylesheets, make sure you place definitions to be rendered in right order of occurence (see <link linkend="sect-Developer_Guide-RichFaces_overview-Restrictions">Restrictions</link> section for details). + </para> + </note> <example id="exam-Developer_Guide-Using_skins-Simple_skinning_example"> <title>Simple skinning example</title>