From richfaces-svn-commits at lists.jboss.org Thu Apr  2 11:10:24 2009
Content-Type: multipart/mixed; boundary="===============4861327886158787890=="
MIME-Version: 1.0
From: richfaces-svn-commits at lists.jboss.org
To: richfaces-svn-commits at lists.jboss.org
Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r13362 - in
 trunk/docs/userguide/en/src/main: resources/images and 1 other directory.
Date: Thu, 02 Apr 2009 11:10:23 -0400
Message-ID: <E1LpOYh-0006U4-Qb@committer01.frg.pub.inap.atl.jboss.com>

--===============4861327886158787890==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable

Author: artdaw
Date: 2009-04-02 11:10:23 -0400 (Thu, 02 Apr 2009)
New Revision: 13362

Added:
   trunk/docs/userguide/en/src/main/resources/images/colorPicker_cn.png
   trunk/docs/userguide/en/src/main/resources/images/colorPicker_pc.png
Modified:
   trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml
Log:
https://jira.jboss.org/jira/browse/RF-6581 - Look and Feel customization is=
 added

Modified: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml	2009-=
04-02 14:48:10 UTC (rev 13361)
+++ trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml	2009-=
04-02 15:10:23 UTC (rev 13362)
@@ -101,7 +101,8 @@
 <![CDATA[...
 <rich:colorPicker value=3D"#{bean.color}" colorMode=3D"rgb" />
 ...]]>
-		</programlisting>
+		</programlisting>
+	 <para>This is the result:</para>
 		<figure>
 			<title>
 				Usage of the =

@@ -172,19 +173,20 @@
 	</f:facet>
 	<f:facet name=3D"arrows">
 		<f:verbatim>		=

-			<div style=3D"width: 33px; height: 5px; border: 1px solid #bed6f8; back=
ground:none;"></div>
+			<div style=3D"width: 33px; height: 5px; border: 1px solid #bed6f8; back=
ground:none;" />
 		</f:verbatim>
 	</f:facet>
 </rich:colorPicker>
 ...]]>
 		</programlisting>
+		 <para>This is the result:</para>
 		<figure>
 			<title>
 				Usage of the =

 				<emphasis>
-					<property>&lt;icon&gt;</property>
+					<property>&quot;icon&quot;</property>
 				</emphasis>, and 				<emphasis>
-					<property>&lt;arrows&gt;</property>
+					<property>&quot;arrows&quot;</property>
 				</emphasis>
 				facets
 			</title>
@@ -195,7 +197,173 @@
 			</mediaobject>
 		</figure>
 	</section>
-	=

+
+    <section>
+        <title>Look-and-Feel Customization</title>
+        <para>For skinnability implementation, the components use a <empha=
sis>
+            <property>style class redefinition method.</property>
+        </emphasis> Default style classes are mapped on <emphasis>
+            <property>skin parameters.</property>
+        </emphasis></para>
+        <para>There are two ways to redefine the appearance of all <emphas=
is role=3D"bold">
+            <property>&lt;rich:colorPicker&gt;</property>
+        </emphasis> components at once: =

+          <itemizedlist>
+            <listitem><para>Redefine the corresponding skin parameters</pa=
ra></listitem>
+            <listitem><para> Add to your style sheets style classes used b=
y a <emphasis role=3D"bold">
+                <property>&lt;rich:colorPicker&gt;</property>
+            </emphasis> component</para></listitem>
+        </itemizedlist>
+        </para>
+    </section>
+    <section>
+    <title>Skin Parameters Redefinition</title>
+    <table>
+      <title>Skin parameters redefinition for the input field that contain=
s selected color</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>panelBorderColor</entry>
+            <entry>border-color</entry>
+          </row>
+          <row>
+            <entry>generalSizeFont</entry>
+            <entry>font-size</entry>
+          </row>
+          <row>
+            <entry>generalFamilyFont</entry>
+            <entry>font-family</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>	=

+    <table>
+      <title>Skin parameters redefinition for the wrapper &lt;div&gt; elem=
ent of a widget</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>panelBorderColor</entry>
+            <entry>border-color</entry>
+          </row>
+          <row>
+            <entry>generalBackgroundColor</entry>
+            <entry>background-color</entry>
+          </row>
+          <row>
+            <entry>generalFamilyFont</entry>
+            <entry>font-family</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>	=

+    <table>
+      <title>Skin parameters redefinition for the icon, color palette, cur=
rent color, and new color</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>panelBorderColor</entry>
+            <entry>border-color</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>	=

