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

expand all

#### 6.10.2.1. Description

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

Figure 6.117. <rich:paint2D> component

#### 6.10.2.2. Key Features

- Simple Graphics2D - painting style directly on the Web page

- Supports client/server caching for generated images

- Fully supports "JPEG" (24-bit, default), "GIF" (8-bit with transparency), and "PNG" (32-bit with transparency) formats for sending generated images

- Easily customizable borders and white space to wrap the image

- Dynamically settable paint parameters using tag attributes

Table 6.191. rich : paint2D attributes

Attribute Name | Description
--- | ---
align | Deprecated. 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".
alt | HTML: For compability with XHTML 1.1 standart
bgcolor | Background 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
border | HTML: 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
cacheable | Supported (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
data | Value 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
format | format 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)
height | Height in pixels of image (for paint canvas and HTML attribute). Default value is "10".
hspace | Deprecated. 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
lang | HTML: Code describing the language used in the generated markup for this component
paint | The 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
style | HTML: 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.
title | HTML: Advisory title information about markup elements generated for this component
value | JSF: The current value of this component
vspace | Deprecated. 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
width | HTML: Width in pixels of image (for paint canvas and HTML attribute). Default value is "10".

Table 6.192. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.Paint2D
component-class | org.richfaces.component.html.HtmlPaint2D
component-family | javax.faces.Output
renderer-type | org.richfaces.Paint2DRenderer
tag-class | org.richfaces.taglib.Paint2DTag

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

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

Example:

    ...

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

#### 6.10.2.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlPaint2D;

    ...

    HtmlPaint2D myImage = new HtmlPaint2D();

    ...

#### 6.10.2.5. Details of Usage

The example shows two main attributes of the component:

- "paint"

  Specify a method receiving an object specified in data as a parameter and sending graphical information into the stream

- "data"

  Specifies a bean class keeping your data for rendering

## Note:

Data object should implement serializable interface

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.

Example:

    paintBean.java:

    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

    }

    dataBean.java:

    public class PaintData implements Serializable{

            private static final long serialVersionUID = 1L;

            Integer Width=100;

            Integer Height=50;

           ...

    }

    page.xhtml:

    ...

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

    ...

#### 6.10.2.6. Look-and-Feel Customization

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.

#### 6.10.2.7. Relevant Resources Links

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

- Prev6.10.1. < rich:modalPanel > ...
- Top of page
- Front page
- Next6.10.3. < rich:panel > ...