Как показать изображение на выбранном элементе p: selectOneMenu - PullRequest
Новая
       55

Как показать изображение на выбранном элементе p: selectOneMenu

1 голос
/ 17 июня 2020

Я пытаюсь реализовать расширенный selectOneMenu (PrimeFaces) для выбора языкового стандарта на основе его значка флага. Значки отображаются в списке, но не для выбранного элемента (то же самое происходит с витриной ). Как я мог это сделать? 

<p:selectOneMenu id="mySOMId" value="#{localeBean.locale}" var="mySOMVar" converter="#{localeConverter}" >
    <f:selectItems 
        value="#{myBean.locales}" 
        var="localeSIVar"
        itemLabel="#{localeSIVar.language}" 
        itemValue="#{localeSIVar}" />
    <p:column style="text-align: center;" >
        <h:graphicImage library="default" height="20" name="img/#{mySOMVar.language}.svg" />
    </p:column>
</p:selectOneMenu>

Я вижу, что f:selectItems имеет атрибут itemLabelEscaped, который я мог бы использовать для вывода тега <img> в itemLabel, но я не знаю что бы я на его поставил src.

Спасибо

1 Ответ

5 голосов
/ 18 июня 2020

Вы можете использовать синтаксис #{resource['library:name']} для печати URL-адреса ресурса, как указано в Как ссылаться на CSS / JS / ресурс изображения в шаблоне Facelets?

Итак, учитывая, что вы действительно хотели использовать 

<h:graphicImage library="default" height="20" name="img/#{localeSIVar.language}.svg" />

в itemLabel, а атрибут itemLabelEscaped <f:selectItems> установлен на true, вы можете использовать следующий синтаксис как значение itemLabel: 

itemLabel="&lt;img height='20' src='#{resource['default:img/' += localeSIVar.language += '.svg']}' /&gt;"

Примечания:

  • Вы можете использовать только обычный HTML, а не компоненты JSF.
  • Для улучшения читаемости , лучше использовать одинарные кавычки в качестве разделителей значений атрибутов внутри простого HTML, которое, в свою очередь, объявлено как атрибут, окруженный двойными кавычками. Конечно, вы также можете использовать &quot; вместо этих одинарных кавычек.
  • Одиночные кавычки продолжают нормально работать в выражении EL, как показано выше, без необходимости повторного экранирования. Вы даже можете использовать двойные кавычки в выражении EL, но выделение синтаксиса в редакторах кода здесь может потерпеть неудачу, что может вызвать ненужную путаницу.
  • Оператор += появился в новой версии с EL 3.0; Если вы все еще используете старую версию EL, перейдите к Как объединить строку в EL? , чтобы узнать об альтернативных способах объединения строки в EL (а затем повторно использовать ее в качестве переменной).
...