Как поместить p: commandLink с p: graphicImage в таблицу динамических столбцов

Я воспользовался примером функции <p:datatable> динамических столбцов в витрине Primefaces, и это прекрасно работает.

Теперь я хочу поместить вместо простых столбцов <h:outputText> я хочу поместить столбцы с <p:graphicImage>, вложенными в <p:commanLink>, которые служат для отображения <p:dialogue>.

другими словами, как я могу использовать это:

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

чтобы заставить его генерировать что-то вроде этого:

<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> 

Просто чтобы вы знали, что я могу программно сделать это так:

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);

* этот подход создания всей таблицы данных в компоненте поддержки и привязки ее к фаслету действительно работает с серьезной проблемой, заключающейся в том, что я должен дважды щелкнуть ссылку команды, чтобы запустить действие. (нет вложенных форм, и все соответствует Ответ BalusC).

Дополнительная информация: Primefaces 4.0. JSF 2.2.


person Jalal Sordo    schedule 26.12.2013    source источник
comment
Вам действительно нужен <p:commandLink/> в этом случае? Если нет, дайте нам знать. У меня есть пример использования <p:commandButton>, но сначала мне нужно знать, является ли <p:commandLink/> обязательным.   -  person VulfCompressor    schedule 26.12.2013
comment
хорошо, я тоже могу работать с ‹p:commandButton›, просто просветите меня.   -  person Jalal Sordo    schedule 26.12.2013
comment
никто не отвечает на настоящие вопросы :с   -  person Jalal Sordo    schedule 26.12.2013


Ответы (2)


Это альтернатива использованию <p:commandButton/>:

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

Объявите это в своей таблице стилей CSS (настройте путь к изображению в соответствии с вашим проектом):

.custom-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/img/chart_stock.png") !important;
}
person VulfCompressor    schedule 26.12.2013
comment
но как мне использовать это с #{car[column.property] это мой настоящий вопрос? - person Jalal Sordo; 26.12.2013
comment
Единственный вопрос, который я нашел в вашей теме, был таким: in other words how can i use this <code> to get this <code>. Приведенный выше код делает то же самое, что вам нужно, но в <p:commandButton/> (вы сказали ранее, что сделать это в <p:commandButton/> не составило труда). - person VulfCompressor; 26.12.2013
comment
посмотрите здесь stackoverflow.com/questions/20787244/ - person Jalal Sordo; 26.12.2013

Используйте свойство name, а не value в p:graphicImage.

p:graphicImage использует свойство name (а не value) для соответствия изображению в папке resources. Если name не указано, HTML-элемент img не будет отображаться.

Пример (на основе демонстрации столбцов PrimeFaces):

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

Вы также можете использовать свойство library (в этом случае тот же результат).

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

Изображения и каталоги должны существовать в папке WebContent/resource вашего проекта.

Учтите также мой ответ здесь о том, как включить p:commandLink в блок p:columns.

person Stephane Lallemagne    schedule 27.12.2013