[richfaces-svn-commits] JBoss Rich Faces SVN: r13483 - trunk/docs/userguide/en/src/main/docbook/included.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Fri Apr 10 06:02:31 EDT 2009
Author: msorokin
Date: 2009-04-10 06:02:31 -0400 (Fri, 10 Apr 2009)
New Revision: 13483
Modified:
trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/layout.xml
trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml
Log:
https://jira.jboss.org/jira/browse/RF-6593
Added descriptions of layout components
Modified: trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-04-10 00:14:07 UTC (rev 13482)
+++ trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-04-10 10:02:31 UTC (rev 13483)
@@ -10,13 +10,14 @@
<title>Description</title>
<para>The <emphasis role="bold">
<property><rich:layout></property>
- </emphasis> component is used to build the web page layout.
+ </emphasis> component is designed to build layouts.
</para>
</section>
<section>
<title>Key Features</title>
<itemizedlist>
- <listitem><para>bla bla bla</para></listitem>
+ <listitem><para>Cross-borwser comparability</para></listitem>
+ <listitem><para>Easy markup creation</para></listitem>
</itemizedlist>
</section>
Modified: trunk/docs/userguide/en/src/main/docbook/included/layout.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/layout.xml 2009-04-10 00:14:07 UTC (rev 13482)
+++ trunk/docs/userguide/en/src/main/docbook/included/layout.xml 2009-04-10 10:02:31 UTC (rev 13483)
@@ -4,7 +4,7 @@
<keywordset>
<keyword>rich:layout</keyword>
<keyword>rich:layout</keyword>
- <keyword>breakBefore</keyword>
+
</keywordset>
</sectioninfo>
<table>
@@ -23,15 +23,15 @@
</row>
<row>
<entry>component-class</entry>
- <entry>org.richfaces.component.html.Htmllayout</entry>
+ <entry>org.richfaces.component.html.HtmlLayout</entry>
</row>
<row>
<entry>component-family</entry>
- <entry>org.richfaces.layout</entry>
+ <entry>org.richfaces.Layout</entry>
</row>
<row>
<entry>renderer-type</entry>
- <entry>org.richfaces.layoutRenderer</entry>
+ <entry>org.richfaces.LayoutRenderer</entry>
</row>
<row>
<entry>tag-class</entry>
@@ -43,14 +43,16 @@
<section>
<title>Creating the Component with a Page Tag</title>
- <para>To create the simplest variant of <property>layout</property> on a page,
+ <para>To create the simplest layout with the <emphasis role="bold"><property><rich:layout></property></emphasis> on a page,
use the following syntax:</para>
<para>
<emphasis role="bold">Example:</emphasis>
</para>
<programlisting role="XML"><![CDATA[...
-
+<rich:layout>
+ ...
+</rich:layout>
...
]]></programlisting>
</section>
@@ -60,9 +62,9 @@
<para>
<emphasis role="bold">Example:</emphasis>
</para>
- <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.Htmllayout;
+ <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlLayout;
...
-Htmllayout mylayout = new Htmllayout();
+Htmllayout mylayout = new HtmlLayout();
...
]]></programlisting>
</section>
Modified: trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml 2009-04-10 00:14:07 UTC (rev 13482)
+++ trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml 2009-04-10 10:02:31 UTC (rev 13483)
@@ -1,20 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
-<section role="new">
+<section>
<sectioninfo>
- <keywordset>
- <keyword>layouPanel</keyword>
- <keyword>rich:layouPanel</keyword>
+ <keywordset>
+ <keyword>rich:page</keyword>
</keywordset>
- </sectioninfo>
+ </sectioninfo>
<section>
- <title>Description</title>
- <para>The <emphasis role="bold">
- <property><rich:layouPanel></property>
- </emphasis> is an auxiliary component used to create layout areas within the <emphasis role="bold"><property><rich:layout></property></emphasis> container.
- </para>
-
-
- </section>
-
-</section>
-
\ No newline at end of file
+ <title>Description</title>
+ <para>The <emphasis role="bold">
+ <property><rich:layouPanel></property>
+ </emphasis> is an auxiliary component used to create layout areas within the
+ <emphasis role="bold"><property><rich:layout></property></emphasis> container.
+ </para>
+
+ </section>
+ <section>
+ <title>Key Features</title>
+ <itemizedlist>
+
+ <listitem><para>Option to change the renderer of the component</para></listitem>
+
+ </itemizedlist>
+ </section>
+</section>
\ No newline at end of file
Modified: trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-04-10 00:14:07 UTC (rev 13482)
+++ trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-04-10 10:02:31 UTC (rev 13483)
@@ -2,8 +2,8 @@
<section>
<sectioninfo>
<keywordset>
+ <keyword>rich:layoutPanel</keyword>
<keyword>layoutPanel</keyword>
- <keyword>layoutPanel</keyword>
</keywordset>
</sectioninfo>
<table>
@@ -18,23 +18,23 @@
<tbody>
<row>
<entry>component-type</entry>
- <entry>org.richfaces.component.layoutPanel</entry>
+ <entry>org.richfaces.LayoutPanel</entry>
</row>
<row>
<entry>component-class</entry>
- <entry>org.richfaces.component.html.HtmllayoutPanel</entry>
+ <entry>org.richfaces.component.html.HtmlLayoutPanel</entry>
</row>
<row>
<entry>component-family</entry>
- <entry>org.richfaces.component.layoutPanel</entry>
+ <entry>org.richfaces.LayoutPanel</entry>
</row>
<row>
<entry>renderer-type</entry>
- <entry>org.richfaces.renderkit.html.layoutPanelRenderer</entry>
+ <entry>org.richfaces.LayoutPanelRenderer</entry>
</row>
<row>
<entry>tag-class</entry>
- <entry>org.richfaces.taglib.layoutPanelTag</entry>
+ <entry>org.richfaces.taglib.LayoutPanelTag</entry>
</row>
</tbody>
</tgroup>
@@ -73,825 +73,10 @@
</para>
<para>The <emphasis><property>"position"</property></emphasis> attribute defines the position of the <emphasis role="bold"><property><rich:layoutPanel></property></emphasis> in the area created with <emphasis role="bold"><property><rich:layout></property></emphasis> .</para>
- <para>In more detail the component is covered in the <link linkend="DofURichLayout"><emphasis role="bold"><property><rich:layout></property></emphasis></link></para>
+ <para>In more detail the component is covered in the <link linkend="DofURichLayout"><emphasis role="bold"><property><rich:layout></property></emphasis></link>.</para>
</section>
- <!-- 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>
- <row>
- <entry>beforeSubmit()</entry>
- <entry>Sets up necessary request parameters for file uploading and submits
- form to server by command button. This method should be used together
- with commands. </entry>
- </row>
-
- <row>
- <entry>clear()</entry>
- <entry>Removes all files from the list. The function can also get the <code>$('id').component.entries[i]</code> as a parameter to remove a particular file.</entry>
- </row>
-
- <row>
- <entry>disable()</entry>
- <entry>Disables the component</entry>
- </row>
-
- <row>
- <entry>enable()</entry>
- <entry>Enables the component</entry>
- </row>
-
- <row>
- <entry>remove()</entry>
- <entry>Cancels the request for uploading a file by removing this file from
- upload list and upload queue. Gets <code>$('id').component.entries[i]</code> as a parameter.</entry>
- </row>
-
- <row>
- <entry>stop()</entry>
- <entry>Stops the uploading process</entry>
- </row>
-
- <row>
- <entry>submitForm()</entry>
- <entry>Submits form to server. All added files will be put to model and
- event.</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
-
-
-
- <table id="objectProperties">
- <title>Client side object properties</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Property</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
-
- <row>
- <entry>entries</entry>
- <entry>Returns a array of all files in the list </entry>
- </row>
-
-
-
- <row>
- <entry>entries.length</entry>
- <entry>Returns the number of files in the list </entry>
- </row>
-
-
- <row>
- <entry>entries[i].fileName</entry>
- <entry>Returns the file name, that is retrieved by the array index </entry>
- </row>
-
-
-
- <row>
- <entry>entries[i].state </entry>
- <entry>Returns the file state. Possible states are <itemizedlist>
-
- <listitem>
- <para>"initialized" - the file is added,
- corresponds to layoutPanelEntry.INITIALIZED constant </para>
- </listitem>
- <listitem>
- <para>"progress" - the file is being uploaded,
- corresponds to layoutPanelEntry.UPLOAD_IN_PROGRESS
- constant</para>
- </listitem>
- <listitem>
- <para>"ready" - uploading is in process,
- corresponds to layoutPanelEntry.READY constant The file will
- be uploaded on queue order.</para>
- </listitem>
- <listitem>
- <para>"canceled" - uploading of the file is
- canceled, corresponds to layoutPanelEntry.UPLOAD_CANCELED
- constant </para>
- </listitem>
- <listitem>
- <para>"done" - the file is uploaded
- successfully, corresponds to layoutPanelEntry.UPLOAD_SUCCESS
- constant</para>
- </listitem>
- <listitem>
- <para>"transfer_error" - a file transfer error
- occurred, corresponds to
- layoutPanelEntry.UPLOAD_TRANSFER_ERROR constant </para>
- </listitem>
- <listitem>
- <para>"size_error" - the file exceeded maximum
- size, corresponds to layoutPanelEntry.UPLOAD_SIZE_ERROR
- constant</para>
- </listitem>
-
-
- </itemizedlist>
- </entry>
- </row>
-
-
-
- <row>
- <entry>entries[i].size</entry>
- <entry> Returns the size of the file. Available in flash enabled version
- only</entry>
- </row>
- <row>
- <entry>entries[i].Type</entry>
- <entry>Returns the mime type of the file. Available in flash enabled version
- only</entry>
- </row>
- <row>
- <entry>entries[i].creator </entry>
- <entry>Returns the name of the author of the file. Available in flash
- enabled version only</entry>
- </row>
- <row>
- <entry>entries[i].creationDate</entry>
- <entry>Returns the date when the file was created. Available in flash
- enabled version only</entry>
- </row>
- <row>
- <entry>entries[i].modificationDate</entry>
- <entry>Returns the date of the last file modification. Available in flash
- enabled version only</entry>
- </row>
-
-
-
-
- </tbody>
- </tgroup>
- </table>
-
-
-
-
- <table id="objectPropertiesWithAttributes">
- <title>Client side object properties available with specific <link
- linkend="layoutPanelEventAttributes"> event attributes</link></title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Property</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
-
-
-
-
- <row>
- <entry>entry.state </entry>
- <entry>Returns the file state. Possible states are <itemizedlist>
-
- <listitem>
- <para>"initialized" - the file is added,
- corresponds to layoutPanelEntry.INITIALIZED constant </para>
- </listitem>
- <listitem>
- <para>"progress" - the file is being uploaded,
- corresponds to layoutPanelEntry.UPLOAD_IN_PROGRESS
- constant</para>
- </listitem>
- <listitem>
- <para>"ready" - uploading is in process,
- corresponds to layoutPanelEntry.READY constant The file will
- be uploaded on queue order.</para>
- </listitem>
- <listitem>
- <para>"canceled" - uploading of the file is
- canceled, corresponds to layoutPanelEntry.UPLOAD_CANCELED
- constant </para>
- </listitem>
- <listitem>
- <para>"done" - the file is uploaded
- successfully, corresponds to layoutPanelEntry.UPLOAD_SUCCESS
- constant</para>
- </listitem>
- <listitem>
- <para>"transfer_error" - a file transfer error
- occurred, corresponds to
- layoutPanelEntry.UPLOAD_TRANSFER_ERROR constant </para>
- </listitem>
- <listitem>
- <para>"size_error" - the file exceeded maximum
- size, corresponds to layoutPanelEntry.UPLOAD_SIZE_ERROR
- constant</para>
- </listitem>
-
-
- </itemizedlist>
- </entry>
- </row>
-
- <row>
- <entry>entry.fileName </entry>
- <entry>Returns the file's name. This property works with all event
- handlers except for "onadd". </entry>
- </row>
-
-
-
- <row>
- <entry>entry.size</entry>
- <entry> Returns the size of the file. Available in flash enabled version
- only</entry>
- </row>
- <row>
- <entry>entry.Type</entry>
- <entry>Returns the mime type of the file. Available in flash enabled version
- only</entry>
- </row>
- <row>
- <entry>entry.creator </entry>
- <entry>Returns the name of the author of the file. Available in flash
- enabled version only</entry>
- </row>
- <row>
- <entry>entry.creationDate</entry>
- <entry>Returns the date when the file was created. Available in flash
- enabled version only</entry>
- </row>
- <row>
- <entry>entry.modificationDate</entry>
- <entry>Returns the date of the last file modification. Available in flash
- enabled version only</entry>
- </row>
-
-
-
-
- </tbody>
- </tgroup>
- </table>
-
-
-
- </section>
- <!-- End of JavaScript API-->
-
- <section>
- <title>Facets</title>
- <table>
- <title>Facets</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Facet name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>label</entry>
- <entry>Defines the information regarding the ongoing process</entry>
- </row>
- <row>
- <entry>progress</entry>
- <entry>Defines the information regarding the uploading process</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
- </section>
-
- <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><layoutPanel></property>
- </emphasis> components at once: <itemizedlist>
- <listitem>
- <para>Redefine the corresponding skin parameters</para>
- </listitem>
- <listitem>
- <para> Add to your style sheets style classes used by a <emphasis role="bold">
- <property><layoutPanel></property>
- </emphasis> component</para>
- </listitem>
- </itemizedlist>
- </para>
- </section>
-
- <section>
- <title>Skin Parameters Redefinition</title>
-
- <table>
- <title>Skin parameters redefinition for a component</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBackgroundColor</entry>
- <entry>background-color</entry>
- </row>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a font</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>generalFamilyFont</entry>
- <entry>font-family</entry>
- </row>
- <row>
- <entry>generalSizeFont</entry>
- <entry>font-size</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a toolbar</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>additionalBackgroundColor</entry>
- <entry>background-color</entry>
- </row>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-bottom-color</entry>
- </row>
- <row>
- <entry>tableBackgroundColor</entry>
- <entry>border-top-color</entry>
- </row>
- <row>
- <entry>tableBackgroundColor</entry>
- <entry>border-left-color</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for items in the list</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-bottom-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a "Cancel",
- "Clear" links</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>generalLinkColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a button</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>trimColor</entry>
- <entry>background-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a button border</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a highlighted button</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>trimColor</entry>
- <entry>background-color</entry>
- </row>
- <row>
- <entry>selectControlColor</entry>
- <entry>border-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a pressed button</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>selectControlColor</entry>
- <entry>border-color</entry>
- </row>
- <row>
- <entry>additionalBackgroundColor</entry>
- <entry>background-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for "Upload",
- "Clean" buttons</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>generalTextColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a disabled "Start" button
- icon</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a disabled "Clear" button
- icon</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- </section>
-
- <section>
- <title>Definition of Custom Style Classes</title>
-
- <para>The following picture illustrates how CSS classes define styles for component
- elements.</para>
- <figure>
- <title>Classes names</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/layoutPanel_cn.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <figure>
- <title>Classes names</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/layoutPanel_cn2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <table id="layoutPanelCN">
- <title>Classes names that define a component representation</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-layoutPanel-list-decor</entry>
- <entry>Defines styles for a wrapper <div> element of a
- layoutPanel</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-font</entry>
- <entry>Defines styles for a font of buttons and items</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-toolbar-decor</entry>
- <entry>Defines styles for a toolbar</entry>
- </row>
- <row>
- <entry> rich-layoutPanel-list-overflow</entry>
- <entry>Defines styles for a list of files</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
-
- <table>
- <title>Classes names that define buttons representation</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-layoutPanel-button</entry>
- <entry>Defines styles for a buttons</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-button-border</entry>
- <entry>Defines styles for a border of buttons</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-button-light</entry>
- <entry>Defines styles for a highlight of button</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-button-press</entry>
- <entry>Defines styles for a pressed button</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-button-dis</entry>
- <entry>Defines styles for a disabled button</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-button-selection</entry>
- <entry>Defines styles for "Upload",
- "Clean" buttons</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Classes names that define the representation of the buttons' icons</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-layoutPanel-ico</entry>
- <entry>Defines styles for an icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-add</entry>
- <entry>Defines styles for a "Add" button icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-start</entry>
- <entry>Defines styles for a "Upload" button icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-stop</entry>
- <entry>Defines styles for a "Stop" button icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-clear</entry>
- <entry>Defines styles for a "Clear" button icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-add-dis</entry>
- <entry>Defines styles for a disabled "Add" button
- icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-start-dis</entry>
- <entry>Defines styles for a disabled "Upload" button
- icon</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-ico-clear-dis</entry>
- <entry>Defines styles for a disabled "Clear" button
- icon</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Classes names that define list items representation</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-layoutPanel-table-td</entry>
- <entry>Defines styles for a wrapper <td> element of a list
- items</entry>
- </row>
- <row>
- <entry>rich-layoutPanel-anc</entry>
- <entry>Defines styles for "Cancel",
- "Stop", "Clear" links</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
-
- <para>In order to redefine styles for all <emphasis role="bold">
- <property><layoutPanel></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="layoutPanelCN"> above</link>) and define necessary properties in them. </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="CSS"><![CDATA[...
-.rich-layoutPanel-anc{
- font-weight:bold;
- text-decoration:none;
-}
-...]]></programlisting>
-
- <para>This is the result:</para>
-
- <figure>
- <title>Redefinition styles with predefined classes</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/layoutPanel_pc.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>In the example above the font weight and text decoration for
- "Cancel" and "Clear" links are changed.</para>
-
- <para> Also it's possible to change styles of particular <emphasis role="bold">
- <property><layoutPanel></property>
- </emphasis> component. In this case you should create own style classes and use them in
- the corresponding <emphasis role="bold">
- <property><layoutPanel></property>
- </emphasis>
- <emphasis>
- <property>styleClass</property>
- </emphasis> attributes. An example is placed below: </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="CSS"><![CDATA[...
-.myClass{
- font-weight:bold;
-}
-...]]></programlisting>
- <para> The <emphasis>
- <property>"addButtonClass"</property>
- </emphasis> attribute for <emphasis role="bold">
- <property><layoutPanel></property>
- </emphasis> is defined as it's shown in the example below: </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[<layoutPanel ... addButtonClass="myClass"/>
-]]></programlisting>
-
- <para>This is the result:</para>
- <figure>
- <title>Redefinition styles with own classes and <emphasis>
- <property>styleClass</property>
- </emphasis> attributes</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/layoutPanel_oc.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>As it could be seen on the picture above, the font style for "Add"
- button is changed.</para>
-
- </section>
-
- <section>
<title>Relevant Resources Links</title>
<para><ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/layoutPanel.jsf?c=layoutPanel"
More information about the richfaces-svn-commits
mailing list