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.10.2.  < rich:paint2D > available since 3.0.0

Create image by painting from a managed bean method, same as "paint" (Graphics2D) in "SWING" components.

Table 6.214. rich : paint2D attributes

Attribute Name Description
alignDeprecated. This attribute specifies the position of an IMG, OBJECT, or APPLET with respect to its context. The possible values are "bottom", "middle", "top", "left" and "right". The default value is "middle".
altHTML: For compability with XHTML 1.1 standart
bgcolorBackground color of painted image. Default value is 'transparent' which means no background fill. Hex colors can be used, as well as common color names. Invalid values are treated as transparent. Note, that JPEG format doesn't support transparency, and transparent background is painted black. Also note, that several browsers (e.g. IE6) do not support PNG transparency. Default value is "transparent"
binding JSF: The attribute takes a value-binding expression for a component property of a backing bean
borderHTML: Deprecated. This attribute specifies the width of an IMG or OBJECT border, in pixels. The default value for this attribute depends on the user agent
cacheableSupported (or not) client/server caching for generated images. Caching on client supported by properly sending and processing of HTTP headers (Last-Modified, Expires, If-Modified-Since, etc.) Server-side caching is supported by application-scope object cache. For build of cache key use "value" attribute, serialized to URI
dataValue calculated at render time and stored in Image URI (as part of cache Key), at paint time passed to a paint method. It can be used for updating cache at change of image generating conditions, and for creating paint beans as "Lightweight" pattern components (request scope). IMPORTANT: Since serialized data stored in URI, avoid using big objects
formatformat Name of format for sending a generated image. It currently supports "jpeg" (24 bit, default), "gif" (8 bit with transparency), "png" (32 bit with transparency)
heightHeight in pixels of image (for paint canvas and HTML attribute). Default value is "10".
hspaceDeprecated. This attribute specifies the amount of white space to be inserted to the left and right of an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length
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
paintThe method calls expression to paint Image on prepared Buffered image. It must have two parameters with a type of java.awt.Graphics2D (graphics to paint) and Object (restored from URI "data" property). For painting used 32-bit RGBA color model (for 8-bit images used Diffusion filtration before sending)
rendered JSF: If "false", this component is not rendered
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.
titleHTML: Advisory title information about markup elements generated for this component
value JSF: The current value of this component
vspaceDeprecated. This attribute specifies the amount of white space to be inserted above and below an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length
widthHTML: Width in pixels of image (for paint canvas and HTML attribute). Default value is "10".

Table 6.215. Component identification parameters


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


<rich:paint2D paint="#{paint2D.paint}" data="#{paint2DModel}"/>

Here "paint" specifies the method performing drawing and "data" specifies Managed Bean property keeping the data used by the method.


import org.richfaces.component.html.HtmlPaint2D;

HtmlPaint2D myImage = new HtmlPaint2D();

The example shows two main attributes of the component:

The "format" attribute of the component defines a format of visual data passing to the server.

Generated data can be used as a cacheable or non-cacheable resource. It's defined with "cacheable" attribute. If cache support is turned on, a key is created in URI with a mix of size (width/height), "paint" method, "format" and "data" attributes.


public void paint(Graphics2D g2, Object obj) {
        // code that gets data from the data Bean (PaintData)
       PaintData data = (PaintData) obj;
        // a code drawing a rectangle
        g2.drawRect(0, 0, data.Width, data.Height);
        // some more code placing graphical data into g2 stream below
public class PaintData implements Serializable{
        private static final long serialVersionUID = 1L;
        Integer Width=100;
        Integer Height=50;
<rich:paint2D paint="#{paint2D.paint}" data="#{}"/>

Paint2D has no skin parameters and special style classes, as it consists of one element generated with a your method on the server.

To define some style properties such as an indent or a border, it's possible to use "style" and "styleClass" attributes on the component.

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