### 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.4.2. < a4j:mediaOutput > available since 3.0.0

expand all

#### 6.4.2.1. Description

The <a4j:mediaOutput> component is a facility for generating images, video, sounds and other binary resources defined by you on-the-fly.

#### 6.4.2.2. Details of Usage

The <a4j:mediaOutput> component is used for generating images, videos or sounds on-the-fly. Let's consider an image creation and generate a JPEG image with verification digits for captcha (the image will include just digits without any graphical noise and distortion).

Write the following line on the page:

    <a4j:mediaOutput element="img" cacheable="false" session="false" createContent="#{mediaBean.paint}" value="#{mediaData}" mimeType="image/jpeg"/>

As You see from the example above, first it is necessary to specify the kind of media data You want to generate. This can be done with the help of "element" attribute, which possible values are `img`, `object`, `applet`, `script`, `link` or `a`.

The "cacheable" defines whether the response will be cached or not. In our case we don't need our image to be cached, cause we need it to be changed every time we refresh the page.

The "mimeType" attribute defines the type of output content. It is used to define the corresponded type in the header of an HTTP response.

The <a4j:mediaOutput> attribute has two main attributes:

- "createContent" specifies a method that will be used for content creating. The method accepts two parameters. The first one — with an `java.io.OutputStream` type — is a reference to the stream that should be used for output. An output stream accepts output bytes and sends them to a recipient. The second parameter is a reference to the component's "value" attribute and has `java.lang.Object` type. This parameter contains deserialized object with data specified in the "value" attribute.

- "value" attribute specifies a bean class that keeps data for transmitting it into a stream in the method specified with "createContent" .

Now let's create the `MediaBean` class and specify there a primitive random-number generator and `paint` method that will convert the generated numbers into an output stream and give a JPEG image as a result. The code for `MediaBean` class is going to look as following:

Example:

    package demo;

    import java.awt.Graphics2D;

    import java.awt.image.BufferedImage;

    import java.io.IOException;

    import java.io.OutputStream;

    import java.util.Random;

    import javax.imageio.ImageIO;

    public class MediaBean {

        public void paint(OutputStream out, Object data) throws IOException{

            Integer high = 9999;

            Integer low = 1000;

            Random generator = new Random();

            Integer digits = generator.nextInt(high - low + 1) + low;

            if (data instanceof MediaData) {

                MediaData paintData = (MediaData) data;

                BufferedImage img = new BufferedImage(paintData.getWidth(),paintData.getHeight(),BufferedImage.TYPE_INT_RGB);

                Graphics2D graphics2D = img.createGraphics();

                graphics2D.setBackground(paintData.getBackground());

                graphics2D.setColor(paintData.getDrawColor());

                graphics2D.clearRect(0,0,paintData.getWidth(),paintData.getHeight());

                graphics2D.setFont(paintData.getFont());

                graphics2D.drawString(digits.toString(), 20, 35);

                ImageIO.write(img,"png",out);

            }

        }

    }

Now it is necessary to create a class that will keep transmissional data that will be used as input data for a content creation method. The code for `MediaData` class is going to be as following:

## Note:

A bean class transmitted into value should implement `Serializable` interface in order to be encoded to the URL of the resource.

Example:

    package demo;

    import java.awt.Color;

    import java.awt.Font;

    import java.io.Serializable;

    public class MediaData implements Serializable{

        private static final long serialVersionUID = 1L;

        Integer Width=110;

        Integer Height=50;

        Color Background=new Color(190, 214, 248);

        Color DrawColor=new Color(0,0,0);

        Font font = new Font("Serif", Font.TRUETYPE_FONT, 30);

        /* Corresponding getters and setters */

    }

As a result the <a4j:mediaOutput> component will generate the following image that will be updated on each page refresh:

Figure 6.12. Using the <a4j:mediaOutput> for generating an image for captcha

Hence, when using the component it's possible to output your data of any type on a page with Ajax requests.

#### 6.4.2.3. Reference Data

Table of <a4j:mediaOutput> attributes.

Table 6.23. Component Identification Parameters

Name | Value
--- | ---
component-type | org.ajax4jsf.MediaOutput
component-family | org.ajax4jsf.Resource
component-class | org.ajax4jsf.component.html.MediaOutput
renderer-type | org.ajax4jsf.MediaOutputRenderer

#### 6.4.2.4. Relevant Resources Links

Visit the MediaOutput page at RichFaces LiveDemo for more examples of component usage and their sources.

- Prev6.4.1. < a4j:include > ...
- Top of page
- Front page
- Next6.4.3. < a4j:outputPanel > ...