DynamicImage

Key Features

• Various ways to specify image data
• Appearance and style customization

Specifying the Image

To add the DynamicImage component to a page, use the <q:dynamicImage> tag. The data of the image to be generated dynamically is defined by the model assigned through the data attribute of the <q:dynamicImage> tag. There are two ways to specify the data model:

• Specify the image as a byte array. This way should be used if the image data encoded in one of the image file formats is already available. For example, this can be useful for displaying image files stored in the database. In this case, the data attribute should be set as a value-binding expression that references the byte array representing the image file.

In the following example, the data model is defined as a byte array:

<q:dynamicImage data="#{DynamicImageData.testImageData}"/>

Note that the DynamicImage component does not specifically process the image data. It serves this data to the client's browser with the appropriate content type, so the the only restriction on the file type is that it should be supported by the client's browser.

• Specify the data model as an implementation of the java.awt.image.RenderedImage interface. This way is most suitable for the cases where the image should be programmatically generated on the server side. Usually, you will need to use the java.awt.image.BufferedImage class as an implementation of the RenderedImage interface. The data attribute should be specified as a value-binding expression that references the value of the java.awt.image.RenderedImage type as shown in the example below.
  Note that images specified this way are served encoded in PNG format.

  <q:dynamicImage data="#{DynamicImageData.testImage}"/>

  Here is an example of how the testImage property of the DynamicImageData backing bean can be implemented:

  public RenderedImage getTestImage() {
      BufferedImage image = new BufferedImage(50, 50, BufferedImage.TYPE_INT_RGB);
      image.getGraphics().drawLine(20, 20, 30, 30);
      image.getGraphics().drawLine(30, 20, 20, 30);
      return image;
    }

Customizing the Appearance

You can specify the width and height of the DynamicImage component in pixels using the width and height integer attributes. The "alt" text that is shown if images are not loaded by the browser can be specified by the alt attribute.

The example below shows the use of the appearance-related attributes:

<q:dynamicImage data="#{DynamicImageData.testData}"
                width="100"
                height="200"
                alt="Test DynamicImage"/>

You can also specify a style for the DynamicImage component by using the style and styleClass attributes.