6.76.  < rich:spacer >

6.76.1. Description

A spacer that is used in layout and rendered as a transparent image.

<rich:spacer> component

Figure 6.215.  <rich:spacer> component


6.76.2. Key Features

  • Easily used as a transparent layout spacer

  • Horizontal or vertical spacing is managed by an attribute

  • Easily customizable sizes parameters

Table 6.423. rich : spacer attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
heightThe height of the spacer defined in pixels. The default value is 1 pixel
idEvery component may have a unique id that is automatically created if omitted
onclickHTML: a script expression; a pointer button is clicked
ondblclickHTML: a script expression; a pointer button is double-clicked
onkeydownHTML: a script expression; a key is pressed down
onkeypressHTML: a script expression; a key is pressed and released
onkeyupHTML: a script expression; a key is released
onmousedownHTML: script expression; a pointer button is pressed down
onmousemoveHTML: a script expression; a pointer is moved within
onmouseoutHTML: a script expression; a pointer is moved away
onmouseoverHTML: a script expression; a pointer is moved onto
onmouseupHTML: script expression; a pointer button is released
renderedIf "false", this component is not rendered
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute
titleHTML: An advisory title for this element. Often used by the user agent as a tooltip
widthThe width of the spacer defined in pixels. The default value is 1 pixel

Table 6.424. Component identification parameters

NameValue
component-typeorg.richfaces.spacer
component-classorg.richfaces.component.html.HtmlSpacer
component-familyorg.richfaces.spacer
renderer-typeorg.richfaces.SpacerRenderer
tag-classorg.richfaces.taglib.SpacerTag

6.76.3. Creating the Component with a Page Tag

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

Example:


...
    <rich:spacer/>
...

6.76.4. Creating the Component Dynamically Using Java

Example:


import org.richfaces.component.html.HtmlSpacer;
...
HtmlSpacer mySpacer = new HtmlSpacer();
...

6.76.5. Details of Usage

<rich:spacer> is a simple layout component which represents a transparent spacer. Thus, the main attributes that define its style are "style" and "styleClass".

In addition, the attributes are responsible for the component size: "width" and "height".

Moreover, to add e.g. some JavaScript effects, events defined on it are used.

  • onmouseover

  • onclick

  • onmouseout

  • etc.

6.76.6. Look-and-Feel Customization

On the component generation, the framework presents a default rich-spacer class in styleClass of a generated component, i.e. in order to redefine appearance of all spacers at once, it's necessary to redefine this class in your own CSS (replacing in the result properties defined in a skin with your own).

To define appearance of the particular spacer, it's possible to write your own CSS classes and properties in the component style attributes ( "style", "styleClass" ) modifying component property.

6.76.7. Relevant Resources Links

Here you can see the example of <rich:spacer> usage and sources for the given example.