From richfaces-svn-commits at lists.jboss.org Fri Mar 28 16:21:39 2008
Content-Type: multipart/mixed; boundary="===============5425972696594973197=="
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: r7390 -
 trunk/docs/userguide/en/src/main/docbook/included.
Date: Fri, 28 Mar 2008 16:21:38 -0400
Message-ID: <E1JfL50-00016o-WB@committer01.frg.pub.inap.atl.jboss.com>

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

Author: msorokin
Date: 2008-03-28 16:21:38 -0400 (Fri, 28 Mar 2008)
New Revision: 7390

Added:
   trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml
   trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml
Modified:
   trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml
Log:
http://jira.jboss.com/jira/browse/RF-1226
Component is added with descriptions for details of usage
InplaceInput corrected

Modified: trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.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/inplaceInput.xml	2008=
-03-28 20:14:23 UTC (rev 7389)
+++ trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml	2008=
-03-28 20:21:38 UTC (rev 7390)
@@ -290,7 +290,7 @@
   <emphasis><property>&quot;oneditactivated&quot;</property></emphasis> , =

   <emphasis><property>&quot;onviewactivation&quot;</property></emphasis> =

   and  =

-  <emphasis><property>&quot; onviewactivated&quot;</property></emphasis>  =

+  <emphasis><property>&quot; onviewactivated&quot;</property></emphasis>  =
attributes
   provide a possibility to assign JavaScript code on =

   <property>edit</property> state activation, on =

   <property>edit</property> state activated,on =


