Primefaces - 灯箱和数据表 - 灯箱渲染两次答案

【问题标题】：Primefaces - lightbox and datatable - lightbox rendered twicePrimefaces - 灯箱和数据表 - 灯箱渲染两次
【发布时间】：2015-03-23 20:12:29
【问题描述】：

我在 primefaces 中遇到了灯箱问题。我在数据网格中有一些职位。对于每个我显示缩略图。我希望缩略图是可点击的。点击后我想显示更大版本的图片。一切都可以作为 JSF 资源使用。在我用分页器更改页面并返回之前，它工作正常。然后我的灯箱包含两张图片。当我再次重复该过程时，我有三张图片等等......看起来每次我将页面切换到包含给定图片的页面时都会呈现灯箱内容。

这是我的代码：

<h:form id="productsList">

<p:dataGrid
    var="product" value="#{productsList.products}" columns="2" layout="grid"
    rows="6" paginator="true" id="products" 
    first="#{productsList.firstOnPage}"         
    currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    >
    <p:ajax event="page" listener="#{productsList.onPageChange}"/>

    <div class="product-panel">

        <p:lightBox>
          <h:outputLink>
            <p:graphicImage 
              value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
              styleClass="thumbnail">
              <f:param name="id" value="#{product.thumbnail.id}" />
            </p:graphicImage>
          </h:outputLink>
          <f:facet name="inline">
            <p:graphicImage 
              value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
              style="max-width: 900px; max-height: 80vh">
              <f:param name="id" value="#{product.mediumImage.id}" />
            </p:graphicImage>
          </f:facet>
        </p:lightBox>

        <div class="product-panel-description">
            <!-- some html here -->
        </div>

    </div>

</p:dataGrid>
</h:form>

ImagesBean.java：

@ApplicationScoped @ManagedBean
public class ImagesBean {

    @EJB
    private FileResourceDao fileResourceDao;

    public StreamedContent getImage() throws IOException {

        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        }
        else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            String id = context.getExternalContext().getRequestParameterMap().get("id");
            if (id == null || id.isEmpty()) return null;
            FileResource fileResource = fileResourceDao.read(Long.valueOf(id));

            ByteArrayInputStream sdf = new ByteArrayInputStream(fileResource.getContent());
            return new DefaultStreamedContent(sdf, "image/png");
        }
    }
}

这里有可能实现我的目标吗？如果没有，有没有更好的办法？

【问题讨论】：

标签： jsf primefaces lightbox

【解决方案1】：

好的。我用<p:dialog> 做到了。像这样：

      <h:outputLink value="javascript:void(0)" onclick="PF('picDialog-#{product.id}').show();" >              
        <p:graphicImage 
          value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
          styleClass="thumbnail">
          <f:param name="id" value="#{product.thumbnail.id}" />
        </p:graphicImage>
      </h:outputLink>
      <p:dialog id="picDialog-#{product.id}" widgetVar="picDialog-#{product.id}">
        <p:graphicImage 
          value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
          style="max-width: 900px; max-height: 80vh">
          <f:param name="id" value="#{product.mediumImage.id}" />
        </p:graphicImage>
      </p:dialog>

【讨论】：