This example uses the <a4j:mediaOutput> component to generate a JPEG image of verification digits. The code on the application page is a single element:

<a4j:mediaOutput element="img" cacheable="false" session="false"

                 createContent="#{mediaBean.paint}" value="#{mediaData}" 

                 mimeType="image/jpeg" />

The <a4j:mediaOutput> component uses the MediaBean.paint method to create the image. The method generates a random number, which is then converted into an output stream and rendered to a JPEG image. The MediaBean class is as follows:

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);

        }

    }

}

Another class, MediaData is required by the value attribute for keeping data to be used as input for the content creation method. The MediaData class is as follows:

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 */

    ...


}

The <a4j:mediaOutput> component uses the MediaBean and MediaData classes to generate a new image on each page refresh.

<rich:panel header="User information">

   <h:panelGrid columns="3">

   

      <h:outputText value="Name:" />

      <h:inputText value="#{validationBean.name}" id="name">

         <rich:validator />

      </h:inputText>

      <rich:message for="name" />

      

      <h:outputText value="Email" />

      <h:inputText value="#{validationBean.email}" id="email">

         <rich:validator />

      </h:inputText>

      <rich:message for="email" />

      

      <h:outputText value="Age" />

      <h:inputText value="#{validationBean.age}" id="age">

         <rich:validator />

      </h:inputText>

      <rich:message for="age" />

      

      <h:outputText value="I agree the terms" />

      <h:selectBooleanCheckbox value="#{validationBean.agree}" id="agree">

         <rich:validator/>

      </h:selectBooleanCheckbox>

      <rich:message for="agree" />

      

   </h:panelGrid>

</rich:panel>

The example demonstrates a simple form for changing a password. The two entered passwords must match, so a <rich:graphValidator> component is used for cross-field validation.

<h:form>

   <rich:graphValidator value="#{userBean}">

      <rich:panel header="Change password">

         <rich:messages/>

         <h:panelGrid columns="3">

            <h:outputText value="Enter new password:" />

            <h:inputSecret value="#{userBean.password}" id="pass"/>

            <rich:message for="pass"/>

            <h:outputText value="Confirm the new password:" />

            <h:inputSecret value="#{userBean.confirm}" id="conf"/>

            <rich:message for="conf"/>

         </h:panelGrid>

         <a4j:commandButton value="Store changes"

                            action="#{userBean.storeNewPassword}" />

      </rich:panel>

   </rich:graphValidator>

</h:form>

The input controls validate against the following bean:

@ManagedBean

@RequestScoped

public class UserBean implements Cloneable {


   @Size(min = 5, max = 15, message="Wrong size for password")

   private String password;

   @Size(min = 5, max = 15, message="Wrong size for confirmation")

   private String confirm;

   private String status = "";

   

   @AssertTrue(message = "Different passwords entered!")

   public boolean isPasswordsEquals() {

      return password.equals(confirm);

   }


   public void storeNewPassword() {

      FacesContext.getCurrentInstance().addMessage("", new FacesMessage(FacesMessage.SEVERITY_INFO, "Succesfully changed!", "Succesfully changed!"));

   }


   ...

}

When validation occurs, the whole object is validated against the annotation contstraints. The @AssertTrue annotation relies on the isPasswordsEqual() function to check whether the two entered passwords are equal.

If the entered passwords do not match, an error message is displayed:

<a4j:log level="ALL" mode="inline" />