
    <section>
        <title>Details of Usage</title>
        <para>The <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis>
            
            component together with the <emphasis role="bold"><property>&lt;rich:laout&gt;</property></emphasis> component  provide
            a full-fledged mechanism for markup creation. </para>
        
        
        <para>
            
            In the first place, to declare the document type of the page you should use the  <emphasis><property>&quot;markupType&quot;</property></emphasis> attribute which has the following values:   &quot;html&quot;, &quot;xhtml&quot;, &quot;html-transitional&quot;, &quot;html-3.2&quot;.
            The <emphasis><property>&quot;contentType&quot;</property></emphasis> allows to specify the type of the content and encoding for the page. 
        </para>
          
          <para>
              The title of the page can be set with the <emphasis><property>&quot;pageTile&quot;</property></emphasis> attribute. 
              To place some other page parameters (like meta information, links to CSS style sheets etc.) in the &lt;head&gt; part of an HTML page use &quot;pageHeader&quot; facet. 
             
          </para>
<para>
    <emphasis role="bold">Example:</emphasis>
</para>
        
<programlisting role="XML"><![CDATA[...
<rich:page pageTitle="The title of the page" markupType="xhtml" contentType="text/html; charset=utf-8" > 
  <f:facet name="pageHeader" >
  <meta content="The rich:page component" name="keywords" />
  <link rel="shortcut icon" href="/images/favicon.ico"/>
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="/js/menu.js"></script>
  </f:facet>
       <!-- page content -->
</rich:page>
...]]></programlisting> 
        
        <para>The implementation of the <emphasis role="bold"><property>&lt;rich:&gt;</property></emphasis> component provides three facets that you can use to arrange the layout of the page: &quot;header&quot;, &quot;sidebar&quot;  and &quot;footer&quot; .</para>
        <para>The position of the panel rendered by a &quot;sidebar&quot; facet can be set with the <emphasis><property>&quot;sidebarPosition&quot;</property></emphasis> attribute that can take either &quot;right&quot; or &quot;left&quot; values, you can also specify width for this facet with  the &quot;sidebarWidth&quot; attribute. </para>
       <para>
           <emphasis role="bold">Example:</emphasis>
       </para>
        
        
        
        <programlisting role="XML"><![CDATA[...
<rich:page sidebarPosition="left" sidebarWidth="300">
         <f:facet name="header" >
         <!-- header  content -->
            </f:facet>
    <f:facet name="sidebar">
 <!-- side panel content -->
         </f:facet>
   <!-- body content -->
    <f:facet name="footer">
            <!-- footer  content -->
         </f:facet>   
     </rich:page>

...]]></programlisting> 
        
        
        <para>The <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component also provides attributes  to define CSS classes for each nested facet as well as a body part of the page created with the component.</para>
        
        
        <para>Several templates are available for the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component. A template can be activated with the <emphasis><property>&quot;theme&quot;</property></emphasis> attribute.</para>
        <para></para>
        
    </section>
