Dynamic images with PrimeFaces
Join the DZone community and get the full member experience.
Join For FreePrimeFaces
is a lightweight library for JSF with regard to its functionality,
simplicity, and support. Its power consists in AJAX support, providing
more than 70 AJAX-based components. The additional TouchFaces module
features a UI kit for developing mobile web applications. In this
recipe, you will see how to use PrimeFaces to retrieve images from a
database and to provide them dynamically to our JSF page.
Getting ready
We
have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish
v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled
library. In addition, we have used PrimeFaces 2.0, which provide support
for JSF 2.0. You can download this distribution from http://www.primefaces.org/.
How to do it...
Our
recipe will look very simple, thanks to PrimeFaces. Practically, all we
do is to pick up the PrimeFaces fruits. The following code retrieves a
BLOB from a JDBC ResultSet and provides its InputStream as a StreamedContent (the backing bean is listed next):
public class PictureBean {And the p:graphicImage tag can display any binary image, as shown next:
private StreamedContent myImage;
public PictureBean() {
InputStream inputStream = //InputStream of a blob
myImage = new DefaultStreamedContent(inputStream, "image/png");
}
public StreamedContent getMyImage() {
return myImage;
}
public void setMyImage(StreamedContent myImage) {
this.myImage = myImage;
}
}
<p:graphicImage value="#{pictureBean.myImage}" />
How it works...
The entire solution is mapped in PrimeFaces; therefore you will need to go deeply into this framework to understand its secrets. Apparently, everything we have done relates to a simple JSF application with a simple conversational state between a JSF page and a backing bean.
From http://e-blog-java.blogspot.com/2011/04/dynamic-images-with-primefaces.html
Opinions expressed by DZone contributors are their own.
Comments