+    <table>
+      <title>Skin parameters redefinition for the hex, RGB, and HSB input =
fileds</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>generalSizeFont</entry>
+            <entry>font-size</entry>
+          </row>
+          <row>
+            <entry>generalFamilyFont</entry>
+            <entry>font-family</entry>
+          </row>
+                    <row>
+            <entry>generalTextColor</entry>
+            <entry>color</entry>
+          </row>
+          <row>
+            <entry>panelBorderColor</entry>
+            <entry>border-color</entry>
+          </row>
+          <row>
+            <entry>controlBackgroundColor</entry>
+            <entry>background-color</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>
+    <table>
+      <title>Skin parameters redefinition for the &quot;Apply&quot; and  &=
quot;Cancel&quot; button</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>buttonFontSize</entry>
+            <entry>font-size</entry>
+          </row>
+          <row>
+            <entry>buttonFamilyFont</entry>
+            <entry>font-family</entry>
+          </row>
+          <row>
+            <entry>headerTextColor</entry>
+            <entry>color</entry>
+          </row>
+          <row>
+            <entry>headerBackgroundColor</entry>
+            <entry>border-color</entry>
+          </row>
+          <row>
+            <entry>panelBorderColor</entry>
+            <entry>border-color</entry>
+          </row>
+          <row>
+            <entry>generalSizeFont</entry>
+            <entry>font-size</entry>
+          </row>
+                    <row>
+            <entry>generalFamilyFont</entry>
+            <entry>font-family</entry>
+          </row>
+          <row>
+            <entry>headerBackgroundColor</entry>
+            <entry>background-color</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>						=

+   </section>
   <!-- Definition of Custom Style Classes-->  =

   <section>
     <title>Definition of Custom Style Classes</title>
@@ -216,14 +384,14 @@
       <tgroup cols=3D"2">
         <thead>
           <row>
-            <entry>Class name</entry>
+            <entry>Selector name</entry>
             <entry>Description</entry>
           </row>
         </thead>
         <tbody>
           <row>
             <entry>.rich-colorPicker-span input</entry>
-            <entry>Defines styles for the input filed containing selected =
color</entry>
+            <entry>Defines styles for the input field that contains select=
ed color</entry>
           </row>
            <row>
             <entry>.rich-colorPicker-icon</entry>
@@ -285,15 +453,72 @@
           </row>
         </tbody>
       </tgroup>
-    </table>
-    </section>
-    =

-<section>
+    </table>
+	  <para>In order to redefine styles for all <emphasis role=3D"bold">
+      <property>&lt;rich:colorPicker&gt;</property>
+    </emphasis> components on a page using CSS, it&apos;s enough to create=
 classes with the
+      same names (possible classes could be found in the tables <link link=
end=3D"colorPicker_cn_inline"> above</link>) and define necessary propertie=
s in them. </para> =

+	    <para>
+      <emphasis role=3D"bold">Example:</emphasis>
+    </para>
+    <programlisting role=3D"CSS"><![CDATA[...
+.rich-colorPicker-ext{
+    background-color: #ecf4fe;
+}						=

+...]]></programlisting>  =

+    =

+    <para>This is the result:</para>
+    <figure>
+      <title>Redefinition styles with predefined classes</title>
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref=3D"images/colorPicker_pc.png"/>
+        </imageobject>
+      </mediaobject>
+    </figure>
+    <para>In the shown example the background color for the widget is chan=
ged.</para>
+    =

+    <!--para>It&apos;s aslo possible to change styles of a particular =

+      <emphasis role=3D"bold"> <property>&lt;rich:colorPicker&gt;</propert=
y></emphasis> component. =

+	  In this case you should create own style classes and use them in corres=
ponding <emphasis role=3D"bold"><property>&lt;rich:colorPicker&gt;</propert=
y></emphasis> <property>styleClass</property> attributes. =

+	  An example is placed below:</para>
+    <para>
+      <emphasis role=3D"bold">Example:</emphasis>
+    </para>
+    <programlisting role=3D"CSS"><![CDATA[...
+.myClass {
+    background-color:#bed6f8;
+}
+...]]></programlisting>  =

+    <para>The <emphasis><property>&quot;viewClass&quot;</property></emphas=
is> attribute for <emphasis role=3D"bold"
+      ><property>&lt;rich:colorPicker&gt; </property></emphasis> is define=
d as it&apos;s shown in the example below:</para>
+    <para>
+      <emphasis role=3D"bold">Example:</emphasis>
+    </para>
+    <programlisting role=3D"XML"><![CDATA[<rich:colorPicker value=3D"click=
 to edit" viewClass=3D"myClass"/>
+]]></programlisting>    =

+    =

+    <para>This is a result:</para>
+    =

+    <figure>
+      <title>Modificaton of a look and feel with own classes and <emphasis=
><property>styleClass</property></emphasis> attributes</title>
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref=3D"images/inplaceSelect_oc.png"/>
+        </imageobject>
+      </mediaobject>
+    </figure>  =

+    =

+    <para>As it could be seen on the picture above, the font style and bac=
kground color in <property>view</property> state is changed.</para-->
+
+
+	</section>
+	<section>
 	    <title>Relevant Resources Links</title>
     <para>
       <ulink url=3D"http://livedemo.exadel.com/richfaces-demo/richfaces/co=
lorPicker.jsf?c=3DcolorPicker">Here</ulink>
       you can see the example of <emphasis role=3D"bold">
-        <property>&lt;rich:colorPicker&gt;</property> component
-      </emphasis> usage and sources for the given example. </para>
+        <property>&lt;rich:colorPicker&gt;</property> =

+      </emphasis> component usage and sources for the given example. </par=
a>
   </section>
 </section>

Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_cn.png
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
(Binary files differ)


Property changes on: trunk/docs/userguide/en/src/main/resources/images/colo=
rPicker_cn.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream

Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_pc.png
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
(Binary files differ)


Property changes on: trunk/docs/userguide/en/src/main/resources/images/colo=
rPicker_pc.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream


--===============4861327886158787890==--