Author: SeanRogers Date: 2010-04-21 02:24:02 -0400 (Wed, 21 Apr 2010) New Revision: 16787 Added: root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Create_the_skin_bean.js root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-CSS.xml_sample root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-XCSS.xml_sample Modified: 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/Revision_History.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-Introduction.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: Completed draft of skinning guide Modified: root/docs/trunk/Developer_Guide/en-US/Book_Info.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Book_Info.xml 2010-04-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/Book_Info.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -3,7 +3,7 @@ ]> <bookinfo id="book-Developer_Guide-Developer_Guide"> <title>Developer Guide</title> - <subtitle>Developing projects using RichFaces &VERSIONLONG;<remark> (draft)</remark> + <subtitle>Developing applications using RichFaces &VERSIONLONG;<remark> (draft)</remark> </subtitle> <productname>RichFaces</productname> <productnumber>4.0</productnumber> Modified: root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml 2010-04-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/Developer_Guide.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -9,7 +9,6 @@ <xi:include href="chap-Developer_Guide-Basic_concepts.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> <xi:include href="chap-Developer_Guide-Advanced_features.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> <xi:include href="chap-Developer_Guide-Skinning_and_theming.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> - <xi:include href="appe-Developer_Guide-Resources.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> <xi:include href="Revision_History.xml" xmlns:xi="http://www.w3.org/2001/XInclude" /> </book> Modified: root/docs/trunk/Developer_Guide/en-US/Revision_History.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/Revision_History.xml 2010-04-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/Revision_History.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -15,13 +15,29 @@ </author> <revdescription> <simplelist> - <member>First draft of <xref linkend="chap-Developer_Guide-Introduction" /></member> - <member>First draft of <xref linkend="chap-Developer_Guide-Getting_started_with_RichFaces" /></member> - <member>First draft of <xref linkend="chap-Developer_Guide-RichFaces_overview" /></member> - <member>First draft of <xref linkend="chap-Developer_Guide-Basic_concepts" /></member> + <member>First draft of <xref linkend="chap-Developer_Guide-Introduction" />.</member> + <member>First draft of <xref linkend="chap-Developer_Guide-Getting_started_with_RichFaces" />.</member> + <member>First draft of <xref linkend="chap-Developer_Guide-RichFaces_overview" />.</member> + <member>First draft of <xref linkend="chap-Developer_Guide-Basic_concepts" />.</member> </simplelist> </revdescription> </revision> + <revision> + <revnumber>0.2</revnumber> + <date>Tue Apr 20 2010</date> + <author> + <firstname>Sean</firstname> + <surname>Rogers</surname> + <email&gt;serogers(a)redhat.com&lt;/email&gt; + </author> + <revdescription> + <simplelist> + <member>First draft of <xref linkend="chap-Developer_Guide-Advanced_features" />.</member> + <member>First draft of <xref linkend="chap-Developer_Guide-Skinning_and_theming" />.</member> + <member>Revised previous draft chapters based on technical review.</member> + </simplelist> + </revdescription> + </revision> </revhistory> </simpara> </appendix> 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-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Basic_concepts.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -24,7 +24,7 @@ </listitem> <listitem> <para> - The <sgmltag>&lt;a4j:support&gt;</sgmltag> tag allows you to add Ajax functionality to standard JSF components and send Ajax request on a chosen JavaScript event, such as <varname>onkeyup</varname> or <varname>onmouseover</varname>, for example. + The <sgmltag>&lt;a4j:ajax&gt;</sgmltag> tag allows you to add Ajax functionality to standard JSF components and send Ajax request on a chosen JavaScript event, such as <varname>onkeyup</varname> or <varname>onmouseover</varname>, for example. </para> </listitem> <listitem> @@ -36,16 +36,18 @@ </section> <section id="sect-Developer_Guide-Basic_concepts-Receiving_events_and_updates"> - <title>Receiving events and updates</title> + <title>Receiving events and client-side updates</title> <para> - If no specific regions are specified, the whole page is updated when an Ajax response is received. + Updates are made only to those regions specified using the <varname>execute</varname>. If no specific regions are declared, the whole page is updated when an Ajax response is received. </para> + <!-- <note> <title>Rendering outside the active region</title> <para> 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-Receiving_events_and_updates-Partial_page_updates"> <title>Partial page updates</title> <para> @@ -64,12 +66,14 @@ </section> + <!-- <section id="sect-Developer_Guide-Basic_concepts-Processing_data_on_the_server"> <title>Processing data on the server</title> <para> Use the <varname>process</varname> attribute to list the <varname>id</varname> identifiers of components that need to be processed together with a requesting component. This can be useful if more than one component needs to be processed, but not the entire view. Alternatively if only one component needs to be processed instead of the entire view, <code>process="@this"</code> can be specified. </para> </section> + --> <section id="sect-Developer_Guide-Basic_concepts-Component_overview"> <title>Component overview</title> 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-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Getting_started_with_RichFaces.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -44,7 +44,7 @@ </listitem> <listitem> <para> - Seam 1.2 &ndash; 2.1 + Seam 1.2 and higher </para> </listitem> <listitem> @@ -79,11 +79,6 @@ </listitem> <listitem> <para> - Jetty 6.1 - </para> - </listitem> - <listitem> - <para> Geronimo 2.0 and higher </para> </listitem> @@ -130,7 +125,7 @@ </listitem> <listitem> <para> - Opera 8.5 and higher + Opera 9.5 and higher </para> </listitem> </itemizedlist> @@ -166,12 +161,12 @@ </listitem> <listitem> <para> - Internet Explorer 6.0 and higher + Internet Explorer 7.0 and higher </para> </listitem> <listitem> <para> - Opera 8.5 and higher + Opera 9.5 and higher </para> </listitem> <listitem> @@ -190,7 +185,7 @@ <section id="sect-Developer_Guide-Getting_started_with_RichFaces-Installing_RichFaces"> <title>Installing RichFaces</title> <para> - Follow the instructions in this section to install the RichFaces framework on your computer. + Follow the instructions in this section to install the RichFaces framework and begin building applications. </para> <section id="sect-Developer_Guide-Installing_RichFaces-Downloading_RichFaces"> <title>Downloading RichFaces</title> @@ -220,7 +215,7 @@ <step id="step-Developer_Guide-Creating_a_project-Create_a_new_project"> <title>Create a new project</title> <para> - In <application>JBoss Tools</application>, select <menuchoice><guimenu>File</guimenu><guimenuitem>New</guimenuitem><guimenuitem>JSF Project</guimenuitem></menuchoice> from the menu. Name the project, select <guilabel>JSF 2</guilabel> from the <guilabel>JSF Environment</guilabel> drop-down box, and click the <guibutton>Finish</guibutton> button to create the project. + Create a new project based on the JSF 2 environment by using the JSF Project wizard in <application>JBoss Tools</application>. </para> </step> <step id="step-Developer_Guide-Creating_a_project-Add_the_RichFaces_libraries_to_the_project"> @@ -231,35 +226,35 @@ <note> <title>Other required libraries</title> <para> - RichFaces also requires the following libraries to be referenced in your project. Typically they are already included when creating a JSF project in <application>JBoss Tools</application>. - <itemizedlist> - <listitem> - <para> - <filename>commons-beanutils.jar</filename> - </para> - </listitem> - <listitem> - <para> - <filename>commons-collections.jar</filename> - </para> - </listitem> - <listitem> - <para> - <filename>commons-digester.jar</filename> - </para> - </listitem> - <listitem> - <para> - <filename>commons-logging.jar</filename> - </para> - </listitem> - <listitem> - <para> - <filename>jhighlight.jar</filename> - </para> - </listitem> - </itemizedlist> + RichFaces also requires the following libraries to be referenced in your project. Typically they are already included when creating a JSF project in <application>JBoss Tools</application>. <remark>These dependencies need to be confirmed.</remark> </para> + <itemizedlist> + <listitem> + <para> + <filename>commons-beanutils.jar</filename> + </para> + </listitem> + <listitem> + <para> + <filename>commons-collections.jar</filename> + </para> + </listitem> + <listitem> + <para> + <filename>commons-digester.jar</filename> + </para> + </listitem> + <listitem> + <para> + <filename>commons-logging.jar</filename> + </para> + </listitem> + <listitem> + <para> + <filename>jhighlight.jar</filename> + </para> + </listitem> + </itemizedlist> </note> </step> <step id="step-Developer_Guide-Creating_a_project-Reference_the_tag_libraries"> @@ -292,7 +287,7 @@ <step id="step-Developer_Guide-Using_RichFaces_with_Maven-Add_required_repositories"> <title>Add required repositories</title> <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: + A structure for the Maven project with minimal content can be created with the Maven archetype named <filename>maven-archetype-jsfwebapp</filename> <remark>(may be renamed in a later release)</remark> 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; @@ -342,7 +337,7 @@ <step id="step-Developer_Guide-Using_RichFaces_with_Maven-Generate_project_from_archetype"> <title>Generate project from archetype</title> <para> - The project can now be generated with the <filename>maven-archetype-jsfwebapp</filename> archetype. Create a new directory for your project, then run the following Maven command: + The project can now be generated with the <filename>maven-archetype-jsfwebapp</filename> <remark>(may be renamed in a later release)</remark> archetype. Create a new directory for your project, then run the following Maven command: <screen>mvn archetype:generate -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-jsfwebapp -DarchetypeVersion=4.0.0-SNAPSHOT -DgroupId=<replaceable>org.docs.richfaces</replaceable> -DartifactId=<replaceable>jsf-app</replaceable> </screen> </para> @@ -505,7 +500,7 @@ <step id="step-Developer_Guide-Using_RichFaces_with_Maven-Add_tag_library_references"> <title>Add tag library references</title> <para> - After importing, edit the <filename><replaceable>jsf-app</replaceable>/src/main/webapp/pages/index.jsp</filename> file to include the tag library declaration as described in <xref linkend="step-Developer_Guide-Creating_a_project-Reference_the_tag_libraries" /> + After importing, edit the <filename><replaceable>jsf-app</replaceable>/src/main/webapp/pages/index.xhtml</filename> file to include the tag library declaration as described in <xref linkend="step-Developer_Guide-Creating_a_project-Reference_the_tag_libraries" /> of <xref linkend="sect-Developer_Guide-Getting_started_with_RichFaces-Creating_a_project" />. </para> </step> </procedure> Modified: root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Introduction.xml =================================================================== --- root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Introduction.xml 2010-04-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Introduction.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -4,7 +4,7 @@ <chapter id="chap-Developer_Guide-Introduction"> <title>Introduction</title> <para> - RichFaces is a rich component library for JavaServer Faces (<acronym>JSF</acronym>) 2 built on the open-source Ajax4jsf framework. It allows integration of Ajax capabilities into enterprise web application development without needing to use JavaScript. + The RichFaces framework is a rich component library for JavaServer Faces (<acronym>JSF</acronym>). It allows integration of Ajax capabilities into enterprise web application development without needing to use JavaScript. </para> <para> RichFaces leverages several parts of the JSF2 framework including lifecycle, validation, conversion facilities, and management of static and dynamic resources. The RichFaces framework includes components with built-in Ajax support and a customizable look-and-feel that can be incorporated into JSF applications. @@ -14,27 +14,27 @@ <itemizedlist> <listitem> <para> - Build on the benefits of JavaServer Faces with support for Ajax. RichFaces is fully integrated into the JSF lifecycle. While other frameworks only give access to the managed bean facility, RichFaces uses the action and value change listeners, and invokes server-side validators and converters during the Ajax request-response cycle. + Build on the benefits of JavaServer Faces with support for Ajax. RichFaces is fully integrated into the JSF lifecycle: it uses the action and value change listeners, and invokes server-side validators and converters during the Ajax request-response cycle. </para> </listitem> <listitem> <para> - Add Ajax capability to existing JSF applications. The core Ajax library (<classname>a4j</classname>) adds Ajax functionality into existing pages, such that extra JavaScript code is unnecessary and existing components do not need to be replaced with Ajax ones. RichFaces enables page-wide Ajax support instead of the traditional component-wide support, and events can be defined on the page for invoking an Ajax requests and JSF Component Tree synchronization. + Extend Ajax capability in existing JSF applications. The core Ajax library (<classname>a4j</classname>) adds extra Ajax functionality into existing pages, such that additional JavaScript code is unnecessary and existing components do not need to be replaced with Ajax ones. RichFaces enables page-wide Ajax support instead of the traditional component-wide support, and events can be defined on the page for invoking an Ajax requests and JSF Component Tree synchronization. </para> </listitem> <listitem> <para> - Create complex application views using out-of-the-box components. The RichFaces user interface (<acronym>UI</acronym>) library (<classname>rich</classname>) contains components for adding rich interactive features to JSF applications. It extends the RichFaces framework to include a large set of Ajax-enabled components that come with extensive skinning support. Additionally, RichFaces components are designed to be used seamlessly with other 3d-party component libraries on the same page, so you have more options for developing your applications. + Create complex application views using out-of-the-box components. The RichFaces user interface (<acronym>UI</acronym>) library (<classname>rich</classname>) contains components for adding rich interactive features to JSF applications. It extends the RichFaces framework to include a large set of Ajax-enabled components that come with extensive skinning support. Additionally, the RichFaces framework is designed to be used seamlessly with other 3d-party libraries on the same page, so you have more options for developing applications. </para> </listitem> <listitem> <para> - Write your own customized rich components with built-in Ajax support. The Component Development Kit (<acronym>CDK</acronym>), used for the RichFaces UI library creation, includes a code-generation facility and a templating facility using a JavaServer Pages (<acronym>JSP</acronym>)-like syntax. + Write your own customized rich components with built-in Ajax support. The Component Development Kit (<acronym>CDK</acronym>), used for the RichFaces UI library creation, includes a code-generation facility and a templating facility using <acronym>XHTML</acronym> (extended hyper-text markup language) syntax. </para> </listitem> <listitem> <para> - Package resources with application Java classes. Ajax functionality in RichFaces provides an advanced support for the management of different resources, such as pictures, JavaScript code, and CSS stylesheets. The resource framework makes it possible to pack these resources into <filename>jar</filename> Java archive files along with the code for any custom components. + Package dynamic resources with application Java classes. Ajax functionality in RichFaces extends support for the management of different resources, such as pictures, JavaScript code, and CSS stylesheets. The resource framework makes it possible to pack dynamic resources along with the code for any custom components. </para> </listitem> <listitem> 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-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-RichFaces_overview.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -4,7 +4,7 @@ <chapter id="chap-Developer_Guide-RichFaces_overview"> <title>RichFaces overview</title> <para> - The RichFaces framework is a component library which adds Ajax capability into existing pages, such that you don't need to write any extra JavaScript code or replace any existing components with new Ajax widgets. RichFaces also enables page-wide Ajax support instead of the traditional component-wide support. Events can be defined on pages that invoke Ajax requests. After an Ajax request, the areas of a page that are synchronized with the JSF Component Tree can themselves change data on the server according to events fired on the client. + The RichFaces framework is a component library which enhances JSF Ajax capabilities, such that you don't need to write any extra JavaScript code or replace any existing components with new Ajax widgets. RichFaces also enables page-wide Ajax support instead of the traditional component-wide support. Events can be defined on pages that invoke Ajax requests. After an Ajax request, the areas of a page that are synchronized with the JSF Component Tree can themselves change data on the server according to events fired on the client. </para> <para> <xref linkend="figu-Developer_Guide-RichFaces_overview-Request_processing_flow" /> illustrates how requests are processed in the RichFaces framework. @@ -35,11 +35,6 @@ <itemizedlist> <listitem> <para> - Ajax Filter - </para> - </listitem> - <listitem> - <para> Ajax Action Components </para> </listitem> @@ -61,6 +56,7 @@ </itemizedlist> Read this section for details on each element. </para> + <!-- <section id="sect-Developer_Guide-Architecture-Ajax_Filter"> <title>Ajax Filter</title> <para> @@ -102,6 +98,7 @@ </mediaobject> </figure> </section> + --> <section id="sect-Developer_Guide-Architecture-Ajax_Action_Components"> <title>Ajax Action Components</title> @@ -113,7 +110,7 @@ <section id="sect-Developer_Guide-Architecture-Ajax_Containers"> <title>Ajax Containers</title> <para> - <classname>AjaxContainer</classname> is an interface that describes an area on a JSF page that is decoded during an Ajax request. <classname>AjaxViewRoot</classname> and <classname>AjaxRegion</classname> are implementations of this interface. + <classname>AjaxContainer</classname> <remark>(name possibly changed in release)</remark> is an interface that describes an area on a JSF page that is decoded during an Ajax request. <classname>AjaxViewRoot</classname> and <classname>AjaxRegion</classname> are implementations of this interface. </para> </section> @@ -149,8 +146,20 @@ <section id="sect-Developer_Guide-RichFaces_overview-Differences_between_JSF_and_RichFaces_mechanisms"> <title>Differences between <acronym>JSF</acronym> and RichFaces mechanisms</title> <para> - JavaServer Faces (<acronym>JSF</acronym>) declares render and execute processes on the client side, while RichFaces declares server-side definitions of lists. + <remark>Needs additional clarification.</remark> </para> + <itemizedlist> + <listitem> + <para> + JavaServer Faces (<acronym>JSF</acronym>) declares render and execute processes on the client side, while RichFaces declares server-side definitions of lists. + </para> + </listitem> + <listitem> + <para> + RichFaces components uses their own renderers. In the <emphasis>Render Response Phase</emphasis>, the RichFaces framework makes a traversal of the component tree, calls its own renderer, and passes the result to the Faces Response. + </para> + </listitem> + </itemizedlist> </section> <section id="sect-Developer_Guide-RichFaces_overview-Restrictions"> @@ -160,7 +169,8 @@ <itemizedlist> <listitem> <para> - Any Ajax framework should not append or delete elements on a page, but should instead replace them. For successful updates, an element with the same identifier as in the response must exist on the page. If it is necessary to append code to a page, include a placeholder for it (an empty element). For the same reason, it is recommended that messages be placed in the <sgmltag>&lt;a4j:outputPanel&gt;</sgmltag> component. + Any Ajax framework should not append or delete elements on a page, but should instead replace them. For successful updates, an element with the same identifier as in the response must exist on the page. If it is necessary to append code to a page, include a placeholder for it (an empty element). + <!-- For the same reason, it is recommended that messages be placed in the <sgmltag>&lt;a4j:outputPanel&gt;</sgmltag> component.--> </para> </listitem> <listitem> @@ -168,21 +178,18 @@ <sgmltag>&lt;f:verbatim&gt;</sgmltag> should not be used for self-rendered containers, since it is transient and not saved in the tree. </para> </listitem> + <!-- <listitem> <para> Ajax requests are made by XMLHTTPRequest functions in XML format, but this XML bypasses most validations and the corrections that might be made in a browser. As such, a strict standards-compliant code for HTML and XHTML should be used, without skipping any required elements or attributes. Any necessary XML corrections are automatically made by the XML filter on the server, but unexpected effects can be produced through incorrect HTML code. </para> </listitem> + --> <listitem> <para> The RichFaces <classname>ViewHandler</classname> puts itself in front of the Facelets <classname>ViewHandlers</classname> chain. </para> </listitem> - <listitem> - <para> - RichFaces components uses their own renderers. In the <emphasis>Render Response Phase</emphasis>, the RichFaces framework makes a traversal of the component tree, calls its own renderer, and passes the result to the Faces Response. - </para> - </listitem> </itemizedlist> </para> </section> 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-20 19:38:18 UTC (rev 16786) +++ root/docs/trunk/Developer_Guide/en-US/chap-Developer_Guide-Skinning_and_theming.xml 2010-04-21 06:24:02 UTC (rev 16787) @@ -89,7 +89,7 @@ <para> To add one of these skins to your application, add the <literal>org.richfaces.SKIN</literal> context parameter to the <filename>web.xml</filename> configuration file: </para> -<programlisting language="XML" role="XML">&lt;context-param&gt; +<programlisting>&lt;context-param&gt; &lt;param-name&gt;org.richfaces.SKIN&lt;/param-name&gt; &lt;param-value&gt;<replaceable>skin_name</replaceable>&lt;/param-value&gt; &lt;/context-param&gt;</programlisting> @@ -176,7 +176,7 @@ <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 as described in <xref linkend="sect-Developer_Guide-Skinning_and-theming-Advanced_skinning" />. + <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 as described in <xref linkend="sect-Developer_Guide-Skinning_and_theming-Customizing_skins" />. </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> @@ -478,17 +478,7 @@ <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> +<programlisting language="Java" role="JAVA"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-Create_the_skin_bean.js" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> </step> <step> <title>Reference the skin bean</title> @@ -641,13 +631,17 @@ <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; +<programlisting>&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"> + </section> + + <section id="sect-Developer_Guide-Skinning_and_theming-Skinning_standard_controls"> + <title>Skinning standard controls</title> + <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. @@ -656,7 +650,7 @@ <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; +<programlisting>&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> @@ -664,7 +658,7 @@ <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; +<programlisting>&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; @@ -676,137 +670,136 @@ </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> - Skinning for standard HTML controls can be included in one of two ways: - </para> - <variablelist> - <varlistentry> - <term>Automatic skinning</term> + + <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> - The skinning style properties are automatically applied to controls based on their element names and attribute types. Specify the <literal>org.richfaces.CONTROL_SKINNING</literal> context parameter in the <filename>web.xml</filename> configuration file: + <sgmltag>&lt;a&gt;</sgmltag> (including <sgmltag>a:hover</sgmltag>, <sgmltag>a:visited</sgmltag> and other elements) </para> -<programlisting language="XML" role="XML">&lt;context-param&gt; - &lt;param-name&gt;org.richfaces.CONTROL_SKINNING&lt;/param-name&gt; - &lt;param-value&gt;enable&lt;/param-value&gt; -&lt;/context-param&gt;</programlisting> </listitem> - </varlistentry> - <varlistentry> - <term>Skinning with CSS classes</term> <listitem> <para> - The skinning style properties are determined through CSS. This method is available by default, but can be disabled through the <literal>org.richfaces.CONTROL_SKINNING_CLASSES</literal> context parameter in the <filename>web.xml</filename> configuration file: + <sgmltag>&lt;fieldset&gt;</sgmltag> </para> -<programlisting language="XML" role="XML">&lt;context-param&gt; - &lt;param-name&gt;org.richfaces.CONTROL_SKINNING_CLASSES&lt;/param-name&gt; - &lt;param-value&gt;disable&lt;/param-value&gt; -&lt;/context-param&gt;</programlisting> + </listitem> + <listitem> <para> - When enabled, the parameter offers a predefined CSS class named <literal>rich-container</literal>. Reference the class from any container-like component, and the standard HTML controls in the container will be skinned. Standard HTML controls can also be specifically defined in the CSS; refer to the <filename>org/richfaces/renderkit/html/css/basic_classes.xcss</filename> file in the <package>richfaces-ui.jar</package> package for examples of specially-defined CSS classes with skin parameters for HTML controls. + <sgmltag>&lt;hr&gt;</sgmltag> </para> </listitem> - </varlistentry> - </variablelist> - <section id="sect-Developer_Guide-Skinning_and_theming-Skinning_levels_for_standard_HTML_controls"> - <title>Skinning levels for standard HTML controls</title> - <para> - There are two levels of skinning for HTML controls, depending on whether the browser viewing the application includes rich visual styling capabilities, and whether the browser supports features of CSS2 and CSS3. - </para> - <remark>Browser lists may need to be updated.</remark> - <itemizedlist> - <title>Basic skinning</title> <listitem> <para> - <productname>Apple Safari</productname> + <sgmltag>&lt;input&gt;</sgmltag> </para> </listitem> <listitem> <para> - <productname>Microsoft Internet Explorer 6</productname> + <sgmltag>&lt;isindex&gt;</sgmltag> </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... + <sgmltag>&lt;keygen&gt;</sgmltag> </para> </listitem> <listitem> <para> - <productname>Opera</productname> + <sgmltag>&lt;legend&gt;</sgmltag> </para> </listitem> - </itemizedlist> - <itemizedlist> - <title>Extended skinning</title> <listitem> <para> - <productname>Microsoft Internet Explorer 7</productname> in standards-compliant mode + <sgmltag>&lt;select&gt;</sgmltag> </para> </listitem> <listitem> <para> - <productname>Mozilla Firefox</productname> + <sgmltag>&lt;textarea&gt;</sgmltag> </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>: + Skinning for standard HTML controls can be included in one of two ways: </para> + <variablelist> + <varlistentry> + <term>Automatic skinning</term> + <listitem> + <para> + The skinning style properties are automatically applied to controls based on their element names and attribute types. Specify the <literal>org.richfaces.CONTROL_SKINNING</literal> context parameter in the <filename>web.xml</filename> configuration file: + </para> + <programlisting language="XML" role="XML">&lt;context-param&gt; + &lt;param-name&gt;org.richfaces.CONTROL_SKINNING&lt;/param-name&gt; + &lt;param-value&gt;enable&lt;/param-value&gt; + &lt;/context-param&gt;</programlisting> + </listitem> + </varlistentry> + <varlistentry> + <term>Skinning with CSS classes</term> + <listitem> + <para> + The skinning style properties are determined through CSS. This method is available by default, but can be disabled through the <literal>org.richfaces.CONTROL_SKINNING_CLASSES</literal> context parameter in the <filename>web.xml</filename> configuration file: + </para> + <programlisting language="XML" role="XML">&lt;context-param&gt; + &lt;param-name&gt;org.richfaces.CONTROL_SKINNING_CLASSES&lt;/param-name&gt; + &lt;param-value&gt;disable&lt;/param-value&gt; + &lt;/context-param&gt;</programlisting> + <para> + When enabled, the parameter offers a predefined CSS class named <literal>rich-container</literal>. Reference the class from any container-like component, and the standard HTML controls in the container will be skinned. Standard HTML controls can also be specifically defined in the CSS; refer to the <filename>org/richfaces/renderkit/html/css/basic_classes.xcss</filename> file in the <package>richfaces-ui.jar</package> package for examples of specially-defined CSS classes with skin parameters for HTML controls. + </para> + </listitem> + </varlistentry> + </variablelist> + <section id="sect-Developer_Guide-Skinning_and_theming-Skinning_levels_for_standard_HTML_controls"> + <title>Skinning levels for standard HTML controls</title> + <para> + There are two levels of skinning for HTML controls, depending on whether the browser viewing the application includes rich visual styling capabilities, and whether the browser supports features of CSS2 and CSS3. + </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; @@ -826,22 +819,67 @@ </step> </procedure> --> + </section> </section> </section> + <section id="sect-Developer_Guide-Skinning_and_theming-Defining_skins_for_individual_components"> + <title>Defining skins for individual components</title> + <para> + RichFaces uses <acronym>XCSS</acronym> (XML-formatted CSS) files to add extra functionality to the skinning process. XCSS files can contain all the styling information for each RichFaces component in the library. + </para> + <para> + XCSS files contain mappings between CSS properties and skin parameters. The <varname>name</varname> attribute of the <sgmltag>&lt;u:selector&gt;</sgmltag> element is the name of the CSS selector. Each <sgmltag>&lt;u:style&gt;</sgmltag> element defines a CSS property with the <varname>name</varname> attribute as its name. Using the <varname>skin</varname> attribute specifies a skin parameter from the current skin file, while using the <varname>value</varname> attribute enters the literal value in the CSS file. An example of this is shown in <xref linkend="exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings" />. + </para> + <example id="exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings"> + <title>XCSS style mappings</title> + <para> + The XCSS code for the CSS selector named <literal>.rich-component-name</literal> is as follows: + </para> +<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <para> + This renders the following CSS code to be read by a standard browser: + </para> +<programlisting language="Java" role="JAVA"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings.css" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <para> + CSS selectors with identical skinning properties can be listed in a single <varname>name</varname> attribute of a <sgmltag>&lt;u:selector&gt;</sgmltag> element, separated by commas. + </para> +<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + <para> + Style properties can be modified using XML-based XCSS code, or using embedded standard CSS code, as shown in <xref linkend="exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code" /> + </para> + <example id="exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code"> + <title>Using XCSS code or standard CSS code</title> + <formalpara> + <title>Using XCSS code</title> + <para> + XCSS code follows an XML structure, using <sgmltag>&lt;u:selector&gt;</sgmltag> elements to define style classes and <sgmltag>&lt;u:style&gt;</sgmltag> elements for each style parameter. + </para> + </formalpara> +<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-XCSS.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <formalpara> + <title>Using standard CSS code</title> + <para> + CSS code can be included in an XCSS file through the use of a <sgmltag>&lt;f:verbatim&gt;</sgmltag> element with a character data (CDATA) section. + </para> + </formalpara> +<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-CSS.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + </section> + <section id="sect-Developer_Guide-Skinning_and_theming-Extended_skinning"> <title>Plug-n-skin</title> <para> <emphasis>Plug-n-skin</emphasis> is an alternate method to create, customize, and add a skin. The skin can be based on an existing RichFaces skin, and can include support for skinning standard HTML controls. </para> - <procedure id="proc-Developer_Guide-Skinning_and_theming-Using_plug-n-skin"> - <title>Using plug-n-skin</title> + <procedure> <step> <title>Create a template</title> <para>Use the <productname>Maven</productname> build and deployment tool to create the skin template by using the following command:</para> <screen>mvn archetype:create -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-plug-n-skin -DarchetypeVersion=<replaceable>RF-VERSION</replaceable> -DartifactId=<replaceable>ARTIFACT-ID</replaceable> -DgroupId=<replaceable>GROUP-ID</replaceable> -Dversion=<replaceable>VERSION</replaceable></screen> <para> - Use the following keys for the command: + Use the following parameters for the command: </para> <variablelist> <varlistentry> @@ -883,7 +921,7 @@ <para>Change to the newly-created directory. Ensure it contains the <filename>pom.xml</filename> project file, then enter the following command to create a new skin and add it to the <acronym>CDK</acronym> (Component Development Kit):</para> <screen>mvn cdk:add-skin -Dname=<replaceable>SKIN-NAME</replaceable> -Dpackage=<replaceable>SKIN-PACKAGE</replaceable></screen> <para> - Use the following keys for the command: + Use the following parameters for the command: </para> <variablelist> <varlistentry> @@ -924,34 +962,101 @@ </listitem> </varlistentry> </variablelist> + <para> + The command creates the following files: + </para> + <variablelist> + <varlistentry> + <term><filename>src/main/java/<replaceable>SKIN-PACKAGE</replaceable>/<replaceable>SKIN-NAME</replaceable>/images/BaseImage.java</filename></term> + <listitem> + <para> + The base class to store images. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><filename>src/test/java/<replaceable>SKIN-PACKAGE</replaceable>/<replaceable>SKIN-NAME</replaceable>/images/BaseImage.java</filename></term> + <listitem> + <para> + A test version of the base class to store images. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><filename>src/main/resources/<replaceable>SKIN-PACKAGE</replaceable>/<replaceable>SKIN-NAME</replaceable>/css/</filename></term> + <listitem> + <para> + The directory that holds the XCSS files that define the themes for RichFaces components affected by the new skin. + </para> + <para> + If the <code>createExt=true</code> parameter was used with the command, the following XCSS files are included for defining styles for standard HTML controls: + </para> + <itemizedlist> + <listitem> + <para> + <filename>extended_classes.xcss</filename> + </para> + </listitem> + <listitem> + <para> + <filename>extended.xcss</filename> + </para> + </listitem> + </itemizedlist> + </listitem> + </varlistentry> + <varlistentry> + <term><filename>src/main/resources/<replaceable>SKIN-PACKAGE</replaceable>/<replaceable>SKIN-NAME</replaceable>/css/<replaceable>SKIN-NAME</replaceable>.properties</filename></term> + <listitem> + <para> + The file that contains the skin properties. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><filename>src/main/resources/META-INF/skins/<replaceable>SKIN-NAME</replaceable>.xcss</filename></term> + <listitem> + <para> + A global XCSS file that imports the component-specific XCSS files. + </para> + <para> + If the <code>createExt=true</code> parameter was used with the command, the following <filename><replaceable>skin-name</replaceable>-ext.xcss</filename> file is included, which imports the XCSS files for standard HTML controls. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><filename>src/main/config/resources/<replaceable>SKIN-NAME</replaceable>-resources.xml</filename></term> + <listitem> + <para> + The file that contains the description of all the files listed above. + </para> + </listitem> + </varlistentry> + </variablelist> </step> + <step> + <title>Edit XCSS files</title> + <para> + Edit the XCSS files contained in the <filename>src/main/resources/META-INF/skins/</filename> directory. Refer to <xref linkend="sect-Developer_Guide-Skinning_and_theming-Defining_skins_for_individual_components" /> for instructions on how to edit XCSS files. + </para> + </step> + <step> + <title>Build the skin</title> + <para> + After editing the XCSS files, build the skin by running the following command in the root directory of your skin project (the directory that contains the <filename>pom.xml</filename> file). + </para> +<screen>mvn clean install</screen> + </step> + <step> + <title>Add the skin to the project configuration</title> + <para>Add the following context parameter to your project's <filename>web.xml</filename> configuration file to use the new skin in your application:</para> +<programlisting>&lt;context-param&gt; + &lt;param-name&gt;org.ajax4jsf.SKIN&lt;/param-name&gt; + &lt;param-value&gt;<replaceable>SKIN-NAME</replaceable>&lt;/param-value&gt; +&lt;/context-param&gt;</programlisting> + </step> </procedure> </section> - - <section id="sect-Developer_Guide-Skinning_and_theming-Defining_skins_for_individual_components"> - <title>Defining skins for individual components</title> - <para> - RichFaces uses <acronym>XCSS</acronym> (XML-formatted CSS) files to add extra functionality to the skinning process. XCSS files can contain all the styling information for each RichFaces component in the library. - </para> - <para> - XCSS files contain mappings between CSS properties and skin parameters. The <varname>name</varname> attribute of the <sgmltag>&lt;u:selector&gt;</sgmltag> element is the name of the CSS selector. Each <sgmltag>&lt;u:style&gt;</sgmltag> element defines a CSS property with the <varname>name</varname> attribute as its name. Using the <varname>skin</varname> attribute specifies a skin parameter from the current skin file, while using the <varname>value</varname> attribute enters the literal value in the CSS file. An example of this is shown in <xref linkend="exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings" />. - </para> - <example id="exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings"> - <title>XCSS style mappings</title> - <para> - The XCSS code for the CSS selector named <literal>.rich-component-name</literal> is as follows: - </para> -<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> - <para> - This renders the following CSS code to be read by a standard browser: - </para> -<programlisting language="CSS" role="CSS"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings.css" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> - <para> - CSS selectors with identical skinning properties can be listed in a single <varname>name</varname> attribute of a <sgmltag>&lt;u:selector&gt;</sgmltag> element, separated by commas. - </para> -<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> - </example> - </section> </chapter> Added: root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Create_the_skin_bean.js =================================================================== --- root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Create_the_skin_bean.js (rev 0) +++ root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Create_the_skin_bean.js 2010-04-21 06:24:02 UTC (rev 16787) @@ -0,0 +1,11 @@ +public class SkinBean { + + private String skin; + + public String getSkin() { + return skin; + } + public void setSkin(String skin) { + this.skin = skin; + } +} Added: root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-CSS.xml_sample =================================================================== --- root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-CSS.xml_sample (rev 0) +++ root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-CSS.xml_sample 2010-04-21 06:24:02 UTC (rev 16787) @@ -0,0 +1,7 @@ +<f:verbatim><![CDATA[ + ... + .rich-calendar-cell { + background: #537df8; + } + ... +]]></f:verbatim> Added: root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-XCSS.xml_sample =================================================================== --- root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-XCSS.xml_sample (rev 0) +++ root/docs/trunk/Developer_Guide/en-US/extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code-XCSS.xml_sample 2010-04-21 06:24:02 UTC (rev 16787) @@ -0,0 +1,9 @@ +... +<u:selector name=".rich-calendar-cell"> + <u:style name="border-bottom-color" skin="panelBorderColor"/> + <u:style name="border-right-color" skin="panelBorderColor"/> + <u:style name="background-color" skin="tableBackgroundColor"/> + <u:style name="font-size" skin="generalSizeFont"/> + <u:style name="font-family" skin="generalFamilyFont"/> +</u:selector> +...