<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:page</keyword>
            <keyword>page</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.html.HtmlPage</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlPage</entry>
                </row>
                <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.Page</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.PageRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                    <entry>org.richfaces.taglib.PageTag</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:page> 
  <!-- page body -->
</rich:page>
...]]></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.HtmlPage;
...
HtmlPage myHtmlPage = new HtmlPage();
...]]></programlisting>
    </section>
    <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:layout&gt;</property></emphasis> component  provides
            a full-fledged mechanism for markup creation. </para>
        
        
        <para>
            
          First of all, 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: 
        </para> 
            
            <itemizedlist>
                <listitem><para>&quot;html&quot;</para></listitem>
                <listitem><para>&quot;html-transitional&quot;</para></listitem>
                <listitem><para>&quot;xhtml&quot;</para></listitem>
                <listitem><para>&quot;xhtml-transitional&quot;</para></listitem>
                <listitem><para>&quot;html-frameset&quot;</para></listitem>
                <listitem><para>&quot;html-3.2&quot;</para></listitem>

            </itemizedlist>
        <para>The default value is &quot;html&quot;.</para>
            <para>
            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; element 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">
	<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:page&gt;</property></emphasis> component provides four facets that you can use to arrange the layout of the page: &quot;header&quot;, &quot;subheader&quot;,  &quot;sidebar&quot;  and &quot;footer&quot;. Their behavior is quite self-explanatory. </para>
        <para>The position of the panel rendered by the &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; as values, you can also specify the width for this facet with  the <emphasis><property>&quot;sidebarWidth&quot;</property></emphasis> 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>The theme defines the way the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> is rendered. Default renderer(default theme) of the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> has no mappings to skin parameters and just provides CSS classes for the page part. However, the <property>simple</property> theme, which is an extension of the default theme, has mappings to skin parameters and adds the RichFaces skinning for the page elements. </para>
        
        <para>As a whole, RichFaces provides 4 themes for the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component out-of-the-box: &quot;simple&quot;, &quot;violetRays&quot;, &quot;oldschool&quot;, &quot;smooth&quot;. The <ulink url="http://www.jboss.org/community/docs/DOC-13635">Creating a Theme for &lt;rich:page&gt;</ulink> article tells how you can create your custom theme for the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component. </para>
        
    </section>
    
    <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>pageHeader</entry>
                        <entry>Creates the &lt;head/&gt; part of the HTML page</entry>
                    </row>
                    <row>
                        <entry>header</entry>
                        <entry>Creates a header</entry>
                    </row>
                    
                    <row>
                        <entry>subheader</entry>
                        <entry>Creates a horizontal panel under the header</entry>
                    </row>
                    <row>
                        <entry>footer</entry>
                        <entry>Creates a footer</entry>
                    </row> 
                    
                    <row>
                        <entry>sidebar</entry>
                        <entry>Creates a left/right panel</entry>
                    </row> 
                    
                </tbody>
            </tgroup>
        </table>
    </section>
    
    <section>
        <title>Skin Parameters for the &quot;simple&quot; theme</title>
        <table>
            <title>Skin parameters  for the &lt;body/&gt; HTML element</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>
                    
                </tbody>
            </tgroup>
        </table>
        
        
        
        <table>
            <title>Skin parameters  for the whole page</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        
        <table>
            <title>Skin parameters  for the header</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalSizeFont </entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    
                    <row>
                        <entry>headerGradientColor</entry>
                        <entry>background-color</entry>
                    </row>
                    
                    <row>
                        <entry>trimColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    
                    <row>
                        <entry>headerTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</entry>
                    </row>

                </tbody>
            </tgroup>
        </table>
        
        
        <table>
            <title>Skin parameters  for the content area of the page</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    
                    <row>
                        <entry>trimColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        
        <table>
            <title>Skin parameters  for the footer</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalBackgroundColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>background-color</entry>
                    </row>
                    
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        
        
        <table>
            <title>Skin parameters  for the side panel</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>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        
        <table>
            <title>Skin parameters  for h1,h2,h3 HTML tags</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    
                    <row>
                        <entry>headTextColor</entry>
                        <entry>color</entry>
                    </row>
                      
                </tbody>
            </tgroup>
        </table>
        
        
        
        <table>
            <title>Skin parameters  for p,ul,ol HTML tags</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>controlTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        
        
        <table>
            <title>Skin parameters  for the hovered link</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>hoverLinkColor</entry>
                        <entry>color</entry>
                    </row>
                    
                                   
                </tbody>
            </tgroup>
        </table>
        
        
        
        <table>
            <title>Skin parameters  for the visited link</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>visitedLinkColor</entry>
                        <entry>color</entry>
                    </row>
                    
                    
                </tbody>
            </tgroup>
        </table>
        
      
    </section>
    
    
    <section>
        <title>Component CSS Selectors</title>
        
        <table id="RichpageSelectors">
            <title>CSS Selectors that define the representation of the component's blocks</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>CSS Selector</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                   
                   
                    <row>
                        <entry>.rich-page</entry>
                        <entry>Defines styles for the whole page</entry>
                    </row> 
                    
                    
                    <row>
                        <entry>.rich-page-header</entry>
                        <entry>Defines styles for the header</entry>
                    </row>
                    
                    <row>
                        <entry>.rich-page-subheader</entry>
                        <entry>Defines styles for the block under the header</entry>
                    </row>
                    
                    <row>
                        <entry>.rich-page-sidebar</entry>
                        <entry>Defines styles for the sidebar</entry>
                    </row> 
                    
                    <row>
                      <entry>.rich-page-body</entry>
                        <entry>Defines styles for the body part of the page</entry>
                    </row> 
                    
                    <row>
                        <entry>.rich-page-footer</entry>
                        <entry>Defines styles for the footer</entry>
                    </row> 
                    
                    
                </tbody>
            </tgroup>
        </table>    
  
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para>
            <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf"
                >On the component Live Demo page</ulink> you can see the example of <emphasis role="bold">
                    <property>&lt;rich:page&gt;</property>
                </emphasis> component usage and sources for the given example. </para>
        <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on  the JBoss.org Wiki</para>
    </section>
</section>