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
The <a4j:mediaOutput> component is a facility for generating images, video, sounds and other binary resources defined by you on-the-fly.
Table 6.43. 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.44. 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 |
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"/>
Example:
import org.ajax4jsf.component.html.MediaOutput;
...
MediaOutput myMedia = new MediaOutput ();
...
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:
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:
Hence, when using the component it's possible to output your data of any type on a page with Ajax requests.
Vizit the MediaOutput page at RichFaces LiveDemo for more examples of component usage and their sources.
