6.64.  < rich:paint2D >

6.64.1. Description

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

<rich:paint2D> component

Figure 6.162.  <rich:paint2D> component


6.64.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.326. rich : paint2D attributes

Attribute NameDescription
alignbottom|middle|top|left|right Deprecated. This attribute specifies the position of an IMG, OBJECT, or APPLET with respect to its context. The following values for align concern the object's position with respect to surrounding text: * bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value. * middle: means that the center of the object should be vertically aligned with the current baseline. * top: means that the top of the object should be vertically aligned with the top of the current text line
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
bindingThe attribute takes a value-binding expression for a component property of a backing bean
borderDeprecated. 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)
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
idEvery component may have a unique id that is automatically created if omitted
langCode 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)
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
titleAdvisory title information about markup elements generated for this component
valueThe 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
widthWidth in pixels of image (for paint canvas and HTML attribute)

Table 6.327. Component identification parameters

NameValue
component-typeorg.richfaces.Paint2D
component-classorg.richfaces.component.html.HtmlPaint2D
component-familyjavax.faces.Output
renderer-typeorg.richfaces.Paint2DRenderer
tag-classorg.richfaces.taglib.Paint2DTag

6.64.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.64.4. Creating the Component Dynamically Using Java

Example:


import org.richfaces.component.html.HtmlPaint2D;
...
HtmlPaint2D myImage = new HtmlPaint2D();
...

6.64.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.64.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.64.7. Relevant Resources Links

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