Added: trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc=
.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/inplaceSelect.desc.xm=
l	                        (rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xm=
l	2008-03-28 20:21:38 UTC (rev 7390)
@@ -0,0 +1,34 @@
+<?xml version=3D"1.0" encoding=3D"UTF-8"?>
+<section>
+    <sectioninfo>
+        <keywordset>
+            <keyword></keyword>
+        </keywordset>
+    </sectioninfo>
+    <section>
+        <title>Description</title>
+        <para>The <emphasis role=3D"bold">
+            <property>&lt;rich:inplaceSelect&gt;</property>
+        </emphasis> is used for creation select based inputs: it shows the=
 value as text in one state and enables editing the value, providing a list=
 of options in another state</para>
+        =

+        <figure>
+            <title><emphasis role=3D"bold"><property>&lt;rich:inplaceSelec=
t&gt;</property></emphasis> component</title>
+            <mediaobject> =

+                <imageobject>
+                    <imagedata fileref=3D"images/inplaceSelect.png"/> =

+                </imageobject>
+            </mediaobject>
+        </figure>
+    </section>
+    <section>
+        <title>Key Features</title> =

+        <itemizedlist>
+            <listitem>Option to display &quot;save&quot;, &quot;cancel&quo=
t; buttons as icons</listitem>
+            <listitem>Option to display &quot;save&quot;, &quot;cancel&quo=
t; buttons as standard buttons</listitem>
+            <listitem>Possibility to assign an  JavaScript action on state=
 change</listitem>
+            <listitem>Switching between<emphasis role=3D"bold"><property>&=
lt;rich:inplaceSelect&gt;</property></emphasis> components using &quot;Tab&=
quot; key</listitem>
+            <listitem>Resizable select field</listitem>
+            <listitem>Full skinability </listitem>
+        </itemizedlist>  =

+    </section>
+</section>
\ No newline at end of file

Added: trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.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/inplaceSelect.xml	   =
                     (rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml	200=
8-03-28 20:21:38 UTC (rev 7390)
@@ -0,0 +1,759 @@
+<?xml version=3D"1.0" encoding=3D"UTF-8"?>
+<section>
+    <sectioninfo>
+        <keywordset>
+            <keyword>rich:inplaceSelect</keyword>
+            <keyword>inplaceSelect</keyword>
+        </keywordset>
+    </sectioninfo>
+    <table>
+        <title>Component identification parameters</title>
+        =

+        <tgroup cols=3D"2">
+            <thead>
+                <row>
+                    <entry>Name</entry>
+                    <entry>Value</entry>
+                </row>
+            </thead>
+            <tbody>
+                <row>
+                    <entry>component-type</entry>
+                    <entry>org.richfaces.inplaceInput</entry>
+                </row>
+                <!--row>
+                    <entry>component-class</entry>
+                    <entry></entry>
+                </row-->
+                <row>
+                    <entry>component-family</entry>
+                  <entry>org.richfaces.inplaceInput</entry>
+                </row>
+                <row>
+                    <entry>renderer-type</entry>
+                  <entry>org.richfaces.renderkit.inplaceInputRenderer</ent=
ry>
+                </row>
+                <row>
+                    <entry>tag-class</entry>
+                  <entry>org.richfaces.taglib.inplaceInputTag</entry>
+                </row>
+            </tbody>
+        </tgroup>
+    </table>
+    <section>
+        <title>Creating the Component with a Page Tag</title>
+        <para>Here is a simple example of how the component can be used on=
 a page: </para>
+        <para>
+            <emphasis role=3D"bold">Example:</emphasis>
+        </para>
+      <!-- itemLabels has to have realy value-->
+      =

+        <programlisting role=3D"XML"><![CDATA[...
+<rich:inplaceSelect value=3D"#{Bean.inputValue}" defaultLabel=3D"Click  to=
 edit">
+    <f:selectItem itemValue=3D"0" itemLabel=3D"oil well"/>
+    <f:selectItem itemValue=3D"1" itemLabel=3D"factory"/>
+    <f:selectItem itemValue=3D"2" itemLabel=3D"newspaper"/>
+</rich:inplaceSelect>
+...]]></programlisting>
+    </section>
+    <section>
+        <title>Creating the Component Dynamically Using Java</title>
+        <para>
+            <emphasis role=3D"bold">Example:</emphasis>
+        </para>
+      <programlisting role=3D"JAVA"><![CDATA[import org.richfaces.componen=
t.html.inplaceSelect;
+...	=

+HtmlInpaceSelect myInplaceSelect =3D new InplaceSelect();
+...]]></programlisting>
+    </section>
+  =

+  =

+
+  =

+  =

+    <!-- Start  Details of Usage-->
+    <section>
+        <title>Details of Usage</title>
+    =

+      <para>    =

+        The        <emphasis role=3D"bold"><property>&lt;rich:inplaceSelec=
t&gt;</property>  </emphasis> component has three functional states, which =
are: =

+        </para>
+         <para>     =

+        <itemizedlist>        =

+          <listitem>
+            <para><property>View </property>state displays the current val=
ue as text;</para>
+<!--          <figure>
+            <title>View state</title>  =

+            <mediaobject>
+              <imageobject>
+                <imagedata fileref=3D"images/inplaceInputViewState_shadow.=
png"/>
+              </imageobject>
+            </mediaobject>     =

+          </figure>       --> =

+          </listitem>
+         <listitem>
+           <para><property>Edit </property>state displays a list with opti=
ons;</para>       =

+                      <!--<figure>
+            <title>Edit state</title>  =

+            <mediaobject>
+              <imageobject>
+                <imagedata fileref=3D"images/inplaceInputEditState_shadow.=
png"/>
+              </imageobject>
+            </mediaobject>     =

+          </figure>-->
+          </listitem>
+          <listitem>
+            <para><property>Changed </property>state displays the value of=
 the selected option  as text</para>     =

+                    <!--<figure>
+            <title>Changed state</title>  =

+            <mediaobject>
+              <imageobject>
+                <imagedata fileref=3D"images/inplaceInputChangedState_shad=
ow.png"/>
+              </imageobject>
+            </mediaobject>     =

+          </figure>      -->
+          </listitem>
+    </itemizedlist>
+   =

+      </para>  =

+  =

+        <para>     =

+          The =

+          <emphasis><property>&quot;value&quot;</property></emphasis> =

+          attribute displays the value as an  outputtext.  =

+          The attribute is defined when some option in the list is selecte=
d. =

+         </para>     =

+
+  =

+  =

+  =

+ <para>You can form he list of the options: using
+ <emphasis><property>&lt;f:selectItem&gt;</property></emphasis>   and =

+ <emphasis><property>&lt;f:selectItems&gt;</property></emphasis> </para>
+      <para>Please see the example below</para>
+      =

+     =

+  =

+
+
+<para>
+        <emphasis role=3D"bold">Example:</emphasis>
+</para>  =

+<programlisting role=3D"XML"><![CDATA[...
+<rich:inplaceSelect value=3D"#{inplaceComponentsBean.inputValue}" showCont=
rols=3D"true" defaultLabel=3D"click to edit">
+    <f:selectItem itemValue=3D"0" itemLabel=3D"oil well"/>
+    <f:selectItem itemValue=3D"1" itemLabel=3D"factory"/>
+    <f:selectItem itemValue=3D"2" itemLabel=3D"newspaper"/>
+</rich:inplaceSelect>
+...]]> </programlisting>      =

+      =

+<para>
+ The <emphasis><property>&quot;value&quot;</property></emphasis>  attribut=
e gets =

+ some value when an option in the select-box in clicked on (the default ac=
tion).   =

+</para>      =

+  =

+      <para> =

+ Nowever, if you want the end user to confirm the data saving explicitly y=
ou can: </para>   =

+      <itemizedlist>
+        <listitem>
+          <para>Use a <emphasis><property>&quot;showControls&quot;</proper=
ty></emphasis>  attribute, which makes &quot;save&quot; and &quot;cancel&qu=
ot; buttons (displayed as icons) appear next to the input field;
+          </para>
+            <para>Please see the example </para>
+          <para>
+            <emphasis role=3D"bold">Example:</emphasis>
+          </para>      =

+          =

+          <programlisting role=3D"XML"><![CDATA[...
+	<rich:inplaceSelect value=3D"#{inplaceComponentsBean.inputValue}"
+		defaultLabel=3D"Click here to edit">
+    <f:selectItem itemValue=3D"0" itemLabel=3D"oil well"/>
+    <f:selectItem itemValue=3D"1" itemLabel=3D"factory"/>
+    <f:selectItem itemValue=3D"2" itemLabel=3D"newspaper"/>
+	</rich:inplaceSelect>
+...]]> </programlisting>  =

+        =

+        </listitem>
+        =

+        =

+        <listitem>
+          <para>Use standard buttons by means of the  <emphasis role=3D"bo=
ld"><property>controls</property></emphasis>facet
+          </para>
+          <para>Please see the example </para>
+          <para>
+            <emphasis role=3D"bold">Example:</emphasis>
+          </para>      =

+          =

+          <programlisting role=3D"XML"><![CDATA[...
+<rich:inplaceSelect value=3D"#{inplaceComponentsBean.inputValue}" defaultL=
abel=3D"Click to edit" showControls=3D"true">
+    <f:facet name=3D"controls">
+        <input type=3D"button" value=3D"Save"/>
+        <input type=3D"button" value=3D"Cancel"/>
+    </f:facet>
+    <f:selectItem itemValue=3D"0" itemLabel=3D"oil well"/>
+    <f:selectItem itemValue=3D"1" itemLabel=3D"factory"/>
+    <f:selectItem itemValue=3D"2" itemLabel=3D"newspaper"/>
+</rich:inplaceSelect>
+...]]> </programlisting>  =

+          =

+        </listitem>
+      </itemizedlist>   =

+      =

+      =

+     <note>
+        <title>Note:</title>
+        <para>
+          The <emphasis> <property>controls</property></emphasis>facet als=
o implies using showcontrols =

+          attribute and it has to be defined as &quot;true&quot;.
+        </para>     =

+      </note>
+      =

+      =

+     <!--Icons redefinitions-->
+      <para>
+        Redefinition of the
+        &quot;save&quot; and &quot;cancel&quot; icons can be performed usi=
ng =

+        <emphasis><property>&quot;saveControlIcon&quot;</property></emphas=
is>
+        and  =

+        <emphasis><property>&quot;cancelControlIcon&quot;</property></emph=
asis>
+        attributes r.  You need to define the path to where your  images  =
are located. =

+      </para>
+      <para>
+        <emphasis role=3D"bold">Example:</emphasis>
+      </para>      =

+      =

+      <programlisting role=3D"XML"><![CDATA[...
+<rich:inplaceSelect =

+   value=3D"#{inplaceComponentsBean.inputValue}" defaultLabel=3D"Click to =
edit" showControls=3D"true"
+    showControls=3D"true"
+    controlsHorizontalPosition=3D"left"
+    controlsVerticalPosition=3D"top"
+    saveControlIcon=3D"/richfaces-demo/richfaces/cancel.gif"
+    cancelControlIcon=3D"/richfaces-demo/richfaces/save.gif"> =

+    =

+<f:selectItem itemValue=3D"0" itemLabel=3D"oil well"/>
+<f:selectItem itemValue=3D"1" itemLabel=3D"factory"/>
+<f:selectItem itemValue=3D"2" itemLabel=3D"newspaper"/>
+</rich:inplaceSelect>
+    ...]]> </programlisting>  =

+  =

+
+      <para>
+        You can also position the controls relatively to the input field, =
by means of =

+        <emphasis><property>&quot;  controlsHorizontalPosition&quot;</prop=
erty></emphasis> =

+        <emphasis><property>&quot; controlsVerticalPosition &quot;</proper=
ty></emphasis>
+        attributes.
+        =

+        The =

+        <emphasis><property>&quot;  controlsHorizontalPosition&quot;</prop=
erty></emphasis> attribute has =

+        <property>&quot;left&quot;</property>, <property>&quot;right&quot;=
</property> and <property> &quot;center&quot;</property> definitions. =

+        =

+        The =

+        <emphasis><property>&quot; controlsVerticalPosition &quot;</proper=
ty></emphasis>
+        attribute has <property>&quot;bottom&quot;</property>, <property>&=
quot;center&quot;</property> and <property>&quot;top&quot;</property> defin=
itions.
+      </para>
+
+
+      <para>
+        <emphasis role=3D"bold">Example:</emphasis>
+      </para>      =

+      =

+      <programlisting role=3D"XML"><![CDATA[...
+<rich:inplaceSelect value=3D"#{inplaceComponentsBean.inputValue}" defaultL=
abel=3D"Click to edit"  controlsHorizontalPosition=3D"left" controlsVertica=
lPosition=3D"top" showControls=3D"true">
+    <f:facet name=3D"controls" >
+        <input type=3D"button" value=3D"Save"/>
+        <input type=3D"button" value=3D"Cancel"/>
+    </f:facet>
+    <f:selectItem itemValue=3D"0" itemLabel=3D"oil well"/>
+    <f:selectItem itemValue=3D"1" itemLabel=3D"factory"/>
+    <f:selectItem itemValue=3D"2" itemLabel=3D"newspaper"/>
+</rich:inplaceSelect>
+...]]> </programlisting>  =

+
+    <para>
+     Another useful attribute is =

+        <emphasis><property>&quot;openOnEdit&quot;</property></emphasis>. =

+        It allows you to make the drop-down box with options appear once &=
quot;edit&quot; state activated. =

+      </para>
+
+
+
+
+
+
+      <para>
+        The =

+        <emphasis><property>&quot;editEvent&quot;</property></emphasis>   =
      =

+        attribute provides an option to assign an JavaScript action that i=
nitiates the change of the state  from
+        <property>view</property>
+        to =

+        <property>edit</property>. =

+        =

+        =

+        The default value is &quot;click&quot;. =

+        =

+      </para>
+      =

+      =

+      =

+     <note>
+        <title>Note:</title>
+        <para>
+          Do not use &quot;on&quot; prefix applying event action. E.g. use=
 &quot;click&quot; instead of &quot;onClick&quot;, use &quot;mouseover&quot=
; instead of &quot;onMouseOver&quot;. =

+        </para>
+      </note>
+
+      <para> =

+        The   =

+        <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis>=
  =

+        (with possible values &quot;true&quot;, &quot;false&quot;) gives y=
ou an =

+        option to make the text in the input area selected right after the=
 change from =

+        <property>view</property> state to <property>edit</property> occur=
s. =

+        =

+      </para>
+      <para>
+        The =

+        <emphasis><property>&quot;  inputWidth&quot;</property></emphasis>=
 , =

+        <emphasis><property>&quot; minInputWidth&quot;</property></emphasi=
s> , and =

+        <emphasis><property>&quot; maxInputWidth&quot;</property></emphasi=
s>  =

+        attributes are provided to specify the width, minimal width and ma=
ximal width for the input element respectively. =

+        =

+        =

+      </para>
+      <para>
+        The =

+        <emphasis><property>&quot; oneditactivation&quot;</property></emph=
asis> , =

+        <emphasis><property>&quot;oneditactivated&quot;</property></emphas=
is> , =

+        <emphasis><property>&quot;onviewactivation&quot;</property></empha=
sis> =

+        and  =

+        <emphasis><property>&quot; onviewactivated&quot;</property></empha=
sis>  attributes
+        provide a possibility to assign JavaScript code on =

+        <property>edit</property> state activation, on =

+        <property>edit</property> state activated,on =

+        <property>view</property> state activation and on =

+        <property>view</property> state activated respectively. =

+      </para>   =

+    </section>
+    <!-- End. Details of Usage-->
+
+
+    <!-- JavaScript API-->  =

+  <section>
+    <title>JavaScript API</title>
+    <table> =

+      <title>JavaScript API</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Function</entry>
+            <entry>Description</entry>
+            =

+          </row>
+        </thead>
+        <tbody>
+                    <!--Sorting API -->
+                    <row>
+                      <entry>edit()</entry>
+                      <entry>changes the  state to edit </entry>
+             =

+                    </row>
+                    <row>
+                      <entry>cancel()</entry>
+                      <entry>changes its state to the previous one before =
editing (changed or view)</entry>
+          =

+                    </row>
+                    =

+                    <row>
+                      <entry>save()</entry>
+                      <entry>the component hanges the state to the previou=
s one before editing (changed or view)</entry>
+                    </row>
+                    <row>
+                      <entry>save()</entry>
+                      <entry>the component changes its state to  changed w=
ith a new value</entry>
+                    </row>
+                  <row>
+                    <entry>save()</entry>
+                    <entry>the component changes its state to  changed wit=
h a new value</entry>
+                  </row>
+                  <row>
+                    <entry>getValue()</entry>
+                    <entry>gets the current value</entry>
+                  </row>
+ =

+                  <row>
+                    <entry>setValue(newValue)</entry>
+                    <entry>sets the current value</entry>
+                  </row>
+    =

+        </tbody>
+      </tgroup>
+    </table>
+  </section>
+    <!-- End of JavaScript API-->   =

+    =

+    <!-- Look-and-Feel Customization-->  =

+    =

+    <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:inplaceSelect&gt;</property>
+        </emphasis> components at once: =

+          <itemizedlist>
+            <listitem>Redefine the corresponding skin parameters</listitem>
+            <listitem> Add to your style sheets style classes used by a <e=
mphasis role=3D"bold">
+                <property>&lt;rich:inplaceSelect&gt;</property>
+            </emphasis> component</listitem>
+        </itemizedlist>
+        </para>
+    </section>
+       =

+
+<!-- <section>
+    <title>Skin Parameters Redefinition</title>
+
+    <table>
+      <title>Skin parameters redefinition for &quot;save&quot; and &quot;c=
ancel&quot; controls</title>
+
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+
+        <tbody>
+          <row>
+            <entry>tabBackgroundColor</entry>
+
+            <entry>background-color</entry>
+          </row>
+          =

+          <row>
+            <entry>panelBorderColor</entry>
+            =

+            <entry>border-color</entry>
+          </row>
+          =

+          <row>
+            <entry>panelBorderColor</entry>
+            =

+            <entry>border-color</entry>
+          </row>
+
+
+
+
+        </tbody>
+      </tgroup>
+    </table>
+
+    <table>
+      <title>Skin parameters redefinition for view state</title>
+
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+
+        <tbody>
+          <row>
+            <entry>editorBackgroundColor</entry>
+
+            <entry>background-color</entry>
+          </row>
+          <row>
+            <entry>generalTextColor</entry>
+            =

+            <entry>border-bottom-color</entry>
+          </row>
+           </tbody>
+      </tgroup>
+    </table>
+
+
+
+    <table>
+      <title>Skin parameters redefinition for &quot;Changed&quot; state</t=
itle>
+
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+
+        <tbody>
+          <row>
+            <entry>editorBackgroundColor</entry>
+
+            <entry>background-color</entry>
+          </row>
+
+          <row>
+            <entry>generalTextColo</entry>
+
+            <entry>border-bottom-color</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>
+
+    <table>
+      <title>Classes names that define input field look and feel in edit s=
tate </title>
+
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Skin parameters</entry>
+
+            <entry>CSS properties</entry>
+          </row>
+        </thead>
+
+        <tbody>
+          <row>
+            <entry>editBackgroundColor</entry>
+
+            <entry>background-color</entry>
+          </row>
+
+          <row>
+            <entry>panelBorderColor</entry>
+
+            <entry>border-color</entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>
+
+    =

+    </section>-->
+  =

+  <!-- END Skin Parameters Redefinition-->  =

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

+
+  <!--<section>
+    <title>Definition of Custom Style Classes</title>
+    <para>On the screenshot there are classes names that define styles for=
 component elements.</para>
+
+
+    <figure>
+      <title>Classes names</title>
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref=3D"images/inplaceInputClasses.png"/>
+        </imageobject>
+      </mediaobject>
+    </figure>    =

+    =

+    =

+    <table>
+      <title>Class name for the view state</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Class name</entry>
+            <entry>Description</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>rich-inplace-view</entry>
+            <entry>Defines styles for the view state</entry>
+          </row>
+          =

+          <row>
+            <entry>rich-inplace-input-view-hover</entry>
+            <entry>Defines styles for hovered text in  the view state  </e=
ntry>
+          </row>
+          =

+        </tbody>
+      </tgroup>
+    </table>
+    =

+    =

+    =

+    =

+    =

+    =

+    <table>
+      <title>Class name for the input field in  edit state</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Class name</entry>
+            <entry>Description</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>rich-inplace-field</entry>
+            <entry>Defines styles for input field look and feel in edit st=
ate</entry>
+          </row>
+
+        </tbody>
+      </tgroup>
+    </table>
+    =

+    =

+    <table>
+      <title>Class name for the &quot;Changed&quot; state</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Class name</entry>
+            <entry>Description</entry>
+          </row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>rich-inplace-changed</entry>
+            <entry>Defines styles for the &quot;Changed&quot; state</entry>
+          </row>
+          <row>
+            <entry> rich-inplace-input-changed-hover </entry>
+            <entry>Defines styles for the hovered text in  the &quot;Chang=
ed&quot; state</entry>
+          </row> =

+          =

+          rich-inplace-input-changed-hover =

+        </tbody>
+      </tgroup>
+    </table>
+    =

+    =

+    =

+    =

+    <table>
+      <title>Classes names &quot;save&quot; and &quot;cancel&quot; control=
s in Edit state</title>
+      <tgroup cols=3D"2">
+        <thead>
+          <row>
+            <entry>Class name</entry>
+            <entry>Description</entry>
+          </row>
+        </thead>
+        <tbody>
+          =

+          <row>
+            <entry>rich-inplace-control</entry>
+            <entry>Defines styles for the controls</entry>
+          </row>
+          <row>
+            <entry>.rich-inplace-control-press</entry>
+            <entry>Defines styles for the controls when either of the butt=
ons is pressed</entry>
+          </row>
+          <row>
+            <entry>.rich-inplace-shadow-size</entry>
+            <entry>Defines size of the shadow</entry>
+          </row>
+          <row>
+            <entry>rich-inplace-shadow-tl</entry>
+            <entry>Defines styles for the shadow in the top left corner </=
entry>
+          </row>
+          <row>
+            <entry>rich-inplace-shadow-tr</entry>
+            <entry>Defines styles for the shadow in the top right corner</=
entry>
+          </row>
+          <row>
+            <entry>rich-inplace-shadow-bl</entry>
+            <entry>Defines styles for the shadow in the bottom left corner=
</entry>
+          </row>
+          <row>
+            <entry>rich-inplace-shadow-br</entry>
+            <entry>Defines styles for the shadow in the bottom right corne=
r</entry>
+          </row>
+          =

+        </tbody>
+      </tgroup>
+    </table>
+    =

+    =

+    =

+
+    <para>In order to redefine styles for all <emphasis role=3D"bold">
+      <property>&lt;rich:inplaceSelect&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"tab_cn3"> above</link>) and define necessary properties in them. </p=
ara> =

+    =

+    <para>
+      <emphasis role=3D"bold">Example:</emphasis>
+    </para>
+    <programlisting role=3D"CSS"><![CDATA[...
+.rich-inplace-field {
+font-style: bold;
+}						=

+	=

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

+    =

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

+    <figure>
+      <title>Redefinition styles with predefined classes</title>
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref=3D"images/inplaceInputRich-inplace-field.png"=
/>
+        </imageobject>
+      </mediaobject>
+    </figure>
+    <para>In the shown example the font in <property>edit</property> state=
 is changed to bold.</para>
+    =

+    =

+    =

+    =

+    =

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

+      <emphasis role=3D"bold"> <property>&lt;rich:inplaceSelect&gt;</prope=
rty></emphasis> component. In this case you should create own style classes=
 and use them in corresponding <emphasis role=3D"bold"><property>&lt;rich:i=
nplaceSelect&gt;</property></emphasis> <property>styleClass</property> attr=
ibutes. An example is placed below:</para>
+    <para>
+      <emphasis role=3D"bold">Example:</emphasis>
+    </para>
+    <programlisting role=3D"CSS"><![CDATA[...
+.myClass {
+color:  #008cca;
+}
+...]]></programlisting>  =

+    <para>The <emphasis><property>&quot;styleClass&quot;</property></empha=
sis> attribute for <emphasis role=3D"bold"
+      ><property>&lt;rich:inplaceSelect&gt; </property></emphasis> is defi=
ned as it=E2=80=99s shown in the example below:</para>
+    =

+    <para>
+      <emphasis role=3D"bold">Example:</emphasis>
+    </para>
+    <programlisting role=3D"CSS"><![CDATA[...<rich:inplaceSelect value=3D"=
click to edit" styleClass=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/inplaceInputMyClass.png"/>
+        </imageobject>
+      </mediaobject>
+    </figure>  =

+    =

+    <para>As it could be seen on the picture above, the font color of the =
text on the component was changed.</para>
+        =

+  </section>-->
+
+  <section>
+    <title>Relevant Resources Links</title>
+    <para>
+      <ulink url=3D"http://livedemo.exadel.com/richfaces-demo/richfaces/pr=
ogressbar.jsf?c=3DinplaceInput">Here</ulink>
+      you can see the example of <emphasis role=3D"bold">
+        <property>&lt;rich:inplaceIput&gt;</property>
+      </emphasis> usage and sources for the given example. </para>
+  </section>
+</section>
\ No newline at end of file


--===============5425972696594973197==--