How to use contextMenu with ContentFlow in Primefaces

Question

Sorry in advance fro lame question, I'm still new to JSF/Primefaces. I'd like to use ContextMenu with ContentFlow. For example, when user right-clicks on the ContentFlow control I would like to display the context menu with actions like Delete, Add New etc. My code in JSF page looks like this:

<p:contentFlow id="productpictures" 
               value="#{myviewscopedbean.productpictures}" 
               var="picture" >
     <p:graphicImage url="#{picture}" styleClass="content"/>
</p:contentFlow> 
<p:contextMenu  for="productpictures" >
     <p:menuitem value="Refresh" update="productpictures" />
     <p:separator/>
     <p:menuitem value="Add New" onclick="PF('dlgcreate').show()" />
     <p:menuitem value="Delete" actionListener="#{myviewscopedbean.removePicture}"
                                update="productpictures" />
</p:contextMenu>

The problem I'm fighting with - how to determine the 'active' image in the contentflow and how to pass it to myviewscopedbean.removePicture() method.

I found some hints here but still confused - please help!

Answer 1

You could use p:remoteCommand and JQuery to get the image and read image from the image caption. The code below gives caption as selected image.

Your modified code

   <p:contentFlow id="productpictures" 
                   value="#{myviewscopedbean.productpictures}" 
                   var="picture" >
         <p:graphicImage url="#{picture}" styleClass="content"/>
         <div class="caption">#{picture}</div>
    </p:contentFlow> 
    <p:contextMenu  for="productpictures" >
         <p:menuitem value="Refresh" update="productpictures" />
         <p:separator/>
         <p:menuitem value="Add New" onclick="PF('dlgcreate').show()" />
         <p:menuitem value="Delete" oncomplete="removePicture([{name:'selectedImage', value: $('.item.active div.caption').text()}]);"
                                     />
    </p:contextMenu>

<p:remoteCommand name="removePicture" actionListener="#{myviewscopedbean.removePicture}" update="productpictures"/>

Java

@ViewScoped('myviewscopedbean')
class MyBean{
    public void removePicture(){
       Map<String, String[]> paramValues = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterValuesMap();
       String[] selectedImages = paramValues.get("selectedImage");        
    }

}