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
===================================================================
--- 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>"oneditactivated"</property></emphasis>
,
<emphasis><property>"onviewactivation"</property></emphasis>
and
- <emphasis><property>"
onviewactivated"</property></emphasis>
+ <emphasis><property>"
onviewactivated"</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
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml
(rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml 2008-03-28
20:21:38 UTC (rev 7390)
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<section>
+ <sectioninfo>
+ <keywordset>
+ <keyword></keyword>
+ </keywordset>
+ </sectioninfo>
+ <section>
+ <title>Description</title>
+ <para>The <emphasis role="bold">
+ <property><rich:inplaceSelect></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="bold"><property><rich:inplaceSelect></property></emphasis>
component</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/inplaceSelect.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </section>
+ <section>
+ <title>Key Features</title>
+ <itemizedlist>
+ <listitem>Option to display "save",
"cancel" buttons as icons</listitem>
+ <listitem>Option to display "save",
"cancel" buttons as standard buttons</listitem>
+ <listitem>Possibility to assign an JavaScript action on state
change</listitem>
+ <listitem>Switching between<emphasis
role="bold"><property><rich:inplaceSelect></property></emphasis>
components using "Tab" 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
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml
(rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml 2008-03-28
20:21:38 UTC (rev 7390)
@@ -0,0 +1,759 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<section>
+ <sectioninfo>
+ <keywordset>
+ <keyword>rich:inplaceSelect</keyword>
+ <keyword>inplaceSelect</keyword>
+ </keywordset>
+ </sectioninfo>
+ <table>
+ <title>Component identification parameters</title>
+
+ <tgroup cols="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</entry>
+ </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="bold">Example:</emphasis>
+ </para>
+ <!-- itemLabels has to have realy value-->
+
+ <programlisting role="XML"><![CDATA[...
+<rich:inplaceSelect value="#{Bean.inputValue}" defaultLabel="Click to
edit">
+ <f:selectItem itemValue="0" itemLabel="oil well"/>
+ <f:selectItem itemValue="1" itemLabel="factory"/>
+ <f:selectItem itemValue="2" itemLabel="newspaper"/>
+</rich:inplaceSelect>
+...]]></programlisting>
+ </section>
+ <section>
+ <title>Creating the Component Dynamically Using Java</title>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="JAVA"><![CDATA[import
org.richfaces.component.html.inplaceSelect;
+...
+HtmlInpaceSelect myInplaceSelect = new InplaceSelect();
+...]]></programlisting>
+ </section>
+
+
+
+
+
+ <!-- Start Details of Usage-->
+ <section>
+ <title>Details of Usage</title>
+
+ <para>
+ The <emphasis
role="bold"><property><rich:inplaceSelect></property>
</emphasis> component has three functional states, which are:
+ </para>
+ <para>
+ <itemizedlist>
+ <listitem>
+ <para><property>View </property>state displays the current
value as text;</para>
+<!-- <figure>
+ <title>View state</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/inplaceInputViewState_shadow.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure> -->
+ </listitem>
+ <listitem>
+ <para><property>Edit </property>state displays a list with
options;</para>
+ <!--<figure>
+ <title>Edit state</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="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="images/inplaceInputChangedState_shadow.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure> -->
+ </listitem>
+ </itemizedlist>
+
+ </para>
+
+ <para>
+ The
+
<emphasis><property>"value"</property></emphasis>
+ attribute displays the value as an outputtext.
+ The attribute is defined when some option in the list is selected.
+ </para>
+
+
+
+
+ <para>You can form he list of the options: using
+
<emphasis><property><f:selectItem></property></emphasis>
and
+
<emphasis><property><f:selectItems></property></emphasis>
</para>
+ <para>Please see the example below</para>
+
+
+
+
+
+<para>
+ <emphasis role="bold">Example:</emphasis>
+</para>
+<programlisting role="XML"><![CDATA[...
+<rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}"
showControls="true" defaultLabel="click to edit">
+ <f:selectItem itemValue="0" itemLabel="oil well"/>
+ <f:selectItem itemValue="1" itemLabel="factory"/>
+ <f:selectItem itemValue="2" itemLabel="newspaper"/>
+</rich:inplaceSelect>
+...]]> </programlisting>
+
+<para>
+ The
<emphasis><property>"value"</property></emphasis>
attribute gets
+ some value when an option in the select-box in clicked on (the default action).
+</para>
+
+ <para>
+ Nowever, if you want the end user to confirm the data saving explicitly you can:
</para>
+ <itemizedlist>
+ <listitem>
+ <para>Use a
<emphasis><property>"showControls"</property></emphasis>
attribute, which makes "save" and "cancel" buttons
(displayed as icons) appear next to the input field;
+ </para>
+ <para>Please see the example </para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+ <rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}"
+ defaultLabel="Click here to edit">
+ <f:selectItem itemValue="0" itemLabel="oil well"/>
+ <f:selectItem itemValue="1" itemLabel="factory"/>
+ <f:selectItem itemValue="2" itemLabel="newspaper"/>
+ </rich:inplaceSelect>
+...]]> </programlisting>
+
+ </listitem>
+
+
+ <listitem>
+ <para>Use standard buttons by means of the <emphasis
role="bold"><property>controls</property></emphasis>facet
+ </para>
+ <para>Please see the example </para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+<rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}"
defaultLabel="Click to edit" showControls="true">
+ <f:facet name="controls">
+ <input type="button" value="Save"/>
+ <input type="button" value="Cancel"/>
+ </f:facet>
+ <f:selectItem itemValue="0" itemLabel="oil well"/>
+ <f:selectItem itemValue="1" itemLabel="factory"/>
+ <f:selectItem itemValue="2" itemLabel="newspaper"/>
+</rich:inplaceSelect>
+...]]> </programlisting>
+
+ </listitem>
+ </itemizedlist>
+
+
+ <note>
+ <title>Note:</title>
+ <para>
+ The <emphasis>
<property>controls</property></emphasis>facet also implies using
showcontrols
+ attribute and it has to be defined as "true".
+ </para>
+ </note>
+
+
+ <!--Icons redefinitions-->
+ <para>
+ Redefinition of the
+ "save" and "cancel" icons can be performed
using
+
<emphasis><property>"saveControlIcon"</property></emphasis>
+ and
+
<emphasis><property>"cancelControlIcon"</property></emphasis>
+ attributes r. You need to define the path to where your images are located.
+ </para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+<rich:inplaceSelect
+ value="#{inplaceComponentsBean.inputValue}" defaultLabel="Click to
edit" showControls="true"
+ showControls="true"
+ controlsHorizontalPosition="left"
+ controlsVerticalPosition="top"
+ saveControlIcon="/richfaces-demo/richfaces/cancel.gif"
+ cancelControlIcon="/richfaces-demo/richfaces/save.gif">
+
+<f:selectItem itemValue="0" itemLabel="oil well"/>
+<f:selectItem itemValue="1" itemLabel="factory"/>
+<f:selectItem itemValue="2" itemLabel="newspaper"/>
+</rich:inplaceSelect>
+ ...]]> </programlisting>
+
+
+ <para>
+ You can also position the controls relatively to the input field, by means of
+ <emphasis><property>"
controlsHorizontalPosition"</property></emphasis>
+ <emphasis><property>" controlsVerticalPosition
"</property></emphasis>
+ attributes.
+
+ The
+ <emphasis><property>"
controlsHorizontalPosition"</property></emphasis> attribute has
+ <property>"left"</property>,
<property>"right"</property> and <property>
"center"</property> definitions.
+
+ The
+ <emphasis><property>" controlsVerticalPosition
"</property></emphasis>
+ attribute has <property>"bottom"</property>,
<property>"center"</property> and
<property>"top"</property> definitions.
+ </para>
+
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+<rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}"
defaultLabel="Click to edit" controlsHorizontalPosition="left"
controlsVerticalPosition="top" showControls="true">
+ <f:facet name="controls" >
+ <input type="button" value="Save"/>
+ <input type="button" value="Cancel"/>
+ </f:facet>
+ <f:selectItem itemValue="0" itemLabel="oil well"/>
+ <f:selectItem itemValue="1" itemLabel="factory"/>
+ <f:selectItem itemValue="2" itemLabel="newspaper"/>
+</rich:inplaceSelect>
+...]]> </programlisting>
+
+ <para>
+ Another useful attribute is
+
<emphasis><property>"openOnEdit"</property></emphasis>.
+ It allows you to make the drop-down box with options appear once
"edit" state activated.
+ </para>
+
+
+
+
+
+
+ <para>
+ The
+
<emphasis><property>"editEvent"</property></emphasis>
+ attribute provides an option to assign an JavaScript action that initiates the
change of the state from
+ <property>view</property>
+ to
+ <property>edit</property>.
+
+
+ The default value is "click".
+
+ </para>
+
+
+
+ <note>
+ <title>Note:</title>
+ <para>
+ Do not use "on" prefix applying event action. E.g. use
"click" instead of "onClick", use
"mouseover" instead of "onMouseOver".
+ </para>
+ </note>
+
+ <para>
+ The
+
<emphasis><property>"selectOnEdit"</property></emphasis>
+ (with possible values "true", "false") gives
you an
+ option to make the text in the input area selected right after the change from
+ <property>view</property> state to
<property>edit</property> occurs.
+
+ </para>
+ <para>
+ The
+ <emphasis><property>"
inputWidth"</property></emphasis> ,
+ <emphasis><property>"
minInputWidth"</property></emphasis> , and
+ <emphasis><property>"
maxInputWidth"</property></emphasis>
+ attributes are provided to specify the width, minimal width and maximal width for
the input element respectively.
+
+
+ </para>
+ <para>
+ The
+ <emphasis><property>"
oneditactivation"</property></emphasis> ,
+
<emphasis><property>"oneditactivated"</property></emphasis>
,
+
<emphasis><property>"onviewactivation"</property></emphasis>
+ and
+ <emphasis><property>"
onviewactivated"</property></emphasis> 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="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 previous one
before editing (changed or view)</entry>
+ </row>
+ <row>
+ <entry>save()</entry>
+ <entry>the component changes its state to changed with a new
value</entry>
+ </row>
+ <row>
+ <entry>save()</entry>
+ <entry>the component changes its state to changed with 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
<emphasis>
+ <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 <emphasis
role="bold">
+ <property><rich:inplaceSelect></property>
+ </emphasis> components at once:
+ <itemizedlist>
+ <listitem>Redefine the corresponding skin parameters</listitem>
+ <listitem> Add to your style sheets style classes used by a
<emphasis role="bold">
+ <property><rich:inplaceSelect></property>
+ </emphasis> component</listitem>
+ </itemizedlist>
+ </para>
+ </section>
+
+
+<!-- <section>
+ <title>Skin Parameters Redefinition</title>
+
+ <table>
+ <title>Skin parameters redefinition for "save" and
"cancel" controls</title>
+
+ <tgroup cols="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="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 "Changed"
state</title>
+
+ <tgroup cols="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 state
</title>
+
+ <tgroup cols="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="images/inplaceInputClasses.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+
+ <table>
+ <title>Class name for the view state</title>
+ <tgroup cols="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
</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+
+
+
+ <table>
+ <title>Class name for the input field in edit state</title>
+ <tgroup cols="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
state</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+ <table>
+ <title>Class name for the "Changed" state</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>rich-inplace-changed</entry>
+ <entry>Defines styles for the "Changed"
state</entry>
+ </row>
+ <row>
+ <entry> rich-inplace-input-changed-hover </entry>
+ <entry>Defines styles for the hovered text in the
"Changed" state</entry>
+ </row>
+
+ rich-inplace-input-changed-hover
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+
+ <table>
+ <title>Classes names "save" and "cancel"
controls in Edit state</title>
+ <tgroup cols="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 buttons 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
corner</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+
+ <para>In order to redefine styles for all <emphasis
role="bold">
+ <property><rich:inplaceSelect></property>
+ </emphasis> components on a page using CSS, it's enough to create
classes with the
+ same names (possible classes could be found in the tables <link
linkend="tab_cn3"> above</link>) and define necessary properties in
them. </para>
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="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="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's aslo possible to change styles of a particular
+ <emphasis role="bold">
<property><rich:inplaceSelect></property></emphasis>
component. In this case you should create own style classes and use them in corresponding
<emphasis
role="bold"><property><rich:inplaceSelect></property></emphasis>
<property>styleClass</property> attributes. An example is placed
below:</para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+.myClass {
+color: #008cca;
+}
+...]]></programlisting>
+ <para>The
<emphasis><property>"styleClass"</property></emphasis>
attribute for <emphasis role="bold"
+ ><property><rich:inplaceSelect>
</property></emphasis> is defined as it’s shown in the example
below:</para>
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...<rich:inplaceSelect
value="click to edit" styleClass="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="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="http://livedemo.exadel.com/richfaces-demo/richfaces/progressbar...
+ you can see the example of <emphasis role="bold">
+ <property><rich:inplaceIput></property>
+ </emphasis> usage and sources for the given example. </para>
+ </section>
+</section>
\ No newline at end of file