How to use Primefaces galleria with user defined objects in jsf

Question

I want to convert my current zoom gallery to Prime-faces galleria . I have following code .

1)profile.xhtml

<div class="profileImageDiv">
       <em:zoomGalleria showDocName="true" value="#{thumbImageMBean.documentReferenceThumbs}" />
        <a href="#{request.contextPath}/ui/ImageServlet?genericProfileDocRefId=#{generalEnquiryMBean.profileDocRefId}&amp;name=abc.jpg"
           class="group1">
          <h:graphicImage title="#{generalEnquiryMBean.profileDocRefId}"
                  value="/ui/ImageServlet?name=abc.jpg&amp;docRefId=#{generalEnquiryMBean.profileDocRefId}&amp;thumb=true"
                  alt="" width="137" height="138"/>
        </a>
      </div>

2) ThumbImageBean.java

@ManagedBean
@CustomScoped(value = "#{customScope}")
public class ThumbImageMBean extends BaseBean{


  ZoomGalleriaModel documentReferenceThumbs;

    public void setDocumentReferenceThumbs(ZoomGalleriaModel documentReferenceThumbs){
    this.documentReferenceThumbs = documentReferenceThumbs;
  }
 public ZoomGalleriaModel getDocumentReferenceThumbs() {
    return this.documentReferenceThumbs;
  }

3)ZoomgalleriaModel

 public class ZoomGalleriaModel {
  private List<GalleriaDocument> documentList;
  //setter getter 
    public void addGalleriaDocument(GalleriaDocument galleriaDocument){
    documentList.add(galleriaDocument);
  }

4)GalleriaDocument

  public class GalleriaDocument implements Serializable{

  private long docRefId;
  private String docDescription;
  private byte[] document;
  private Date documentDate;
  private String userName;
//setter and getter and constructor
  }

I tried to use Primefaces galleria with following code. PrimeFaces galleria code

<p:galleria value="#{thumbImageMBean.documentReferenceThumbs.documentList.toArray()}"     var="galleriaDoc" panelWidth="500" panelHeight="313" showCaption="true"> //primefaces galleria required array of string but i had List of objects   

    <p:graphicImage name="demo/images/nature/#{galleriaDoc}" alt="Image Description for #{galleriaDoc}" title="#{galleriaDoc}"/>
</p:galleria>

But it's not working, I am not JSF expert so ,thanks to every suggestion .

PS: PrimeFaces Version 3.0

Answer 1

Following code is working for me to show images in galleria , but description(title + date) is not showing . I am using PrimeFaces Version is 3.1

 <p:galleria value="#{thumbImageMBean.documentReferenceThumbs.documentList}" panelWidth="450" panelHeight="300"  var="galleriaDoc"  transitionInterval="0"
             styleClass="ui-widget-content ui-corner-all"  >
   <p:graphicImage  value="/ui/ImageServlet?name=abc.jpg&amp;docRefId=#{galleriaDoc.docRefId}"
                    name="#{galleriaDoc.userName}"
                    alt="Image Description for #{galleriaDoc.docRefId}"
                    title="#{galleriaDoc.documentDate}#{galleriaDoc.documentDate}"


   />
   <p:panel id="panel" header="Form" style="margin-bottom:10px;">
     <h:outputLabel value="#{galleriaDoc.userName} #{galleriaDoc.documentDate}"></h:outputLabel>
   </p:panel>


 </p:galleria>

Answer 2

Looks like your documentList is a List<GalleriaDocument>. You can lose the toArray() for starters.

Explanation of Primefaces code which will help you go forward

<p:galleria value="#{imagesView.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true">
<p:graphicImage name="demo/images/nature/#{image}" alt="Image Description for #{image}" title="#{image}"/>

1. value here is being constructed as a list of strings (Image file names)
2. the value is being stored in a variable called 'image' which will be used inside the element

3. p:graphicImage name="demo/images/nature/#{image}" is actually what is putting the images here. So the graphicImages here are 'demo/images/nature/nature1.jpg' , 'demo/images/nature/nature2.jpg', 'demo/images/nature/nature3.jpg' and so on. In your case you might have to add the path/docName to your GallerialDocument and then do something like this...

   <p:galleria value="#{thumbImageMBean.documentReferenceThumbs.documentList}" var="image" panelWidth="500" panelHeight="313" showCaption="true">
   <p:graphicImage name="demo/images/nature/#{image.docName}" alt="Image Description for #{image}" title="#{image}"/>
   

Answer 3

Primefaces galleria accepts a list of String(image name) and you are passing a List of objects. You can convert it to String (list of docRefId)

Bean

public String[] getImages() {

    List<GalleriaDocument> docs = this.documentReferenceThumbs.getDocumentList();
    String[] imagesArray = new String[docs.size()];

    for (int i = 0; i < docs.size(); i++) {
        imagesArray[i] = (String.valueOf(docs.get(i).getDocRefId()));
    }

    return imagesArray;
}

Xhtml

<p:galleria
    value="#{thumbImageMBean.getImages()}"
    var="galleriaDoc" panelWidth="500" panelHeight="313"
    showCaption="true">    

<p:graphicImage value="/ui/ImageServlet?name=abc.jpg&amp;docRefId=#{galleryDoc}&amp;thumb=true"
        alt="Image Description for #{galleriaDoc}" title="#{galleriaDoc}" />
</p:galleria>

PS: I used /ui/ImageServlet?name=abc.jpg&docRefId=#{galleryDoc}&thumb=true where I think of images are since the code of the old component uses it. But is the relative path to your server image. If your images are at /images it would be /images/#{galleryDoc}