<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>layoutPanel</keyword>
            <keyword>layoutPanel</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.component.layoutPanel</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmllayoutPanel</entry>
                </row>
                <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.component.layoutPanel</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.renderkit.html.layoutPanelRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                    <entry>org.richfaces.taglib.layoutPanelTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>
    <section>
        <title>Creating the Component with a Page Tag</title>
        <para>To create the simplest variant on a page use the following syntax:</para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:layout>
 <rich:layoutPanel position="center">
        <!--center-->
</rich:layoutPanel>     
</rich:layout>
...]]></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.HtmllayoutPanel;
...
HtmllayoutPanel mylayoutPanel = new HtmllayoutPanel();
...]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>
        <para>The <emphasis role="bold">
                <property>&lt;layoutPanel&gt;</property>
        </emphasis> component is  used to split the area inside the <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> into  up to 5 parts: top, left, center, right, bottom.
            
        </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>
        
    </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.jsf?c=layoutPanel"
                >Here</ulink> you can see an example of <emphasis role="bold">
                <property>&lt;layoutPanel&gt;</property>
            </emphasis> usage and sources for the given example. </para>
    </section>

</section>
