如何将带有p：graphicImage的p：commandLink放在动态列数据表中

Question

I've followed the example of <p:datatable> dynamic columns feature in primefaces showcase , and it works great.

Now what i want is to put instead of simple <h:outputText> columns, i want to put columns with <p:graphicImage> nested in <p:commanLink> which serves to show a <p:dialogue> .

in other words how can i use this :

<f:facet name="header">
   #{column.header}
</f:facet>
   #{car[column.property]}
</p:columns>

to get it to generate something like this :

<p:column headerText="R"
          style=" text-align: center;"
          width="10"
          rendered="true">
    <p:commandLink id="MRepShowButton" update=":form1:display" onclick="EditorDialog.show();"  title="Editer le compte rendu"> 
       <f:setPropertyActionListener value="#{exam}" target="#{dyna.selectedExamen}" />  
       <p:graphicImage id="img1" value="/images/study_Report_icons/Text/0.png" rendered="#{exam.examen.rapport.rapportWrittenState == null}"/>
       <p:graphicImage id="img2" value="/images/study_Report_icons/Text/#{exam.examen.rapport.rapportWrittenState}.png" rendered="#{exam.examen.rapport.rapportWrittenState != null}"/>
  </p:commandLink>
</p:column> 

Just to let you know i can programatically make it like this :

column.setWidth(String.valueOf(columnmodel.get(i).getWidth() - widthOptimizer));
CommandLink rapstatelink = (CommandLink) application.createComponent(CommandLink.COMPONENT_TYPE);

rapstatelink.setId("MRepShowButton");
rapstatelink.setTitle("Editer le rapport du patient");
rapstatelink.setUpdate(":formero");
rapstatelink.setOnclick("EditorDialog.show();");


ValueExpression value = ef.createValueExpression(elc, "#{exam}", Cotation.class);
ValueExpression target = ef.createValueExpression(elc, "#{dyna.selectedExamen}", Cotation.class);
rapstatelink.addActionListener(new SetPropertyActionListenerImpl(target, value));
ValueExpression value1 = ef.createValueExpression(elc, "#{dyna.toHTML(dyna.selectedExamen.examen.rapport.rapportWrittenFile)}", String.class);
ValueExpression target1 = ef.createValueExpression(elc, "#{dyna.html}", String.class);
rapstatelink.addActionListener(new SetPropertyActionListenerImpl(target1, value1));

GraphicImage rapstateimage = (GraphicImage) application.createComponent(GraphicImage.COMPONENT_TYPE);
rapstateimage.setId("img1");
ValueExpression show1 = ef.createValueExpression(elc, "#{exam.examen.rapport.rapportWrittenState == null}", Boolean.class);
rapstateimage.setValueExpression("rendered", show1);
rapstateimage.setValue("/images/study_Report_icons/Text/0.png");
rapstatelink.getChildren().add(rapstateimage);

GraphicImage rapstateimage2 = (GraphicImage) application.createComponent(GraphicImage.COMPONENT_TYPE);
rapstateimage2.setId("img2");
ValueExpression patsategraphExp = ef.createValueExpression(elc, "/images/study_Report_icons/Text/#{exam.examen.rapport.rapportWrittenState}.png", Object.class);
rapstateimage2.setValueExpression("value", patsategraphExp);
ValueExpression show2 = ef.createValueExpression(elc, "#{exam.examen.rapport.rapportWrittenState != null}", Boolean.class);
rapstateimage2.setValueExpression("rendered", show2);
column.setStyleClass("imagero");

rapstatelink.getChildren().add(rapstateimage2);
column.getChildren().add(rapstatelink);
table.getChildren().add(column);

*this approach of creating the whole datatable in the backing bean and bind it to the facelet does work with a major problem which is i should click twice on the command link to fire the action.(no nested forms and everything is compliant to BalusC Answer ).

Additional info: Primefaces 4.0. JSF 2.2.

Answer 1

This is an alternative using <p:commandButton/> :

<p:commandButton id="MRepShowButton" update=":form1:display" onclick="EditorDialog.show();" icon="custom-icon" />

Declare this in your CSS stylesheet (adjust the image path according to your project):

.custom-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/img/chart_stock.png") !important;
}

Answer 2

Use name property, not value in p:graphicImage .

p:graphicImage uses name property (and not value ) to match the image in the resources folder. If name is not provided, the img html element will not be rendered.

Example (based on the PrimeFaces columns showcase):

 <p:graphicImage name="images/#{car.year}.jpg" />

You can also use the library property (same result in this case).

 <p:graphicImage library="images" name="#{car.year}.jpg" />

Images and directories must exist in the WebContent/resource folder in your project.

Take also into account my answer here about how to include p:commandLink into ap:columns block.