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

Table 6.42. a4j : mediaOutput attributes

Attribute Name | Description
--- | ---
accesskey | HTML: This attribute assigns an access key to an element. An access key is a single character from the document character set. Note: Authors should consider the input method of the expected reader when specifying an accesskey
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".
archive | Specifies a space-separated list of URIs
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 | Attribute is a flag that defines the caching strategy. If 'cacheable' is set to false, the response will not be cached. If it is set to true, it will be cached and the serialized value of 'value' attribute plays the role of a cache key.
charset | HTML: The character encoding of a resource designated by this hyperlink
classid | identifies an implementation
codebase | base URI for classid, data, archive
codetype | Defines content type for code
converter | JSF: ID of a converter to be used or a reference to a converter.
coords | HTML: The attribute specifies shape and it position on the screen. Possible values: "rect: left-x, top-y, right-x, bottom-y", "circle: center-x, center-y, radius", "poly: x1, y1, x2, y2, ..., xN, yN". Notes: a) when giving the radius value in percents, user agents should calculate the final radius value in pixels based on the associated object's width and height; b) the radius value should be smaller than center-x and center-y values; c) for a polygon, the first and last coordinate pairs should have same x and y to close the shape (x1=xN; y1=yN) (when these coordinates are different, user agents should infer an additional pair to close a polygon). Coordinates are relative to the top left corner of an object. All values are lengths. All values are comma separated.
createContent | Method call expression to send generated resource to OutputStream. It must have two parameter with a type of java.io.OutputStream and java.lang.Object ( deserialized value of data attribute )
createContentExpression | Attribute references to the method that will be used for content creating. The method accepts two parameters. The first parameter has an OutputStream type. It is a reference to the steam that should be used for output. The second parameter is a reference to a 'value' attribute of the component.
declare | declare but don't instantiate flag
dir | HTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
element | Name of html element for resource link - may be <a> <img> <object> <applet> <script> or <link>
expires | The attribute allows to manage caching and defines the period after which a resource is reloaded.
hreflang | HTML: Base language of a resource specified with the href attribute; hreflang may only be used with href
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
ismap | use server-side image map
lang | HTML: Code describing the language used in the generated markup for this component
lastModified | The attribute allows to manage caching. A browser can send request with the header "If-Modified-Since" for necessity of object reloading. If time of modification is earlier, then the framework doesn't call generation and return code 304.
mimeType | Geterated content mime-type for append to response header ( 'image/jpeg' etc )
onblur | DHTML: The client-side script method to be called when the element loses the focus either when pointing a device or tabbing navigation. The attribute may be used with the same elements as onfocus
onclick | DHTML: The client-side script method to be called when the element is clicked
ondblclick | DHTML: The client-side script method to be called when the element is double-clicked
onfocus | DHTML: The client-side script method to be called when the element gets the focus
onkeydown | DHTML: The client-side script method to be called when a key is pressed down over the element
onkeypress | DHTML: The client-side script method to be called when a key is pressed over the element and released
onkeyup | DHTML: The client-side script method to be called when a key is released
onmousedown | DHTML: The client-side script method to be called when a mouse button is pressed down over the element
onmousemove | DHTML: The client-side script method to be called when a pointer is moved within the element
onmouseout | DHTML: The client-side script method to be called when a pointer is moved away from the element
onmouseover | DHTML: The client-side script method to be called when a pointer is moved onto the element
onmouseup | DHTML: The client-side script method to be called when a mouse button is released
rel | HTML: The relationship from the current document to the anchor specified by this hyperlink. The value of this attribute is a space-separated list of link types
rendered | JSF: If "false", this component is not rendered
rev | HTML: A reverse link from the anchor specified by this hyperlink to the current document. The value of this attribute is a space-separated list of link types
session | If "true", a session for an object generation is restored.
shape | HTML: This attribute specifies the shape of a region. The possible values are "default", "rect", "circle" and "poly".
standby | message to show while loading
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.
tabindex | HTML: This attribute specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32767. User agents should ignore leading zeros
target | HTML: This attribute specifies the name of a frame where a document is to be opened. By assigning a name to a frame via the name attribute, authors can refer to it as the "target" of links defined by other elements
title | HTML: Advisory title information about markup elements generated for this component
type | HTML: The content type of the resource designated by this hyperlink
uriAttribute | Name of attribute for resource-link attribute ( 'href' for <a>, 'src' for <img> or <script>, etc)
usemap | Specifies an image as a client-side image-map
value | JSF: Data value calculated at render time and stored in URI (also as part of cache Key ), at generation time passed to send method. Can be used for update cache at change of generating conditions, and for creating beans as "Lightweight" pattern components (request scope). IMPORTANT: Since serialized data stored in URI, avoid using big objects.
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

Table 6.43. 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.2. Creating the Component with a Page Tag

Component definition on a page for graphical data output

Example:

    <a4j:mediaOutput element="img" cacheable="false" session="true" createContent="#{paintBean.paint}" value="#{paintData}" mimeType="image/png"/>

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

Example:

    import org.ajax4jsf.component.html.MediaOutput;

    ...

    MediaOutput myMedia = new MediaOutput ();

    ...

#### 6.4.2.4. 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.11. 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.5. Relevant resources links

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