Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.13.1.  < rich:page > available since 3.3.1

Table 6.554. rich : page attributes

Attribute Name Description
binding JSF: The attribute takes a value-binding expression for a component property of a backing bean
bodyClassAssigns one or more space-separated CSS class names to the body part of the page
contentTypeSet custom mime content type to response
dirHTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
footerClassAssigns one or more space-separated CSS class names to the component footer
headerClassAssigns one or more space-separated CSS class names to the component header
id JSF: Every component may have a unique id that is automatically created if omitted
langHTML: Code describing the language used in the generated markup for this component
markupTypePage layout format ( html, xhtml, html-transitional, html-3.2 ) for encoding DOCTYPE, namespace and Content-Type definitions
namespaceSet html element default namespace
oncontextmenuThe client-side script method to be called when the right mouse button is clicked over the component
onloadThe client-side script method to be called before a page is loaded
onunloadThe client-side script method to be called when a page is unloaded
pageTitleString for output as a page title.
rendered JSF: If "false", this component is not rendered
sidebarClassAssigns one or more space-separated CSS class names to the component side panel
sidebarPositionDefines the position of the side panel. Possible values are "left", "right". Default value is "left".
sidebarWidthDefines width for the side panel. Default value is "160".
styleHTML: CSS style rules to be applied to the component
styleClass JSF: Assigns one or more CSS class names to the component. Corresponds to the HTML "class" attribute.
themeSpecifies the way of the component rendering
titleHTML: Advisory title information about markup elements generated for this component
widthHTML: Sets the width of the page

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:

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.


<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>
    <!-- page content -->

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.


<rich:page sidebarPosition="left" sidebarWidth="300">
    <f:facet name="header">
        <!-- header  content -->
    <f:facet name="sidebar">
        <!-- side panel content -->
    <!-- body content -->
    <f:facet name="footer">
        <!-- footer  content -->

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.

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 Wiki