JBoss.orgCommunity Documentation
The <rich:page> component is used to create structured layouts containing header, bottom, center and left or right layout areas as well as to define the content of the <head/> element, declare DOCTYPE etc.
Option to change the renderer of the component
Possibility to define parameters of an HTML page
Table 6.339. 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.340. 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 |
To create the simplest variant on a page use the following syntax:
Example:
...
<rich:layout>
<rich:layoutPanel position="center">
<!--center-->
</rich:layoutPanel>
</rich:layout>
...
Example:
import org.richfaces.component.html.HtmllayoutPanel;
...
HtmllayoutPanel mylayoutPanel = new HtmllayoutPanel();
...
The <rich:page> component together with the <rich:laout> 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 "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"
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>
...
The implementation of the <rich:page> component provides three 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 a "sidebar" facet can be set with the "sidebarPosition" attribute that can take either "right" or "left" values, you can also specify 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 template defines the way the <rich:page> is rendered. Standard renderer(default) of the <rich:page>
Table 6.341. 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 |
Table 6.342. 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 |