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>&lt;rich:layout&gt;</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>&lt;rich:layout&gt;</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>&lt;rich:layouPanel&gt;</property> - </emphasis> is an auxiliary component used to create layout areas within the <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> container. - </para> - - - </section> - -</section> - \ No newline at end of file + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:layouPanel&gt;</property> + </emphasis> is an auxiliary component used to create layout areas within the + <emphasis role="bold"><property>&lt;rich:layout&gt;</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>&quot;position&quot;</property></emphasis> attribute defines the position of the <emphasis role="bold"><property>&lt;rich:layoutPanel&gt;</property></emphasis> in the area created with <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> .</para> - <para>In more detail the component is covered in the <link linkend="DofURichLayout"><emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis></link></para> + <para>In more detail the component is covered in the <link linkend="DofURichLayout"><emphasis role="bold"><property>&lt;rich:layout&gt;</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>$(&apos;id&apos;).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>$(&apos;id&apos;).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>&quot;initialized&quot; - the file is added, - corresponds to layoutPanelEntry.INITIALIZED constant </para> - </listitem> - <listitem> - <para>&quot;progress&quot; - the file is being uploaded, - corresponds to layoutPanelEntry.UPLOAD_IN_PROGRESS - constant</para> - </listitem> - <listitem> - <para>&quot;ready&quot; - uploading is in process, - corresponds to layoutPanelEntry.READY constant The file will - be uploaded on queue order.</para> - </listitem> - <listitem> - <para>&quot;canceled&quot; - uploading of the file is - canceled, corresponds to layoutPanelEntry.UPLOAD_CANCELED - constant </para> - </listitem> - <listitem> - <para>&quot;done&quot; - the file is uploaded - successfully, corresponds to layoutPanelEntry.UPLOAD_SUCCESS - constant</para> - </listitem> - <listitem> - <para>&quot;transfer_error&quot; - a file transfer error - occurred, corresponds to - layoutPanelEntry.UPLOAD_TRANSFER_ERROR constant </para> - </listitem> - <listitem> - <para>&quot;size_error&quot; - 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>&quot;initialized&quot; - the file is added, - corresponds to layoutPanelEntry.INITIALIZED constant </para> - </listitem> - <listitem> - <para>&quot;progress&quot; - the file is being uploaded, - corresponds to layoutPanelEntry.UPLOAD_IN_PROGRESS - constant</para> - </listitem> - <listitem> - <para>&quot;ready&quot; - uploading is in process, - corresponds to layoutPanelEntry.READY constant The file will - be uploaded on queue order.</para> - </listitem> - <listitem> - <para>&quot;canceled&quot; - uploading of the file is - canceled, corresponds to layoutPanelEntry.UPLOAD_CANCELED - constant </para> - </listitem> - <listitem> - <para>&quot;done&quot; - the file is uploaded - successfully, corresponds to layoutPanelEntry.UPLOAD_SUCCESS - constant</para> - </listitem> - <listitem> - <para>&quot;transfer_error&quot; - a file transfer error - occurred, corresponds to - layoutPanelEntry.UPLOAD_TRANSFER_ERROR constant </para> - </listitem> - <listitem> - <para>&quot;size_error&quot; - 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&apos;s name. This property works with all event - handlers except for &quot;onadd&quot;. </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>&lt;layoutPanel&gt;</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>&lt;layoutPanel&gt;</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 &quot;Cancel&quot;, - &quot;Clear&quot; 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 &quot;Upload&quot;, - &quot;Clean&quot; 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 &quot;Start&quot; 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 &quot;Clear&quot; 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 &lt;div&gt; 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 &quot;Upload&quot;, - &quot;Clean&quot; 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 &quot;Add&quot; button icon</entry> - </row> - <row> - <entry>rich-layoutPanel-ico-start</entry> - <entry>Defines styles for a &quot;Upload&quot; button icon</entry> - </row> - <row> - <entry>rich-layoutPanel-ico-stop</entry> - <entry>Defines styles for a &quot;Stop&quot; button icon</entry> - </row> - <row> - <entry>rich-layoutPanel-ico-clear</entry> - <entry>Defines styles for a &quot;Clear&quot; button icon</entry> - </row> - <row> - <entry>rich-layoutPanel-ico-add-dis</entry> - <entry>Defines styles for a disabled &quot;Add&quot; button - icon</entry> - </row> - <row> - <entry>rich-layoutPanel-ico-start-dis</entry> - <entry>Defines styles for a disabled &quot;Upload&quot; button - icon</entry> - </row> - <row> - <entry>rich-layoutPanel-ico-clear-dis</entry> - <entry>Defines styles for a disabled &quot;Clear&quot; 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 &lt;td&gt; element of a list - items</entry> - </row> - <row> - <entry>rich-layoutPanel-anc</entry> - <entry>Defines styles for &quot;Cancel&quot;, - &quot;Stop&quot;, &quot;Clear&quot; links</entry> - </row> - </tbody> - </tgroup> - </table> - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;layoutPanel&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="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 - &quot;Cancel&quot; and &quot;Clear&quot; links are changed.</para> - - <para> Also it&apos;s possible to change styles of particular <emphasis role="bold"> - <property>&lt;layoutPanel&gt;</property> - </emphasis> component. In this case you should create own style classes and use them in - the corresponding <emphasis role="bold"> - <property>&lt;layoutPanel&gt;</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>&quot;addButtonClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;layoutPanel&gt;</property> - </emphasis> is defined as it&apos;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 &quot;Add&quot; - button is changed.</para> - - </section> - - <section> <title>Relevant Resources Links</title> <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layoutPanel...