The a4j:mediaOutput component allows images, video, sounds, and other binary resources to be displayed as defined by a user on the fly.
The createContent attribute references the method that is used for creating content. The method accepts two parameters:
The value attribute references data that can be used as input data for the content creator method. The data should be serializable since it is encoded as the URL of the resource.
The mimeType attribute defines the type of output content. It is used to define the corresponding type in the header of an HTTP response.
The cacheable attribute is a flag that defines the caching strategy. If cacheable is set to false, the response will not be cached. If set to true, it will be cached and the serialized value of the value attribute is used as a cache key.
This example reads the existing image and re-indexes the palette using colors you selected below.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"> <h:form id="form"> <h:panelGrid columns="6"> <h:outputText value="Color 1" /> <h:selectOneMenu value="#{mediaData.colorIndex1}"> <f:selectItem itemLabel="Red" itemValue="0" /> <f:selectItem itemLabel="Dark Blue" itemValue="1" /> <f:selectItem itemLabel="Green" itemValue="2" /> <f:selectItem itemLabel="Yellow" itemValue="3" /> <f:selectItem itemLabel="Blue" itemValue="4" /> </h:selectOneMenu> <h:outputText value="Color 2" /> <h:selectOneMenu value="#{mediaData.colorIndex2}"> <f:selectItem itemLabel="Red" itemValue="0" /> <f:selectItem itemLabel="Dark Blue" itemValue="1" /> <f:selectItem itemLabel="Green" itemValue="2" /> <f:selectItem itemLabel="Yellow" itemValue="3" /> <f:selectItem itemLabel="Blue" itemValue="4" /> </h:selectOneMenu> <h:outputText value="Color 3" /> <h:selectOneMenu value="#{mediaData.colorIndex3}"> <f:selectItem itemLabel="Red" itemValue="0" /> <f:selectItem itemLabel="Dark Blue" itemValue="1" /> <f:selectItem itemLabel="Green" itemValue="2" /> <f:selectItem itemLabel="Yellow" itemValue="3" /> <f:selectItem itemLabel="Blue" itemValue="4" /> </h:selectOneMenu> <f:facet name="footer"> <a4j:commandButton value="Process the image" render="img" execute="@form" /> </f:facet> </h:panelGrid> <a4j:mediaOutput element="img" cacheable="false" id="img" createContent="#{mediaBean.process}" value="#{mediaData}" mimeType="image/jpeg" /> </h:form> </ui:composition>
package org.richfaces.demo.mediaOutput; import java.io.BufferedInputStream; import java.io.OutputStream; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.context.ExternalContext; import javax.faces.context.FacesContext; @ManagedBean(name = "mediaBean") @RequestScoped public class MediaBean { private static final int BUFFER_SIZE = 8192; private static final String RICHFACES_MEDIA_OUTPUT_IMAGE_SOURCE = "/resources/org.richfaces.showcase/img/source.png"; private Color[] colors; private MediaReader mr = new MediaReader(); public void process(OutputStream outStream, Object data) throws Exception { colors = ((MediaData) data).getNewColors(); ExternalContext extContext = FacesContext.getCurrentInstance().getExternalContext(); BufferedInputStream inStream = new BufferedInputStream( extContext.getResourceAsStream(RICHFACES_MEDIA_OUTPUT_IMAGE_SOURCE), BUFFER_SIZE); try { // skip 8-bytes of header byte[] bs = new byte[8]; if (inStream.read(bs) < bs.length) { throw new IllegalArgumentException(); } outStream.write(bs); mr.write(colors, outStream, inStream); } finally { inStream.close(); outStream.close(); } } }
