Author: msorokin Date: 2008-03-25 13:26:22 -0400 (Tue, 25 Mar 2008) New Revision: 7216 Modified: trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml Log: http://jira.jboss.com/jira/browse/RF-1226 MyClass usage image and Rich-inplace-field class usage described Description is finished. Modified: trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml 2008-03-25 17:25:01 UTC (rev 7215) +++ trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml 2008-03-25 17:26:22 UTC (rev 7216) @@ -253,7 +253,7 @@ The <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis> - (with possible values <property>&quot;true</property>, <property>&quot;false&quot;</property>) gives you an + (with possible values &quot;true&quot;, &quot;false&quot;) gives you an option to make the text in the input area selected right after the change from <property>&quot;View&quot;</property> state to <property>&quot;Edit&quot;</property>. @@ -391,13 +391,12 @@ </para> </section> - <!-- Skin Parameters Redefinition--> - <!-- + <section> <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition for the &quot;completed&quot; part of the bar with no label</title> + <title>Skin parameters redefinition for &quot;save&quot; and &quot;cancel&quot; controls</title> <tgroup cols="2"> <thead> @@ -410,68 +409,32 @@ <tbody> <row> - <entry>selectControlColor</entry> + <entry>tabBackgroundColor</entry> <entry>background-color</entry> </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the &quot;completed&quot; part of the bar with a label used</title> - - <tgroup cols="2"> - <thead> + <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> + <entry>panelBorderColor</entry> + + <entry>border-color</entry> </row> - </thead> - - <tbody> + <row> <entry>panelBorderColor</entry> - + <entry>border-color</entry> </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for the “completed” part of the bar with a label used</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>selectControlColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>controlBackgroundColor</entry> - - <entry>color</entry> - </row> </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for the &quot;remained&quot; part of the bar</title> + <title>Skin parameters redefinition for &quot;View&quot; state</title> <tgroup cols="2"> <thead> @@ -484,22 +447,23 @@ <tbody> <row> - <entry>controlBackgroundColor</entry> + <entry>editorBackgroundColor</entry> <entry>background-color</entry> </row> - <row> - <entry>controlTextColor</entry> - - <entry>color</entry> + <entry>generalTextColor</entry> + + <entry>border-bottom-color</entry> </row> - </tbody> + </tbody> </tgroup> </table> + + <table> - <title>Skin parameters redefinition for the bar itself with a label used</title> + <title>Skin parameters redefinition for &quot;Changed&quot; state</title> <tgroup cols="2"> <thead> @@ -512,41 +476,22 @@ <tbody> <row> - <entry>panelBorderColor</entry> + <entry>editorBackgroundColor</entry> - <entry>border-color</entry> + <entry>background-color</entry> </row> <row> - <entry>generalFamilyFont</entry> + <entry>generalTextColo</entry> - <entry>font-family</entry> + <entry>border-bottom-color</entry> </row> - - <row> - <entry>headerFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>controlTextColor</entry> - - <entry>color</entry> - </row> - </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for the bar itself with no label used</title> + <title>Classes names that define input field look and feel in &quot;Edit&quot; state </title> <tgroup cols="2"> <thead> @@ -559,7 +504,7 @@ <tbody> <row> - <entry>controlBackgroundColor</entry> + <entry>editBackgroundColor</entry> <entry>background-color</entry> </row> @@ -569,7 +514,6 @@ <entry>border-color</entry> </row> - </tbody> </tgroup> </table> @@ -579,7 +523,7 @@ <!-- 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> @@ -589,11 +533,14 @@ <title>Classes names</title> <mediaobject> <imageobject> - <imagedata fileref="images/progressbarClasses.png"/> + <imagedata fileref="images/inplaceInputClasses.png"/> </imageobject> </mediaobject> - </figure> <table> - <title>Classes names for the bar</title> + </figure> + + + <table> + <title>Class name for the &quot;View&quot; state</title> <tgroup cols="2"> <thead> <row> @@ -603,20 +550,21 @@ </thead> <tbody> <row> - <entry>rich-progress-bar-shell</entry> - <entry>Defines styles for the background and the borders of the bar when label is not used</entry> + <entry>rich-inplace-view</entry> + <entry>Defines styles for the &quot;View&quot; state</entry> </row> - <row> - <entry>rich-progress-bar-shell-dig</entry> - <entry>Defines styles for background, font and border settings when label is used</entry> - </row> </tbody> </tgroup> </table> + + + + + <table> - <title>Classes names that define &quot;completed&quot; part of the bar</title> + <title>Class name for the input field in &quot;Edit&quot; state</title> <tgroup cols="2"> <thead> <row> @@ -625,30 +573,40 @@ </row> </thead> <tbody> - <row> - <entry>rich-progress-bar-uploaded</entry> - <entry>Defines styles for of &quot;completed&quot; progress area with no labels used</entry> + <entry>rich-inplace-field</entry> + <entry>Defines styles for input field look and feel in &quot;Edit&quot; state</entry> </row> + + </tbody> + </tgroup> + </table> + + + <table> + <title>Class name for the &quot;Changed&quot; state</title> + <tgroup cols="2"> + <thead> <row> - <entry>rich-progress-bar-uploaded-dig</entry> - <entry>Defines styles for that &quot;completed&quot; progress area with labels used </entry> + <entry>Class name</entry> + <entry>Description</entry> </row> - + </thead> + <tbody> <row> - <entry>rich-progress-bar-completed</entry> - <entry>Defines styles for the &quot;completed&quot; progress area with a label used</entry> + <entry>rich-inplace-changed</entry> + <entry>Defines styles for the &quot;Changed&quot; state</entry> </row> - </tbody> </tgroup> </table> + <table> - <title>Classes names that define &quot;remained&quot; part of the progress area</title> + <title>Classes names &quot;save&quot; and &quot;cancel&quot; controls in Edit state</title> <tgroup cols="2"> <thead> <row> @@ -659,17 +617,40 @@ <tbody> <row> - <entry>rich-progress-bar-remained</entry> - <entry>Defines styles for the &quot;remained&quot; part of the bar</entry> + <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-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>&lt;rich:progressBar&gt;</property> + <property>&lt;rich:inplaceInput&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 linkend="tab_cn3"> above</link>) and define necessary properties in them. </para> @@ -677,9 +658,10 @@ <emphasis role="bold">Example:</emphasis> </para> <programlisting role="CSS"><![CDATA[... -.rich-progress-bar-remained{ - background-color: #ebf3fd; -} +.rich-inplace-field { +font-style: bold; +} + ...]]></programlisting> <para>This is the result:</para> @@ -688,31 +670,33 @@ <title>Redefinition styles with predefined classes</title> <mediaobject> <imageobject> - <imagedata fileref="images/progressbarRedefinedClasses.png"/> + <imagedata fileref="images/inplaceInputRich-inplace-field.png"/> </imageobject> </mediaobject> </figure> - <para>In the example the &quot;remained&quot; part of progress area is modified with a background-color CSS property.</para> + <para>In the shown example the font in &quot;Edit&quot; state is changed to bold.</para> <para>It&apos;s aslo possible to change styles of a particular - <emphasis role="bold"> <property>&lt;rich:progressBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> + <emphasis role="bold"> <property>&lt;rich:inplaceInput&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="CSS"><![CDATA[... -.RremainClass{ background-color: #ebf3fd;} +.myClass { +color: #008cca; +} ...]]></programlisting> <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:progressBar&gt; </property></emphasis> is defined as it’s shown in the example below:</para> + ><property>&lt;rich:inplaceInput&gt; </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:progressBar value="#{bean.incValue1}" styleClass="remainClass" /> + <programlisting role="CSS"><![CDATA[...<rich:inplaceInput value="click to edit" styleClass="myClass"/> ]]></programlisting> <para>This is a result:</para> @@ -721,12 +705,12 @@ <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> <mediaobject> <imageobject> - <imagedata fileref="images/progressbarRedefinedClasses.png"/> + <imagedata fileref="images/inplaceInputMyClass.png"/> </imageobject> </mediaobject> </figure> - <para>As it could be seen on the picture above, the font style for output text was changed.</para> + <para>As it could be seen on the picture above, the font color of the text on the component was changed.</para> </section> -->