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

Question

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

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)画廊文件

  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}"/>

此处的值被构造为字符串列表（图像文件名）
该值存储在一个名为 'image' 的变量中，该变量将在元素内部使用
p:graphicImage name="demo/images/nature/#{image}" 实际上是将图像放在这里的原因。所以这里的graphicImages是'demo/images/nature/nature1.jpg'、'demo/images/nature/nature2.jpg'、'demo/images/nature/nature3.jpg'等。在您的情况下，您可能必须将 path/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 中显示图片，但没有显示说明（标题 + 日期）。我使用的 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>

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

How to use Primefaces galleria with user defined objects in jsf

java

jsf

galleria

primefaces