Author: SeanRogers Date: 2010-04-13 04:10:25 -0400 (Tue, 13 Apr 2010) New Revision: 16757 Added: root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Skin_changing_example.xml_sample root/docs/trunk/Developer_Guide/en-US/images/figu-Developer_Guide-Skinning_and_theming-Skin_changing_example.png Modified: root/docs/trunk/Developer_Guide/en-US/Author_Group.xml root/docs/trunk/Developer_Guide/en-US/Book_Info.xml root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml root/docs/trunk/Developer_Guide/en-US/Preface.xml root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Advanced_features.xml root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Basic_concepts.xml root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Getting_started_with_RichFaces.xml root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-RichFaces_overview.xml root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Skinning_and_theming.xml Log: Updated skinning guide Modified: root/docs/trunk/Developer_Guide/en-US/Author_Group.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Author_Group.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/Author_Group.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -1,7 +1,5 @@ <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE authorgroup PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [ -<!ENTITY % BOOK_ENTITIES SYSTEM "Developer_Guide.ent"> -%BOOK_ENTITIES; ]> <authorgroup> <author> @@ -15,47 +13,36 @@ </affiliation> <email&gt;serogers(a)redhat.com&lt;/email&gt; </author> - <collab> - <collabname>Svetlana Mukhina</collabname> - <affiliation> - <orgname>Exadel</orgname> - <orgdiv>Documentation</orgdiv> - </affiliation> + <collab><collabname>Svetlana Mukhina</collabname> + <affiliation> + <orgname>Exadel</orgname> + <orgdiv>Documentation</orgdiv> + </affiliation> + </collab><collab><collabname>Anastasiya Bogachuk</collabname> + <affiliation> + <orgname>Exadel</orgname> + <orgdiv>Documentation</orgdiv> + </affiliation> + </collab><collab><collabname>Gleb Galkin</collabname> + <affiliation> + <orgname>Exadel</orgname> + <orgdiv>Documentation</orgdiv> + </affiliation> + </collab><collab><collabname>Mikhail Sorokin</collabname> + <affiliation> + <orgname>Exadel</orgname> + <orgdiv>Documentation</orgdiv> + </affiliation> + </collab><collab><collabname>Alexander Tsebro</collabname> + <affiliation> + <orgname>Exadel</orgname> + <orgdiv>Documentation</orgdiv> + </affiliation> + </collab><collab><collabname>Olga Chikvina</collabname> + <affiliation> + <orgname>Exadel</orgname> + <orgdiv>Documentation</orgdiv> + </affiliation> </collab> - <collab> - <collabname>Anastasiya Bogachuk</collabname> - <affiliation> - <orgname>Exadel</orgname> - <orgdiv>Documentation</orgdiv> - </affiliation> - </collab> - <collab> - <collabname>Gleb Galkin</collabname> - <affiliation> - <orgname>Exadel</orgname> - <orgdiv>Documentation</orgdiv> - </affiliation> - </collab> - <collab> - <collabname>Mikhail Sorokin</collabname> - <affiliation> - <orgname>Exadel</orgname> - <orgdiv>Documentation</orgdiv> - </affiliation> - </collab> - <collab> - <collabname>Alexander Tsebro</collabname> - <affiliation> - <orgname>Exadel</orgname> - <orgdiv>Documentation</orgdiv> - </affiliation> - </collab> - <collab> - <collabname>Olga Chikvina</collabname> - <affiliation> - <orgname>Exadel</orgname> - <orgdiv>Documentation</orgdiv> - </affiliation> - </collab> </authorgroup> Modified: root/docs/trunk/Developer_Guide/en-US/Book_Info.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Book_Info.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/Book_Info.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -11,11 +11,8 @@ <pubsnumber>1</pubsnumber> <abstract> <para> -Read this book for a comprehensive guide to getting started and -working with RichFaces &VERSION;. It includes details of the -architecture, the framework's use in different applications, -and skinning implementations. -</para> + Read this book for a comprehensive guide to getting started and working with RichFaces &VERSION;. It includes details of the architecture, the framework's use in different applications, and skinning implementations. + </para> </abstract> <corpauthor> <inlinemediaobject> @@ -31,7 +28,7 @@ <year>&YEAR;</year> <holder>&HOLDER;</holder> </copyright> - <!-- FOR PUBLICAN --><xi:include href="Common_Content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><!-- FOR JDOCBOOK: --><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="fallback_content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> + <!-- FOR PUBLICAN --><xi:include href="Common_Content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><!-- FOR JDOCBOOK: --><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="fallback_content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> </xi:fallback> </xi:include> <xi:include href="Author_Group.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> Modified: root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -3,7 +3,7 @@ ]> <book status="draft"> <xi:include href="Book_Info.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> - <!-- <xi:include href="Preface.xml" xmlns:xi="http://www.w3.org/2001/XInclude"></xi:include> --><xi:include href="chap-Developer_Guide-Introduction.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> + <!-- <xi:include href="Preface.xml" xmlns:xi="http://www.w3.org/2001/XInclude"></xi:include> --><xi:include href="chap-Developer_Guide-Introduction.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> <xi:include href="chap-Developer_Guide-Getting_started_with_RichFaces.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> <xi:include href="chap-Developer_Guide-RichFaces_overview.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> <xi:include href="chap-Developer_Guide-Basic_concepts.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> Modified: root/docs/trunk/Developer_Guide/en-US/Preface.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Preface.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/Preface.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -3,10 +3,10 @@ ]> <preface id="pref-Developer_Guide-Preface"> <title>Preface</title> - <!-- FOR JDOCBOOK --><xi:include href="Common_Content/Conventions.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><!-- FOR PUBLICAN --><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="fallback_content/Conventions.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> + <!-- FOR JDOCBOOK --><xi:include href="Common_Content/Conventions.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><!-- FOR PUBLICAN --><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="fallback_content/Conventions.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> </xi:fallback> </xi:include> - <!-- PUBLICAN'S ORIGINAL XINCLUDES --><xi:include href="Feedback.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="Common_Content/Feedback.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><!-- FOR JDOCBOOK --><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="fallback_content/Feedback.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> + <!-- PUBLICAN'S ORIGINAL XINCLUDES --><xi:include href="Feedback.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="Common_Content/Feedback.xml" xmlns:xi="http://www.w3.org/2001/XInclude"><!-- FOR JDOCBOOK --><xi:fallback xmlns:xi="http://www.w3.org/2001/XInclude"><xi:include href="fallback_content/Feedback.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> </xi:fallback> </xi:include> </xi:fallback> Modified: root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Advanced_features.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Advanced_features.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Advanced_features.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -56,14 +56,16 @@ RichFaces uses a filter to correct the code received on an Ajax request. During a regular JSF request, a browser makes corrections independently. For Ajax requests, a filter is needed to prevent layout destruction. This is because a received code could differ from a code validated by a browser, and a browser does not make any corrections. Refer to <xref linkend="sect-Developer_Guide-Architecture-Ajax_Filter" /> for further details on how the Ajax filter works. </para> <para> - <xref linkend="exam-Developer_Guide-Advanced_features-Example_filter" /> shows how to set a filter in the <filename>web.xml</filename> file of an application. + <xref linkend="exam-Developer_Guide-Filters-Example_filter" /> shows how to set a filter in the <filename>web.xml</filename> file of an application. </para> - <example id="exam-Developer_Guide-Advanced_features-Example_filter"> + <example id="exam-Developer_Guide-Filters-Example_filter"> <title>Example filter</title> -<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Advanced_features-Example_filter.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + +<programlisting language="XML" role="XML"><xi:include href="extras/exam-Developer_Guide-Advanced_features-Example_filter.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> +</programlisting> </example> <para> - Different types of filters can be configured for pages in the same application. There are three filter types: + Different types of filters can be configured for pages in the same application. There are three filter types: <variablelist> <varlistentry> <term><literal>TIDY</literal></term> @@ -92,14 +94,16 @@ </variablelist> </para> <para> - <xref linkend="exam-Developer_Guide-Advanced_features-Example_filter_configuration" /> shows how to configure a filter through the <filename>web.xml</filename> file. + <xref linkend="exam-Developer_Guide-Filters-Example_filter_configuration" /> shows how to configure a filter through the <filename>web.xml</filename> file. </para> - <example id="exam-Developer_Guide-Advanced_features-Example_filter_configuration"> + <example id="exam-Developer_Guide-Filters-Example_filter_configuration"> <title>Example filter configuration</title> -<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Advanced_features-Example_filter_configuration.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + +<programlisting language="XML" role="XML"><xi:include href="extras/exam-Developer_Guide-Advanced_features-Example_filter_configuration.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> +</programlisting> </example> <para> - The <parameter>ORDER</parameter> parameter specifies the order in which particular filter types are used for code correction: first <literal>NONE</literal>, then <literal>NEKO</literal>, then <literal>TIDY</literal>. Two sets of pages are specified as using specific filter types: + The <parameter>ORDER</parameter> parameter specifies the order in which particular filter types are used for code correction: first <literal>NONE</literal>, then <literal>NEKO</literal>, then <literal>TIDY</literal>. Two sets of pages are specified as using specific filter types: <variablelist> <varlistentry> <term><code>/pages/performance\.xhtml,/pages/default.*\.xhtml</code></term> @@ -121,23 +125,24 @@ </para> </section> - <section id="sect-Developer_Guide-Advanced_features-Scripts_and_styles"> + <section id="sect-Developer_Guide-Advanced_features-Script_and_style_loading"> <title>Script and style loading</title> <para> Scripts and styles are normally loaded into a RichFaces application on demand. The default loading strategy can be altered to suit certain applications by specifying the strategy in the <filename>web.xml</filename> file. </para> - <section> + <section id="sect-Developer_Guide-Script_and_style_loading-org.richfaces.LoadScriptStrategy"> <title><code>org.richfaces.LoadScriptStrategy</code></title> <para> The script-loading strategy is specified as follows: </para> + <programlisting language="XML" role="XML">&lt;context-param&gt; &lt;param-name&gt;org.richfaces.LoadScriptStrategy&lt;/param-name&gt; &lt;param-value&gt;ALL&lt;/param-value&gt; &lt;/context-param&gt; </programlisting> <para> - The <sgmltag>&lt;param-value&gt;</sgmltag> element can be set to one of three values: + The <sgmltag>&lt;param-value&gt;</sgmltag> element can be set to one of three values: <variablelist> <varlistentry> <term><literal>ALL</literal></term> @@ -172,18 +177,20 @@ </variablelist> </para> </section> - <section> + + <section id="sect-Developer_Guide-Script_and_style_loading-org.richfaces.LoadStyleStrategy"> <title><code>org.richfaces.LoadStyleStrategy</code></title> <para> The style-loading strategy is specified as follows: </para> + <programlisting language="XML" role="XML">&lt;context-param&gt; &lt;param-name&gt;org.richfaces.LoadStyleStrategy&lt;/param-name&gt; &lt;param-value&gt;ALL&lt;/param-value&gt; &lt;/context-param&gt; </programlisting> <para> - The <sgmltag>&lt;param-value&gt;</sgmltag> element can be set to one of three values: + The <sgmltag>&lt;param-value&gt;</sgmltag> element can be set to one of three values: <variablelist> <varlistentry> <term><literal>ALL</literal></term> @@ -212,6 +219,7 @@ </variablelist> </para> </section> + </section> <section id="sect-Developer_Guide-Advanced_features-Error_handling"> @@ -222,6 +230,7 @@ <para> To define handlers for application exceptions, add the following code to your <filename>web.xml</filename> file: </para> + <programlisting language="XML" role="XML">&lt;context-param&gt; &lt;param-name&gt;org.ajax4jsf.handleViewExpiredOnClient&lt;/param-name&gt; &lt;param-value&gt;true&lt;/param-value&gt; @@ -232,23 +241,26 @@ <para> Custom error handlers for the <methodname>onError</methodname> and <methodname>onExpire</methodname> events do not work under MyFaces. MyFaces handles exceptions through its internal debug page. Use the following code in the <filename>web.xml</filename> file to prevent this behavior in MyFaces: </para> + <programlisting language="XML" role="XML">&lt;context-param&gt; &lt;param-name&gt;org.apache.myfaces.ERROR_HANDLING&lt;/param-name&gt; &lt;param-value&gt;false&lt;/param-value&gt; &lt;/context-param&gt; </programlisting> </note> - <section id="sect-Developer_Guide-Advanced_features-Handling_request_errors"> + <section id="sect-Developer_Guide-Error_handling-Handling_request_errors"> <title>Handling request errors</title> <para> - To execute custom JavaScript code on the client when an error occurs during an Ajax request, redefine the standard <methodname>A4J.AJAX.onError</methodname> method, as shown in <xref linkend="exam-Developer_Guide-Advanced_features-Example_request_error" />. + To execute custom JavaScript code on the client when an error occurs during an Ajax request, redefine the standard <methodname>A4J.AJAX.onError</methodname> method, as shown in <xref linkend="exam-Developer_Guide-Handling_request_errors-Example_request_error" />. </para> - <example id="exam-Developer_Guide-Advanced_features-Example_request_error"> + <example id="exam-Developer_Guide-Handling_request_errors-Example_request_error"> <title>Example request error</title> -<programlisting language="Java" role="JAVA"><xi:include parse="text" href="extras/exam-Developer_Guide-Advanced_features-Example_request_error.js" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + +<programlisting language="Java" role="JAVA"><xi:include href="extras/exam-Developer_Guide-Advanced_features-Example_request_error.js" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> +</programlisting> </example> <para> - The function accepts three parameters: + The function accepts three parameters: <variablelist> <varlistentry> <term><parameter>req</parameter></term> @@ -277,18 +289,20 @@ </variablelist> </para> </section> - <section id="sect-Developer_Guide-Advanced_features-Handling_session_expiration_errors"> + + <section id="sect-Developer_Guide-Error_handling-Handling_session_expiration_errors"> <title>Handling session expiration errors</title> <para> - Redefine the <methodname>A4J.AJAX.onExpired</methodname> method to handle the expiration of a user's session, as shown in <xref linkend="exam-Developer_Guide-Advanced_features-Example_session_expiration_error" />. + Redefine the <methodname>A4J.AJAX.onExpired</methodname> method to handle the expiration of a user's session, as shown in <xref linkend="exam-Developer_Guide-Handling_session_expiration_errors-Example_session_expiration_error" />. </para> - <example id="exam-Developer_Guide-Advanced_features-Example_session_expiration_error"> + <example id="exam-Developer_Guide-Handling_session_expiration_errors-Example_session_expiration_error"> <title>Example session expiration error</title> -<programlisting language="Java" role="JAVA"><xi:include parse="text" href="extras/exam-Developer_Guide-Advanced_features-Example_session_expiration_error.js" xmlns:xi="http://www.w3.org/2001/XInclude" /> + +<programlisting language="Java" role="JAVA"><xi:include href="extras/exam-Developer_Guide-Advanced_features-Example_session_expiration_error.js" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> </programlisting> </example> <para> - The function accepts two parameters: + The function accepts two parameters: <variablelist> <varlistentry> <term><parameter>loc</parameter></term> @@ -309,6 +323,7 @@ </variablelist> </para> </section> + </section> <section id="sect-Developer_Guide-Advanced_features-Managing_states" status="draft"> @@ -326,31 +341,35 @@ <para> To check whether the logged-in user belongs to a certain user role, use the <function>rich:isUserInRole(Object)</function> function in RichFaces. The example demonstrates the function's use to render controls only for users with administrator privileges. </para> - <example id="exam-Developer_Guide-Advanced_features-User_role_example"> + <example id="exam-Developer_Guide-User_roles-User_role_example"> <title>User role example</title> <para> Certain controls only need to be rendered for administrators. </para> <procedure> - <step> + <step id="step-Developer_Guide-User_role_example-Create_admin_role"> <title>Create <literal>admin</literal> role</title> <para> Create the <literal>admin</literal> role in the <filename>web.xml</filename> file: </para> -<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Advanced_features-User_role_example-0.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + +<programlisting language="XML" role="XML"><xi:include href="extras/exam-Developer_Guide-Advanced_features-User_role_example-0.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> +</programlisting> </step> - <step> + <step id="step-Developer_Guide-User_role_example-Implement_authorization_for_users"> <title>Implement authorization for users</title> <para> Assign the <literal>admin</literal> role to users when they log in to the application as administrators. </para> </step> - <step> + <step id="step-Developer_Guide-User_role_example-Use_the_richisUserInRoleObject_function"> <title>Use the <function>rich:isUserInRole(Object)</function> function</title> <para> The <function>rich:isUserInRole(Object)</function> function can be used with the <varname>rendered</varname> attribute of any component: </para> -<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Advanced_features-User_role_example-1.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + +<programlisting language="XML" role="XML"><xi:include href="extras/exam-Developer_Guide-Advanced_features-User_role_example-1.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> +</programlisting> </step> </procedure> Modified: root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Basic_concepts.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Basic_concepts.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Basic_concepts.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -9,7 +9,7 @@ <section id="sect-Developer_Guide-Basic_concepts-Sending_an_Ajax_request"> <title>Sending an Ajax request</title> <para> - Many of the tags in the <classname>a4j</classname> and <classname>rich</classname> tag libraries are capable of sending Ajax requests from a JavaServer Faces (JSF) page. RichFaces tags hide the usual JavaScript activities that are required for an XMHTTPRequest object building and an Ajax request sending. Additionally the tags can determine which components of a JSF page are to be re-rendered as a result of the Ajax response; refer to <xref linkend="sect-Developer_Guide-Basic_concepts-Partial_page_updates" /> for details. + Many of the tags in the <classname>a4j</classname> and <classname>rich</classname> tag libraries are capable of sending Ajax requests from a JavaServer Faces (JSF) page. RichFaces tags hide the usual JavaScript activities that are required for an XMHTTPRequest object building and an Ajax request sending. Additionally the tags can determine which components of a JSF page are to be re-rendered as a result of the Ajax response; refer to <xref linkend="sect-Developer_Guide-Receiving_events_and_updates-Partial_page_updates" /> for details. </para> <itemizedlist> <listitem> @@ -33,7 +33,6 @@ </para> </listitem> </itemizedlist> - </section> <section id="sect-Developer_Guide-Basic_concepts-Receiving_events_and_updates"> @@ -47,8 +46,7 @@ If the content of an Ajax response needs to be rendered outside the active region, then the value of the <varname>renderRegionOnly</varname> attribute should be set to <literal>false</literal>. Otherwise, your Ajax updates are limited to elements of the active region. If not defined, the default setting is <code>renderRegionOnly="false"</code>. </para> </note> - - <section id="sect-Developer_Guide-Basic_concepts-Partial_page_updates"> + <section id="sect-Developer_Guide-Receiving_events_and_updates-Partial_page_updates"> <title>Partial page updates</title> <para> Specific regions of a page can be defined through the use of container components such as <sgmltag>&lt;a4j:region&gt;</sgmltag>. These regions can then be specified with their <varname>id</varname> identifiers in the <varname>render</varname> attribute of a component so that when the component sends an Ajax request, only the specified regions are updated. In this way you can control which part of the JSF View is decoded on the server side when the Ajax request is sent. Multiple regions can be defined and sent, and regions can be nested inside other regions. @@ -63,7 +61,7 @@ Refer to the <citetitle>RichFaces Component Reference</citetitle> for further details on the common Ajax attributes used for partial page updates. </para> </section> - + </section> <section id="sect-Developer_Guide-Basic_concepts-Processing_data_on_the_server"> Modified: root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Getting_started_with_RichFaces.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Getting_started_with_RichFaces.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Getting_started_with_RichFaces.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -267,6 +267,7 @@ <para> The RichFaces tag libraries need to be referenced on each XHTML page in your project: </para> + <programlisting language="XML" role="XML">&lt;ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" @@ -293,6 +294,7 @@ <para> A structure for the Maven project with minimal content can be created with the Maven archetype named <filename>maven-archetype-jsfwebapp</filename> included as part of the RichFaces Component Development Kit (<acronym>CDK</acronym>). The archetype and the project itself require extra repositories to be provided, namely <filename>http://snapshots.jboss.org/maven2/</filename> and <filename>http://repository.jboss.com/maven2/</filename>;. To make the repositories accessible to Maven, add a profile in the <filename>maven_installation_folder/conf/settings.xml</filename> file under the <sgmltag>&lt;profiles&gt;</sgmltag> element: </para> + <programlisting language="XML" role="XML">&lt;profiles&gt; &lt;profile&gt; &lt;id&gt;jsf-app-profile&lt;/id&gt; @@ -331,6 +333,7 @@ <para> The profile then needs to be activated in the <sgmltag>&lt;activeProfiles&gt;</sgmltag> element: </para> + <programlisting language="XML" role="XML">&lt;activeProfiles&gt; &lt;activeProfile&gt;jsf-app-profile&lt;/activeProfile&gt; &lt;/activeProfiles&gt; @@ -392,11 +395,12 @@ </screen> </para> </step> - <step> + <step id="step-Developer_Guide-Using_RichFaces_with_Maven-Add_dependencies"> <title>Add dependencies</title> <para> The <filename>jsf-app</filename> directory contains a project descriptor file, <filename>pom.xml</filename>. To add RichFaces libraries to your project, edit the project descriptor to add dependencies to the <sgmltag>&lt;dependencies&gt;</sgmltag> element as follows: </para> + <programlisting language="XML" role="XML">&lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;junit&lt;/groupId&gt; Modified: root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-RichFaces_overview.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-RichFaces_overview.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-RichFaces_overview.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -13,10 +13,10 @@ <title>Request processing flow</title> <mediaobject> <imageobject role="html"> - <imagedata fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_flow.png" format="PNG" contentwidth="660px" /> + <imagedata contentwidth="660px" fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_flow.png" format="PNG" width="444" /> </imageobject> <imageobject role="fo"> - <imagedata fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_flow.png" format="PNG" contentwidth="150mm" /> + <imagedata contentwidth="150mm" fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_flow.png" format="PNG" width="444" /> </imageobject> <textobject> <para> @@ -70,10 +70,10 @@ <title>Request processing sequences</title> <mediaobject> <imageobject role="html"> - <imagedata fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_sequences.png" format="PNG" contentwidth="660px" /> + <imagedata contentwidth="660px" fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_sequences.png" format="PNG" width="444" /> </imageobject> <imageobject role="fo"> - <imagedata fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_sequences.png" format="PNG" contentwidth="150mm" /> + <imagedata contentwidth="150mm" fileref="images/figu-Developer_Guide-RichFaces_overview-Request_processing_sequences.png" format="PNG" width="444" /> </imageobject> <textobject> <para> @@ -89,10 +89,10 @@ <title>Resource request sequence</title> <mediaobject> <imageobject role="html"> - <imagedata fileref="images/figu-Developer_Guide-RichFaces_overview-Resource_request_sequence.png" format="PNG" contentwidth="660px" /> + <imagedata contentwidth="660px" fileref="images/figu-Developer_Guide-RichFaces_overview-Resource_request_sequence.png" format="PNG" width="444" /> </imageobject> <imageobject role="fo"> - <imagedata fileref="images/figu-Developer_Guide-RichFaces_overview-Resource_request_sequence.png" format="PNG" contentwidth="150mm" /> + <imagedata contentwidth="150mm" fileref="images/figu-Developer_Guide-RichFaces_overview-Resource_request_sequence.png" format="PNG" width="444" /> </imageobject> <textobject> <para> Modified: root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Skinning_and_theming.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Skinning_and_theming.xml 2010-04-12 15:00:43 UTC (rev 16756) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Skinning_and_theming.xml 2010-04-13 08:10:25 UTC (rev 16757) @@ -4,22 +4,675 @@ <chapter id="chap-Developer_Guide-Skinning_and_theming"> <title>Skinning and theming</title> <para> - Incomplete + Read this chapter for a guide to skinning and theming RichFaces applications, including how to implement themes, and details on customizing and extending skins. </para> - <section id="sect-Developer_Guide-Skinning_and_theming-What_are_skins_and_themes"> - <title>What are skins and themes?</title> + <section id="sect-Developer_Guide-Skinning_and_theming-What_are_skins"> + <title>What are skins?</title> <para> - Incomplete + Application skins are used with the RichFaces framework to change the appearance of an application through setting the colors and decoration of controls and components. Typically the appearance of web applications is handled through the <acronym>CSS</acronym> (Cascading Style Sheet) files associated with the application, but skinning allows the settings in a CSS file to be abstracted and easily edited. Using skins avoids repetitive coding and duplication in CSS files through the use of style variables and generalization. CSS files are not completely replaced: skins work as a high-level extension to standard CSS. </para> + <para> + Each skin has a set of <varname>skin-parameters</varname>, which are used to define the theme palette and other elements of the user interface. These parameters work together with regular CSS declarations, and can be referred to from within CSS using JavaServer Faces Expression Language (<acronym>EL</acronym>). + </para> + <para> + The skinning feature of RichFaces also allows themes to be changed at runtime, so users can personalize an application's appearance. + </para> </section> <section id="sect-Developer_Guide-Skinning_and_theming-Using_skins"> <title>Using skins</title> <para> - Incomplete + RichFaces skins are designed to use a combination of styling elements. Themes for components can be applied using any of the following style classes: </para> + <variablelist> + <varlistentry> + <term>A default style class inserted into the framework</term> + <listitem> + <para> + Style classes contain skin parameters linked to constant theme styles in the skin. Each component has a class style defining a default representation level. Application interfaces can be modified by altering the values of skin parameters in the skin itself. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term>A style class extending the skin</term> + <listitem> + <para> + A custom style class can be added to the skin, working in conjunction with CSS classes of the same name. All components referencing the class are extended in the same way. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term>User style class</term> + <listitem> + <para> + Components can use the <varname>styleClass</varname> attribute to redefine specific component elements. As such, the appearance of an individual component can be customized according to a CSS style parameter specified in the class. + </para> + </listitem> + </varlistentry> + </variablelist> + <para> + RichFaces includes a number of predefined skins. These skins can be used in RichFaces web applications by specifying the skin name in the <varname>org.richfaces.SKIN</varname> context parameter in the <filename>web.xml</filename> settings file. The predefined skins are as follows: + </para> + <itemizedlist> + <listitem> + <para> + <literal>DEFAULT</literal> + </para> + </listitem> + <listitem> + <para> + <literal>plain</literal>, which contains no skin parameters and is intended for embedding RichFaces components into existing projects with their own styles. + </para> + </listitem> + <listitem> + <para> + <literal>emeraldTown</literal> + </para> + </listitem> + <listitem> + <para> + <literal>blueSky</literal> + </para> + </listitem> + <listitem> + <para> + <literal>wine</literal> + </para> + </listitem> + <listitem> + <para> + <literal>japanCherry</literal> + </para> + </listitem> + <listitem> + <para> + <literal>ruby</literal> + </para> + </listitem> + <listitem> + <para> + <literal>classic</literal> + </para> + </listitem> + <listitem> + <para> + <literal>deepMarine</literal> + </para> + </listitem> + </itemizedlist> + <example id="exam-Developer_Guide-Using_skins-Simple_skinning_example"> + <title>Simple skinning example</title> + <para> + Using any component, such as a panel, without specifying a <varname>styleClass</varname> will use the default skin parameters for that component. + </para> + +<programlisting language="XML" role="XML">&lt;rich:panel&gt;...&lt;/rich:panel&gt;</programlisting> + <para> + When rendered for display, the panel consists of two HTML elements: a wrapper <sgmltag>&lt;div&gt;</sgmltag> element and a <sgmltag>&lt;div&gt;</sgmltag> element for the body of the panel. The wrapper element for a panel without a specified <varname>styleClass</varname> is rendered as follows: + </para> + +<programlisting language="XML" role="XML">&lt;div class="dr-pnl rich-panel"&gt; + ... +&lt;/div&gt;</programlisting> + <para> + <literal>dr-pnl</literal> refers to a CSS class specified in the framework. The CSS class uses skin parameters for generic theme styles: + </para> + <itemizedlist> + <listitem> + <para> + The <varname>background-color</varname> CSS class attribute is defined by the <literal>generalBackgroundColor</literal> skin parameter. + </para> + </listitem> + <listitem> + <para> + The <varname>border-color</varname> CSS class attribute is defined by the <literal>panelBorderColor</literal> skin parameter. + </para> + </listitem> + </itemizedlist> + <para> + Changing the definitions for <literal>generalBackgroundColor</literal> or <literal>panelBorderColor</literal> in the skin will cause all panels in the application to change. + </para> + <para> + If a <varname>styleClass</varname> attribute is used, the specified style class is applied to the component, which could extend or override the default styles. + </para> + +<programlisting language="XML" role="XML">&lt;rich:panel styleClass="customClass"&gt;...&lt;/rich:panel&gt;</programlisting> + <para> + The <literal>customClass</literal> style is added to the CSS, and is applied to the component when it is rendered for display: + </para> + +<programlisting language="XML" role="XML">&lt;div class="dr-pnl rich-panel customClass"&gt; + ... +&lt;/div&gt;</programlisting> + </example> </section> + <section id="sect-Developer_Guide-Skinning_and_theming-Skin_parameter_tables_in_RichFaces"> + <title>Skin parameter tables in RichFaces</title> + <para> + <xref linkend="tabl-Developer_Guide-Skin_parameter_tables_in_RichFaces-Parameter_settings_for_the_blueSky_skin" /> lists the default values for the parameter settings in the <literal>blueSky</literal> skin. These values can be customized and extended for a unique application theme. + </para> + <table id="tabl-Developer_Guide-Skin_parameter_tables_in_RichFaces-Parameter_settings_for_the_blueSky_skin"> + <title>Parameter settings for the <literal>blueSky</literal> skin</title> + <tgroup cols="2"> + <thead> + <row> + <entry> + Parameter name + </entry> + <entry> + Default value + </entry> + </row> + </thead> + <tbody> + <row> + <entry><varname> + headerBackgroundColor + </varname></entry> + <entry><literal> + #BED6F8 + </literal></entry> + </row> + <row> + <entry><varname> + headerGradientColor + </varname></entry> + <entry><literal> + #F2F7FF + </literal></entry> + </row> + <row> + <entry><varname> + headTextColor + </varname></entry> + <entry><literal> + #000000 + </literal></entry> + </row> + <row> + <entry><varname> + headerWeightFont + </varname></entry> + <entry><literal> + bold + </literal></entry> + </row> + <row> + <entry><varname> + generalBackgroundColor + </varname></entry> + <entry><literal> + #FFFFFF + </literal></entry> + </row> + <row> + <entry><varname> + generalTextColor + </varname></entry> + <entry><literal> + #000000 + </literal></entry> + </row> + <row> + <entry><varname> + generalSizeFont + </varname></entry> + <entry><literal> + 11px + </literal></entry> + </row> + <row> + <entry><varname> + generalFamilyFont + </varname></entry> + <entry><literal> + Arial, Verdana, sans-serif + </literal></entry> + </row> + <row> + <entry><varname> + controlTextColor + </varname></entry> + <entry><literal> + #000000 + </literal></entry> + </row> + <row> + <entry><varname> + controlBackgroundColor + </varname></entry> + <entry><literal> + #ffffff + </literal></entry> + </row> + <row> + <entry><varname> + additionalBackgroundColor + </varname></entry> + <entry><literal> + #ECF4FE + </literal></entry> + </row> + <row> + <entry><varname> + shadowBackgroundColor + </varname></entry> + <entry><literal> + #000000 + </literal></entry> + </row> + <row> + <entry><varname> + shadowOpacity + </varname></entry> + <entry><literal> + 1 + </literal></entry> + </row> + <row> + <entry><varname> + panelBorderColor + </varname></entry> + <entry><literal> + #BED6F8 + </literal></entry> + </row> + <row> + <entry><varname> + subBorderColor + </varname></entry> + <entry><literal> + #ffffff + </literal></entry> + </row> + <row> + <entry><varname> + tabBackgroundColor + </varname></entry> + <entry><literal> + #C6DEFF + </literal></entry> + </row> + <row> + <entry><varname> + tabDisabledTextColor + </varname></entry> + <entry><literal> + #8DB7F3 + </literal></entry> + </row> + <row> + <entry><varname> + trimColor + </varname></entry> + <entry><literal> + #D6E6FB + </literal></entry> + </row> + <row> + <entry><varname> + tipBackgroundColor + </varname></entry> + <entry><literal> + #FAE6B0 + </literal></entry> + </row> + <row> + <entry><varname> + tipBorderColor + </varname></entry> + <entry><literal> + #E5973E + </literal></entry> + </row> + <row> + <entry><varname> + selectControlColor + </varname></entry> + <entry><literal> + #E79A00 + </literal></entry> + </row> + <row> + <entry><varname> + generalLinkColor + </varname></entry> + <entry><literal> + #0078D0 + </literal></entry> + </row> + <row> + <entry><varname> + hoverLinkColor + </varname></entry> + <entry><literal> + #0090FF + </literal></entry> + </row> + <row> + <entry><varname> + visitedLinkColor + </varname></entry> + <entry><literal> + #0090FF + </literal></entry> + </row> + <row> + <entry><varname> + headerSizeFont + </varname></entry> + <entry><literal> + 11px + </literal></entry> + </row> + <row> + <entry><varname> + headerFamilyFont + </varname></entry> + <entry><literal> + Arial, Verdana, sans-serif + </literal></entry> + </row> + <row> + <entry><varname> + tabSizeFont + </varname></entry> + <entry><literal> + 11px + </literal></entry> + </row> + <row> + <entry><varname> + tabFamilyFont + </varname></entry> + <entry><literal> + Arial, Verdana, sans-serif + </literal></entry> + </row> + <row> + <entry><varname> + buttonSizeFont + </varname></entry> + <entry><literal> + 11px + </literal></entry> + </row> + <row> + <entry><varname> + buttonFamilyFont + </varname></entry> + <entry><literal> + Arial, Verdana, sans-serif + </literal></entry> + </row> + <row> + <entry><varname> + tableBackgroundColor + </varname></entry> + <entry><literal> + #FFFFFF + </literal></entry> + </row> + <row> + <entry><varname> + tableFooterBackgroundColor + </varname></entry> + <entry><literal> + #cccccc + </literal></entry> + </row> + <row> + <entry><varname> + tableSubfooterBackgroundColor + </varname></entry> + <entry><literal> + #f1f1f1 + </literal></entry> + </row> + <row> + <entry><varname> + tableBorderColor + </varname></entry> + <entry><literal> + #C0C0C0 + </literal></entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section id="sect-Developer_Guide-Creating_a_new_skin"> + <title>Creating a new skin</title> + <procedure> + <step> + <title>Create the skin file</title> + <para>The name of the skin file should follow the format <filename><replaceable>new_skin_name</replaceable>.skin.properties</filename> and is placed in either the <filename>META-INF/skins/</filename> directory or the classpath directory of your project.</para> + </step> + <step> + <title>Define skin constants</title> + <para>Add skin parameter constants and values to the file. <xref linkend="exam-Developer_Guide-Skinning_and_theming-blueSky.skin.properties_file" /> shows how the skin parameters listed in <xref linkend="tabl-Developer_Guide-Skin_parameter_tables_in_RichFaces-Parameter_settings_for_the_blueSky_skin" /> are included in the skin file.</para> + <example id="exam-Developer_Guide-Skinning_and_theming-blueSky.skin.properties_file"> + <title><filename>blueSky.skin.properties</filename> file</title> + <para> + The <filename>blueSky.skin.properties</filename> file lists all the skin parameter constants for the skin. It can be extracted from the <filename>/META-INF/skins</filename> directory in the <package>richfaces-impl-<replaceable>version</replaceable>.jar</package> package. + </para> +<programlisting>#Colors +headerBackgroundColor=#BED6F8 +headerGradientColor=#F2F7FF +headerTextColor=#000000 +headerWeightFont=bold + +generalBackgroundColor=#FFFFFF +generalTextColor=#000000 +generalSizeFont=11px +generalFamilyFont=Arial, Verdana, sans-serif + +controlTextColor=#000000 +controlBackgroundColor=#ffffff +additionalBackgroundColor=#ECF4FE + +shadowBackgroundColor=#000000 +shadowOpacity=1 + +panelBorderColor=#BED6F8 +subBorderColor=#ffffff + +tabBackgroundColor=#C6DEFF +tabDisabledTextColor=#8DB7F3 + +trimColor=#D6E6FB + +tipBackgroundColor=#FAE6B0 +tipBorderColor=#E5973E + +selectControlColor=#E79A00 + +generalLinkColor=#0078D0 +hoverLinkColor=#0090FF +visitedLinkColor=#0090FF + +# Fonts +headerSizeFont=11px +headerFamilyFont=Arial, Verdana, sans-serif + +tabSizeFont=11 +tabFamilyFont=Arial, Verdana, sans-serif + +buttonSizeFont=11 +buttonFamilyFont=Arial, Verdana, sans-serif + +tableBackgroundColor=#FFFFFF +tableFooterBackgroundColor=#cccccc +tableSubfooterBackgroundColor=#f1f1f1 +tableBorderColor=#C0C0C0 +tableBorderWidth=1px + +#Calendar colors +calendarWeekBackgroundColor=#F5F5F5 + +calendarHolidaysBackgroundColor=#FFEBDA +calendarHolidaysTextColor=#FF7800 + +calendarCurrentBackgroundColor=#FF7800 +calendarCurrentTextColor=#FFEBDA + +calendarSpecBackgroundColor=#E4F5E2 +calendarSpecTextColor=#000000 + +warningColor=#FFE6E6 +warningBackgroundColor=#FF0000 + +editorBackgroundColor=#F1F1F1 +editBackgroundColor=#FEFFDA + +#Gradients +gradientType=plain +</programlisting> + </example> + </step> + <step> + <title>Reference skin definition</title> + <para>Add a skin definition <sgmltag>&lt;context-param&gt;</sgmltag> to the <filename>web.xml</filename> settings file of your application:</para> +<programlisting language="XML" role="XML">&lt;context-param&gt; + &lt;param-name&gt;org.richfaces.SKIN&lt;/param-name&gt; + &lt;param-value&gt;<replaceable>new_skin_name</replaceable>&lt;/param-value&gt; +&lt;/context-param&gt;</programlisting> + </step> + </procedure> + <section id="sect-Developer_Guide-Skinning_and_Theming-Skinning_standard_JSF_components"> + <title>Skinning standard JSF components</title> + <para> + The RichFaces framework can also use skinning to theme JSF (JavaServer Faces) components in addition to RichFaces components. Follow these additional steps to skin JSF components. + </para> + <procedure> + <step> + <title>Register a custom render kit</title> + <para>The custom render kit is created by registering it in the <filename>faces-config.xml</filename> configuration file:</para> +<programlisting language="XML" role="XML">&lt;render-kit&gt; + &lt;render-kit-id&gt;<replaceable>new_skin_name</replaceable>&lt;/render-kit-id&gt; + &lt;render-kit-class&gt;org.ajax4jsf.framework.renderer.ChameleonRenderKitImpl&lt;/render-kit-class&gt; +&lt;/render-kit&gt;</programlisting> + </step> + <step> + <title>Register custom renderers for the JSF component</title> + <para>Add custom renderers in the <filename>faces-config.xml</filename> configuration file for each JSF component you want to skin:</para> +<programlisting language="XML" role="XML">&lt;renderer&gt; + &lt;component-family&gt;javax.faces.Command&lt;/component-family&gt; + &lt;renderer-type&gt;javax.faces.Link&lt;/renderer-type&gt; + &lt;renderer-class&gt;<replaceable>new_skin_name</replaceable>.HtmlCommandLinkRenderer&lt;/renderer-class&gt; +&lt;/renderer&gt;</programlisting> + </step> + <step> + <title>Reference the render kit in the skin file</title> + <para>Add the following to the top of the skin parameters file: <code>render.kit=<replaceable>new_skin_name</replaceable></code></para> + </step> + </procedure> + </section> + </section> + + <section id="sect-Developer_Guide-Skinning_and_theming-Skinning_standard_HTML_controls"> + <title>Skinning standard HTML controls</title> + <para> + Standard HTML controls and components used alongside RichFaces and JSF components can also be themed to create a cohesive user interface. The following HTML elements accept skinning: + </para> + <itemizedlist> + <listitem> + <para> + <sgmltag>&lt;a&gt;</sgmltag> (including <sgmltag>a:hover</sgmltag>, <sgmltag>a:visited</sgmltag> and other elements) + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;fieldset&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;hr&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;input&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;isindex&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;keygen&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;legend&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;select&gt;</sgmltag> + </para> + </listitem> + <listitem> + <para> + <sgmltag>&lt;textarea&gt;</sgmltag> + </para> + </listitem> + </itemizedlist> + <para> + There are two levels of skinning for HTML controls, depending on whether the Internet browser viewing the application supports rich visual styling capabilities. + </para> + <remark>Browser lists may need to be updated.</remark> + <itemizedlist> + <title>Basic skinning</title> + <listitem> + <para> + <productname>Apple Safari</productname> + </para> + </listitem> + <listitem> + <para> + <productname>Microsoft Internet Explorer 6</productname> + </para> + </listitem> + <listitem> + <para> + <productname>Microsoft Internet Explorer 7</productname> in <literal>BackCompat</literal> mode (refer to <citetitle pubwork="article"><varname>compatMode</varname> Property</citetitle> at <ulink url="http://msdn.microsoft.com/en-us/library/ms533687(VS.85).aspx&qu... + </para> + </listitem> + <listitem> + <para> + <productname>Opera</productname> + </para> + </listitem> + </itemizedlist> + <itemizedlist> + <title>Extended skinning</title> + <listitem> + <para> + <productname>Microsoft Internet Explorer 7</productname> in standards-compliant mode + </para> + </listitem> + <listitem> + <para> + <productname>Mozilla Firefox</productname> + </para> + </listitem> + </itemizedlist> + <para> + If the browser type cannot be identified, the extended level is used. Set the level explicitly by adding the following context parameter to the <filename>web.xml</filename> configuration file, and specifying the <sgmltag>&lt;param-value&gt;</sgmltag> element as either <literal>basic</literal> or <literal>extended</literal>: + </para> +<programlisting language="XML" role="XML">&lt;context-param&gt; + &lt;param-name&gt;org.richfaces.CONTROL_SKINNING_LEVEL&lt;/param-name&gt; + &lt;param-value&gt;basic&lt;/param-value&gt; +&lt;/context-param&gt;</programlisting> + </section> + <section id="sect-Developer_Guide-Skinning_and_theming-Customizing_skins"> <title>Customizing skins</title> <para> @@ -30,8 +683,70 @@ <section id="sect-Developer_Guide-Skinning_and_theming-Changing_skins_at_runtime"> <title>Changing skins at runtime</title> <para> - Incomplete + The user can change skins at runtime if a managed bean is used to access the skin. </para> + <procedure> + <step> + <title>Create the skin bean</title> + <para>The skin bean is a simple interface to manage the skin:</para> +<programlisting language="Java" role="JAVA">public class SkinBean { + + private String skin; + + public String getSkin() { + return skin; + } + public void setSkin(String skin) { + this.skin = skin; + } +}</programlisting> + </step> + <step> + <title>Reference the skin bean</title> + <para>Use <acronym>EL</acronym> (Expression Language) to reference the skin bean from the <filename>web.xml</filename> settings file.</para> +<programlisting language="XML" role="XML">&lt;context-param&gt; + &lt;param-name&gt;org.richfaces.SKIN&lt;/param-name&gt; + &lt;param-value&gt;#{skinBean.skin}&lt;/param-value&gt; +&lt;/context-param&gt;</programlisting> + </step> + <step> + <title>Set initial skin</title> + <para> + The application needs an initial skin to display before the user chooses an alternative skin. The initial skin is specified in the <filename>web.xml</filename> configuration file. + </para> +<programlisting language="XML" role="XML">&lt;managed-bean&gt; + &lt;managed-bean-name&gt;skinBean&lt;/managed-bean-name&gt; + &lt;managed-bean-class&gt;SkinBean&lt;/managed-bean-class&gt; + &lt;managed-bean-scope&gt;session&lt;/managed-bean-scope&gt; + &lt;managed-property&gt; + &lt;property-name&gt;skin&lt;/property-name&gt; + &lt;value&gt;classic&lt;/value&gt; + &lt;/managed-property&gt; +&lt;/managed-bean&gt;</programlisting> + </step> + </procedure> + <example id="exam-Developer_Guide-Skinning_and_theming-Skin_changing_example"> + <title>Skin changing example</title> + <para> + This example renders a list of radio buttons from which the user can choose their desired skin. The chosen skin is then applied to the panel bar items. + </para> +<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-Skin_changing_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Developer_Guide-Skinning_and_theming-Skin_changing_example"> + <title>Skin changing example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Developer_Guide-Skinning_and_theming-Skin_changing_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A list of radio buttons from which the user can choose their desired skin. The chosen skin is then applied to the panel bar items. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> </section> <section id="sect-Developer_Guide-Skinning_and_theming-Extended_skinning"> Added: root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Skin_changing_example.xml_sample =================================================================== --- root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Skin_changing_example.xml_sample (rev 0) +++ root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Skin_changing_example.xml_sample 2010-04-13 08:10:25 UTC (rev 16757) @@ -0,0 +1,27 @@ +<h:form> + <div style="display: block; float: left"> + <h:selectOneRadio value="#{skinBean.skin}" border="0" layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic" onchange="submit()"> + <f:selectItem itemLabel="plain" itemValue="plain" /> + <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /> + <f:selectItem itemLabel="blueSky" itemValue="blueSky" /> + <f:selectItem itemLabel="wine" itemValue="wine" /> + <f:selectItem itemLabel="japanCherry" itemValue="japanCherry" /> + <f:selectItem itemLabel="ruby" itemValue="ruby" /> + <f:selectItem itemLabel="classic" itemValue="classic" /> + <f:selectItem itemLabel="laguna" itemValue="laguna" /> + <f:selectItem itemLabel="deepMarine" itemValue="deepMarine" /> + <f:selectItem itemLabel="blueSky Modified" itemValue="blueSkyModify" /> + </h:selectOneRadio> + </div> + <div style="display: block; float: left"> + <rich:panelBar height="100" width="200"> + <rich:panelBarItem label="Item 1" style="font-family: monospace; font-size: 12;"> + Changing skin in runtime + </rich:panelBarItem> + + <rich:panelBarItem label="Item 2" style="font-family: monospace; font-size: 12;"> + This is a result of the modification "blueSky" skin + </rich:panelBarItem> + </rich:panelBar> + </div> +</h:form> Added: root/docs/trunk/Developer_Guide/en-US/images/figu-Developer_Guide-Skinning_and_theming-Skin_changing_example.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/Developer_Guide/en-US/images/figu-Developer_Guide-Skinning_and_theming-Skin_changing_example.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream