如何从 <p:galleria 获取选定的图像答案

【问题标题】：How to get the selected image from <p:galleria如何从 <p:galleria 获取选定的图像
【发布时间】：2013-06-05 19:58:19
【问题描述】：

在这段代码中，

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

你如何得到selectedImage？如在

<p:carousel id="carousel" value="#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars"> 
    <p:graphicImage id="image" value="/images/cars/#{car.manufacturer}.jpg"/>   

    <h:panelGrid columns="2" style="width:100%" cellpadding="5"> 
        <h:outputText value="Model: " /><h:outputText id="model" value="#{car.model}" /> 
    </h:panelGrid> 

    <p:commandLink id="view" update=":form:carDetail" oncomplete="carDialog.show()" title="View Detail"> 
        <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />   
        <f:setPropertyActionListener value="#{car}"   
                target="#{tableBean.selectedCar}" /> 
    </p:commandLink> 
</p:carousel>

【问题讨论】：

你曾经解决过这个问题吗？我正在尝试添加一个按钮来删除当前选择的图像。

标签： jsf primefaces galleria

【解决方案1】：

假设您在当前显示的每张图片上都有一个详细信息按钮（将 alt 属性设置为图像文件名）

<p:galleria value="#{Bean.images}" var="image">
  <p:graphicImage value="/images/galleria/#{image}"/>

  <f:facet name="content"> 
    <p:graphicImage value="/images/galleria/#{image}" alt="#{image}" />
    <span style="position:absolute;right:0;top:0;">
      <p:commandButton styleClass="ui-icon ui-icon-search" onclick="jsCallRemote(this);" />
    </span>
 </f:facet>
</p:galleria>

搜索按钮可以调用一个js函数传递按钮本身作为提示找到当前图像文件名，然后调用远程命令传递文件名作为请求参数：

<script>
function jsCallRemote(btn) {
    var imageFileName = btn.parentNode.parentNode.getElementsByTagName('img')[0].alt;
    selectImage([{name:'imageFileName', value:imageFileName}]);
}
</script>

<p:remoteCommand name="selectImage" actionListener="#{tableBean.selectImage}" />

而bean的方法通过请求参数imageFileName进行实际选择：

public void selectImage() {
  String fileName = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("imageFileName");
  // find image by filename...
}

【讨论】：

【解决方案2】：

如果您不打算为每张图片设置一个按钮，您可以利用 Galleria 标题来捕捉所选图片的标题。本解决方案基于andreea m的回答。

        <p:commandButton action="#{controller.preview}" value="Preview" onclick="checkSelectedImage();" oncomplete="PF('previewDialog').show();"/>

JS函数

      function checkSelectedImage() {
            var caption = document.getElementsByClassName("ui-galleria-caption");
            selectImage([{name:'imageFileName', value:caption[0].getElementsByTagName("h4")[0].innerHTML}]);
        }

远程命令

    <p:remoteCommand name="selectImage" actionListener="#{controller.selectImage}"/>

【讨论】：