Now that we have learnt how to store images in the JCR repository, we will show how to display the uploaded images. For this purpose let's add one more page which will display the single images using a Primefaces component named graphicImage.

The graphicImage is a simple but effective component which uses the StreamedContent API to display any binary image easily. This binary image could be images stored in a database, in a JCR Repository (like in our example) or images can be created programmatically on-the-fly.

Add the following display.xhtml image to your project:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head></h:head>

<h:body>
    <h:form id="form">

        <h3>Dynamic Image Display</h3>
        <p:dataTable value="#{dynamicImageController.list}" var="item"
            id="mydata">
            <p:column>
                <f:facet name="header">Image</f:facet>
                <h:outputText value="#{item.name}" />
            </p:column>
            <p:column>
                <f:facet name="header">View</f:facet>
                <h:commandButton id="book"
                    action="#{dynamicImageController.showImage(item.name)}"
                    value="Show Image" />
            </p:column>
        </p:dataTable>
        <br />
        <p:graphicImage value="#{dynamicImageController.image}" />
    </h:form>
</h:body>
</html>

And here's the DynamicImageController, which gets injected the Repository, populates a datatable in the @Postconstruct init() method and uses the method showImage to stream the Image content:
package com.mastertheboss;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import javax.jcr.*;

import org.modeshape.jcr.api.JcrTools;
import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;
@ManagedBean 
@SessionScoped
public class DynamicImageController {


    @Resource(mappedName="java:/jcr/sample")
    private Repository repository; 
    private JcrTools tools = new JcrTools();

    List<Image> list = new ArrayList();

    Session session = null;

    public List<Image> getList() {
        return list;
    }

    public void setList(List<Image> list) {
        this.list = list;
    }


    @PostConstruct
    public void init() {
        try {
            // Create a session ...
            session = repository.login("default");

            Node doc = session.getNode("/files/");
            tools.printNode(doc);
            NodeIterator nodeList = doc.getNodes();
            while (nodeList.hasNext()) {
                Node nodeImage = nodeList.nextNode();
                list.add(new Image(nodeImage.getName()));
            } 
        } catch (Exception e) {
            e.printStackTrace();
        }
        finally {
            // Always close the session ...
            if ( session != null ) session.logout();
        }    

    }

    private StreamedContent image;

    public DynamicImageController() {


    }

    public StreamedContent getImage() {
        return image;
    }

    public void showImage(String name) {


        try {
            Node doc = session.getNode("/files/"+name);
            Node imageContent = doc.getNode("jcr:content");
            Binary content = imageContent.getProperty("jcr:data").getBinary();
            InputStream is = content.getStream();

            image = new DefaultStreamedContent(is, "image/png");

        } catch (PathNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (RepositoryException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
}

Once launched the display.xhtml displays the list of available pictures in the JCR Repository:

modeshape jboss as 7 tutorial

By clicking on the "Show Image", the Image is streamed and loaded into the graphicImage as shown by the following picture:

modeshape tutorial jboss as 7

I want to thank Randall Hauch (leader of the ModeShape project) for providing great tips and suggestions to this article!

Download the sample code for this article.

0
0
0
s2smodern