Author: ochikvina
Date: 2009-09-17 06:00:01 -0400 (Thu, 17 Sep 2009)
New Revision: 15601
Modified:
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml
Log:
https://jira.jboss.org/jira/browse/RF-7803 - the component description is reviewed and
updated. The tables with style classes (selectors) are restructured.
Modified:
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml
===================================================================
---
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml 2009-09-16
23:00:50 UTC (rev 15600)
+++
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml 2009-09-17
10:00:01 UTC (rev 15601)
@@ -29,7 +29,7 @@
<title>Key Features</title>
<itemizedlist>
<listitem>
- <para>View/changed/edit states highly customizable
representations</para>
+ <para>View/changed/edit states in highly customizable
representations</para>
</listitem>
<listitem>
<para>Changing state event customization</para>
@@ -59,7 +59,7 @@
<emphasis role="bold">
<property><rich:inplaceInput></property>
</emphasis>
- component was designed to facilitate displaying and inputting(editing) some
data.
+ component was designed to facilitate displaying and inputting (editing) some
data.
</para>
<para>
@@ -81,7 +81,7 @@
<itemizedlist>
<listitem>
<para>
- <property>View</property> state displays default label with the
value taken from
+ <property>View</property> state displays the default label with
the value taken from the
<emphasis>
<property>"value"</property>
</emphasis> or <emphasis>
@@ -114,10 +114,10 @@
In the example above the <emphasis>
<property>"value"</property>
</emphasis> attribute is not initialized
- therefore "<code>click to edit</code>" text, that
+ therefore the "<code>click to edit</code>"
text, that
<emphasis>
<property>"defaultLabel"</property>
- </emphasis>, contains is displayed.
+ </emphasis> contains, is displayed.
</para>
<para>
This is the result:
@@ -264,7 +264,7 @@
</emphasis>
attribute, which makes "Save" and "Cancel" buttons appear
next to the input field.
If the controls are used, data is not saved automatically when the form loses
focus: user has to confirm that he/she wants to save/discard the data explicitly.
- In both cases(with controls or without them) the input data can be discarded by
pressing "Esc" key.
+ In both cases (with controls or without them) the input data can be discarded by
pressing "Esc" key.
</para>
<para>
@@ -289,7 +289,7 @@
<itemizedlist>
<listitem>
<para>
- The <emphasis>
+ the <emphasis>
<property>"controlsHorizontalPosition"</property>
</emphasis> attribute
with "left", "right" and "center"
definitions
@@ -297,7 +297,7 @@
</listitem>
<listitem>
<para>
- The <emphasis>
+ the <emphasis>
<property>"controlsVerticalPosition "</property>
</emphasis> attribute
with "bottom", "center" and "top"
definitions
@@ -417,7 +417,7 @@
<para>
The <emphasis role="bold">
<property><rich:inplaceInput></property>
- </emphasis> component supports standard
+ </emphasis> component supports the standard
<emphasis>
<property>"tabindex"</property>
</emphasis> attribute.
@@ -556,133 +556,145 @@
</row>
</tbody>
</tgroup>
- </table>
- <table>
- <title>Classes names that define a component appearance</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-inplace</entry>
- <entry>Defines styles for a wrapper <span> (or
<div>) element of a component</entry>
- </row>
- <row>
- <entry>rich-inplace-input</entry>
- <entry>Defines styles for the component input
field</entry>
- </row>
- </tbody>
- </tgroup>
</table>
- <table id="tab_cn_iI">
- <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 the 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>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Classes names for "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>
- You can find all necessary information about style classes redefinition in
+
+ <table>
+ <title>Style classes (selectors) with the corresponding skin
parameters</title>
+ <tgroup cols="4">
+ <thead>
+ <row>
+ <entry>Class (selector) name</entry>
+ <entry>Description</entry>
+ <entry>Skin Parameters</entry>
+ <entry>CSS properties mapped</entry>
+
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry morerows="1">.rich-inplace-control</entry>
+ <entry morerows="1">Defines styles for the
controls</entry>
+ <entry>tabBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry morerows="1">.rich-inplace-control-press</entry>
+ <entry morerows="1">Defines styles for the controls when either
of the buttons is pressed</entry>
+ <entry>tabBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry morerows="1">.rich-inplace-view</entry>
+ <entry morerows="1">Defines styles for the view
state</entry>
+ <entry>editorBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>border-bottom-color</entry>
+ </row>
+
+ <row>
+ <entry morerows="1">.rich-inplace-changed</entry>
+ <entry morerows="1">Defines styles for the
"Changed" state</entry>
+ <entry>editorBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>border-bottom-color</entry>
+ </row>
+
+ <row>
+ <entry morerows="1">input.rich-inplace-field</entry>
+ <entry morerows="1">Defines styles for the input field in edit
state</entry>
+ <entry>editorBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Style classes (selectors) without skin parameters</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>rich-inplace</entry>
+ <entry>Defines styles for a wrapper <span> (or
<div>) element of a component</entry>
+ </row>
+
+ <row>
+ <entry>rich-inplace-input</entry>
+ <entry>Defines styles for the component input field</entry>
+ </row>
+
+ <row>
+ <entry>rich-inplace-input-view-hover</entry>
+ <entry>Defines styles for hovered text in the view state </entry>
+ </row>
+
+ <row>
+ <entry>rich-inplace-field</entry>
+ <entry>Defines styles for the input field look and feel in edit
state</entry>
+ </row>
+
+ <row>
+ <entry> rich-inplace-input-changed-hover </entry>
+ <entry>Defines styles for the hovered text in the "Changed"
state</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>You can find all necessary information about style classes redefinition in
<link linkend="customstyles">Definition of Custom Style
Classes</link>
- section.
+ section.</para>
</section>
<section>
<title>Relevant Resources Links</title>
Modified:
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml
===================================================================
---
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml 2009-09-16
23:00:50 UTC (rev 15600)
+++
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml 2009-09-17
10:00:01 UTC (rev 15601)
@@ -12,7 +12,7 @@
<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>
+ </emphasis> is used for the creation of select based inputs: it shows the
value as a text in one state and enables editing the value, providing a list of options in
another state</para>
<figure>
<title>Three states of <emphasis role="bold">
@@ -29,7 +29,7 @@
<title>Key Features</title>
<itemizedlist>
<listitem>
- <para>View/changed/edit states highly customizable
representations</para>
+ <para>View/changed/edit states in highly customizable
representations</para>
</listitem>
<listitem>
<para>Optional "inline" or "block" element
rendering on a page</para>
@@ -79,10 +79,10 @@
If the initial value of the <emphasis>
<property>"value"</property>
</emphasis>
- attribute is "null" or <property>empty
string</property>
+ attribute is "null" or <property>empty
string</property>,
the <emphasis>
<property>"defaultLabel"</property>
- </emphasis> attribute is used to define default label.
+ </emphasis> attribute is used to define a default label.
</para>
<para>
<emphasis role="bold">Example:</emphasis>
@@ -103,11 +103,11 @@
<para>
In the example above the <emphasis>
<property>"value"</property>
- </emphasis> attribute is not initialized
- therefore "<code>click to edit</code>" text, that
+ </emphasis> attribute is not initialized,
+ therefore the "<code>click to edit</code>" text, that
<emphasis>
<property>"defaultLabel"</property>
- </emphasis>, contains is displayed.
+ </emphasis> contains, is displayed.
</para>
<para>
This is the result:
@@ -179,7 +179,7 @@
<para>
The <emphasis>
<property>"editEvent"</property>
- </emphasis> attribute provides an option to assign an JavaScript action
+ </emphasis> attribute provides an option to assign a JavaScript action
that initiates the change of the state from <property>view</property>
to <property>edit</property>.
The default value is "onclick".
</para>
@@ -324,7 +324,7 @@
<itemizedlist>
<listitem>
<para>
- The <emphasis>
+ the <emphasis>
<property>"controlsHorizontalPosition"</property>
</emphasis> attribute
with "left", "right" and "center" definitions
@@ -332,7 +332,7 @@
</listitem>
<listitem>
<para>
- The <emphasis>
+ the <emphasis>
<property>"controlsVerticalPosition "</property>
</emphasis> attribute
with "bottom" and "top" definitions
@@ -363,7 +363,7 @@
</emphasis>
facet in order to replace the default controls with facets content. See the
example below.
</para>
- <para>Please, see the example.</para>
+
<para>
<emphasis role="bold">Example:</emphasis>
</para>
@@ -451,7 +451,7 @@
<para>
The <emphasis role="bold">
<property><rich:inplaceSelect></property>
- </emphasis> component supports standard
+ </emphasis> component supports the standard
<emphasis>
<property>"tabindex"</property>
</emphasis> attribute.
@@ -582,138 +582,138 @@
</tbody>
</tgroup>
</table>
- <table id="cn3">
- <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-select-view</entry>
- <entry>Defines styles for the select view</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-select-field</entry>
- <entry>Defines styles for the select field</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Class name for the control</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-inplace-select-control</entry>
- <entry>Defines styles for the select control</entry>
- </row>
- <row>
- <entry>rich-inplace-select-control-press</entry>
- <entry>Defines styles for the pressed select
control</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Class name for the list</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-inplace-select-list-decoration</entry>
- <entry>Defines styles for a wrapper <table> element
of an inplaceSelect</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Classes names for the selected item</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
-
- <row>
- <entry>rich-inplace-select-selected-item</entry>
- <entry>Defines styles for the selected item</entry>
- </row>
-
-
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Classes names for the shadow</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
-
- <row>
- <entry>rich-inplace-select-shadow-tl</entry>
- <entry>Defines styles for the top-left shadow</entry>
- </row>
- <row>
- <entry>rich-inplace-select-shadow-tr</entry>
- <entry>Defines styles for the top-right shadow</entry>
- </row>
- <row>
- <entry>rich-inplace-select-shadow-bl</entry>
- <entry>Defines styles for the bottom-left shadow</entry>
- </row>
- <row>
- <entry>rich-inplace-select-shadow-br</entry>
- <entry>Defines styles for the bottom-right shadow</entry>
- </row>
-
-
- </tbody>
- </tgroup>
- </table>
- You can find all necessary information about style classes redefinition in
+
+ <table>
+ <title>Style classes (selectors) with the corresponding skin
parameters</title>
+ <tgroup cols="4">
+ <thead>
+ <row>
+ <entry>Class (selector) name</entry>
+ <entry>Description</entry>
+ <entry>Skin Parameters</entry>
+ <entry>CSS properties mapped</entry>
+
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry morerows="1">.rich-inplace-select-view</entry>
+ <entry morerows="1">Defines styles for the component in the view
state</entry>
+ <entry>editorBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>generaTextColor</entry>
+ <entry>border-bottom-color</entry>
+ </row>
+
+ <row>
+ <entry morerows="1">input.rich-inplace-select-field,
.rich-inplace-select-field</entry>
+ <entry morerows="1">Define styles for the component input
field</entry>
+ <entry>editorBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry morerows="1">.rich-inplace-select-control</entry>
+ <entry morerows="1">Defines styles for the component
control</entry>
+ <entry>tabBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry
morerows="1">.rich-inplace-select-control-press</entry>
+ <entry morerows="1">Defines styles for the pressed
control</entry>
+ <entry>tabBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry
morerows="1">.rich-inplace-select-list-decoration</entry>
+ <entry morerows="1">Defines styles for a wrapper
<table> element of the component</entry>
+ <entry>editBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry
morerows="1">.rich-inplace-select-selected-item</entry>
+ <entry morerows="1">Defines styles for the selected
item</entry>
+ <entry>headerBackgroundColor</entry>
+ <entry>background-color, border-color</entry>
+ </row>
+ <row>
+ <entry>headerTextColor</entry>
+ <entry>color</entry>
+ </row>
+
+ <row>
+ <entry>input.rich-inplace-select-arrow</entry>
+ <entry>Defines styles for the drop-down arrow</entry>
+ <entry>editBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Style classes (selectors) without skin parameters</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>.rich-inplace-select-changed</entry>
+ <entry>Defines styles for the component in the changed state</entry>
+ </row>
+
+ <row>
+ <entry>.rich-inplace-select-shadow-tl</entry>
+ <entry>Defines styles for the top-left shadow</entry>
+ </row>
+
+ <row>
+ <entry>.rich-inplace-select-shadow-tr</entry>
+ <entry>Defines styles for the top-right shadow</entry>
+ </row>
+
+ <row>
+ <entry>.rich-inplace-select-shadow-bl</entry>
+ <entry>Defines styles for the bottom-left shadow</entry>
+ </row>
+
+ <row>
+ <entry>.rich-inplace-select-shadow-br</entry>
+ <entry>Defines styles for the bottom-right shadow</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+ <para>You can find all necessary information about style classes redefinition
in
<link linkend="customstyles">Definition of Custom Style
Classes</link>
- section.
+ section.</para>
</section>
<section>
<title>Relevant Resources Links</title>