如何在 jsf 中将 Primefaces Galleria 与用户定义的对象一起使用

Question

我想将我当前的缩放图库转换为 Prime-faces Galleria。我有以下代码。

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)Zoomgalleria 模型

 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
  }

我尝试通过以下代码使用 Primefaces Galleria。 PrimeFaces 画廊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>

但它不起作用，我不是 JSF 专家，所以感谢每一个建议。

PS：PrimeFaces 3.0 版

Answer 1

看起来您的 documentList 是 List<GalleriaDocument>。对于初学者，您可能会丢失 toArray() 。

Primefaces 代码说明，将帮助您继续前进

<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. 这里的值被构造为字符串列表（图像文件名）
2. 该值存储在名为“图像”的变量中，该变量将在元素内部使用

3. p:graphicImage name="demo/images/nature/#{image}" 实际上是将图像放在这里的原因。所以这里的graphicImages是'demo/images/nature/nature1.jpg'、'demo/images/nature/nature2.jpg'、'demo/images/nature/nature3.jpg'等等。 在您的情况下，您可能必须将路径/docName 添加到您的 GallerialDocument，然后执行类似的操作...

   <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 2

Primefaces Galleria 接受一个字符串列表（图像名称），并且您正在传递一个对象列表。 您可以将其转换为字符串（docRefId 列表）

豆子

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：我使用了/ui/ImageServlet?name=abc.jpg&docRefId=#{galleryDoc}&thumb=true，我认为图像是因为旧组件的代码使用它。 但是是服务器映像的相对路径。 如果您的图片位于/images，则为/images/#{galleryDoc}

Answer 3

以下代码可以让我在 Galleria 中显示图片，但 description(title + date) 没有显示。我正在使用 PrimeFaces 版本是 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>