### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 6.68. < rich:page >

### 6.68.1. Description

The <rich:page> component is used to create basic (X)HTML markup and define document parameters like DOCTYPE, title etc. The component also allows to build top level layout: header, bottom, center and left or right layout areas.

### 6.68.2. Key Features

- Option to change the renderer of the component (themes support)

- Possibility to define parameters of an HTML page

- Possibility to create page layout with facets

- Provides styling based on RichFaces skinnability

Table 6.338. rich : page attributes

Attribute Name | Description
--- | ---
binding | The attribute takes a value-binding expression for a component property of a backing bean
bodyClass | A name of CSS class for the body part of the page
contentType | Set custom mime content type to response
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
footerClass | A name of CSS class for the footer
headerClass | A name of CSS class for the header
id | Every component may have a unique id that is automatically created if omitted
lang | Code describing the language used in the generated markup for this component
markupType | Page layout format ( html, xhtml, html-transitional, html-3.2 ) for encoding DOCTYPE, namespace and Content-Type definitions
namespace | Set html element default namespace
onload | JavaScript code to execute on a page load.
onunload | JavaScript code to execute on a page unload.
pageTitle | String for output as a page title.
rendered | If "false", this component is not rendered
sidebarClass | A name of CSS class for the side panel
sidebarPosition | Defines the position of the side panel. Possible values are "left", "right". Default value is "left".
sidebarWidth | Defines width for the side panel. Default value is "160".
style | CSS style(s) is/are to be applied when this component is rendered
styleClass | Corresponds to the HTML class attribute
theme | Specifies the way of the component rendering
title | Advisory title information about markup elements generated for this component
width | Sets the width of the page

Table 6.339. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.component.html.HtmlPage
component-class | org.richfaces.component.html.HtmlPage
component-family | org.richfaces.Page
renderer-type | org.richfaces.PageRenderer
tag-class | org.richfaces.taglib.PageTag

### 6.68.3. Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...

    <rich:page>

      <!-- page body -->

    </rich:page>

    ...

### 6.68.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlPage;

    ...

    HtmlPage myHtmlPage = new HtmlPage();

    ...

### 6.68.5. Details of Usage

The <rich:page> component together with the <rich:layout> component provides a full-fledged mechanism for markup creation.

First of all, to declare the document type of the page you should use the "markupType" attribute which has the following values:

- "html"

- "html-transitional"

- "xhtml"

- "xhtml-transitional"

- "html-frameset"

- "html-3.2"

The default value is "html".

The "contentType" allows to specify the type of the content and encoding for the page.

The title of the page can be set with the "pageTile" attribute. To place some other page parameters (like meta information, links to CSS style sheets etc.) in the <head> element of an HTML page use "pageHeader" facet.

Example:

    ...

    <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>

    ...

The implementation of the <rich:page> component provides four facets that you can use to arrange the layout of the page: "header", "subheader", "sidebar" and "footer". Their behavior is quite self-explanatory.

The position of the panel rendered by the "sidebar" facet can be set with the "sidebarPosition" attribute that can take either "right" or "left" as values, you can also specify the width for this facet with the "sidebarWidth" attribute.

Example:

    ...

    <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>

    ...

The <rich:page> 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.

Several templates are available for the <rich:page> component. A template can be activated with the "theme" attribute.

The theme defines the way the <rich:page> is rendered. Default renderer(default theme) of the <rich:page> has no mappings to skin parameters and just provides CSS classes for the page part. However, the simple theme, which is an extension of the default theme, has mappings to skin parameters and adds the RichFaces skinning for the page elements.

As a whole, RichFaces provides 4 themes for the <rich:page> component out-of-the-box: "simple", "violetRays", "oldschool", "smooth". The Creating a Theme for <rich:page> article tells how you can create your custom theme for the <rich:page> component.

### 6.68.6. Facets

Table 6.340. Facets

Facet Name | Description
--- | ---
pageHeader | Creates the <head/> part of the HTML page
header | Creates a header
subheader | Creates a horizontal panel under the header
footer | Creates a footer
sidebar | Creates a left/right panel

### 6.68.7. Skin Parameters for the "simple" theme

Table 6.341. Skin parameters for the <body/> HTML element

Skin parameters | CSS properties
--- | ---
generalFamilyFont | font-family

Table 6.342. Skin parameters for the whole page

Skin parameters | CSS properties
--- | ---
generalSizeFont | font-size

Table 6.343. Skin parameters for the header

Skin parameters | CSS properties
--- | ---
generalSizeFont | border-bottom-color
headerGradientColor | background-color
trimColor | color
headerFamilyFont | font-family
headerTextColor | color
headerSizeFont | font-size

Table 6.344. Skin parameters for the content area of the page

Skin parameters | CSS properties
--- | ---
generalBackgroundColor | background-color
panelBorderColor | border-top-color
trimColor | color
generalFamilyFont | font-family
generalTextColor | color
generalSizeFont | font-size

Table 6.345. Skin parameters for the footer

Skin parameters | CSS properties
--- | ---
generalBackgroundColor | border-top-color
panelBorderColor | background-color
generalFamilyFont | font-family
generalTextColor | color
generalSizeFont | font-size

Table 6.346. Skin parameters for the side panel

Skin parameters | CSS properties
--- | ---
generalFamilyFont | font-family
generalTextColor | color
generalSizeFont | font-size

Table 6.347. Skin parameters for h1,h2,h3 HTML tags

Skin parameters | CSS properties
--- | ---
headerFamilyFont | font-family
headTextColor | color

Table 6.348. Skin parameters for p,ul,ol HTML tags

Skin parameters | CSS properties
--- | ---
generalFamilyFont | font-family
controlTextColor | color

Table 6.349. Skin parameters for the hovered link

Skin parameters | CSS properties
--- | ---
hoverLinkColor | color

Table 6.350. Skin parameters for the visited link

Skin parameters | CSS properties
--- | ---
visitedLinkColor | color

### 6.68.8. Component CSS Selectors

Table 6.351. CSS Selectors that define the representation of the component's blocks

CSS Selector | Description
--- | ---
.rich-page | Defines styles for the whole page
.rich-page-header | Defines styles for the header
.rich-page-subheader | Defines styles for the block under the header
.rich-page-sidebar | Defines styles for the sidebar
.rich-page-body | Defines styles for the body part of the page
.rich-page-footer | Defines styles for the footer

### 6.68.9. Relevant Resources Links

On the component Live Demo page you can see the example of <rich:page> component usage and sources for the given example.

The Layout components for RichFaces 3.3.1 on the JBoss.org Wiki

- Prev6.67. < rich:layoutPanel >
- Top of page
- Front page
- Next6.69. < rich:layout >