Question

我正在尝试在p:selectOneMenu组件中显示所有可用的FontAwesome图标。

渲染器应首先渲染图标，然后显示图标的名称。可以在此处找到类似的示例，但特别针对BootStrap实现：https://mjolnic.com/fontawesome-iconpicker/

 ----------------------------------
|- ICON - | Icon name              |
 ----------------------------------

不幸的是，自定义列不会被渲染。 p:selectOneMenu出现，但默认情况下呈现为。

我的选择器xhtml页面如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"> 

<h:head></h:head> 
<body>
    <p:panel>
        <h:form id="iconPicker">
            <p:selectOneMenu id="iconSelectOneMenu"
            value="#{iconController.availableIconStrings}">
                <f:selectItem itemLabel="Choose icon"
                noSelectionOption="true" />
                <f:selectItems
                value="#{categoryController.availableIconStrings}"
                var="_icon" itemValue="#{_icon}"
                itemLabel="#{_icon}" />
                <p:column>
                    <p:button id="iconButton" icon="#{_icon}" />
                </p:column>
                <p:column>
                    <h:outputText value="#{_icon}" />
                </p:column>
            </p:selectOneMenu>
        </h:form>
    </p:panel>
</body> 
</html>

IconController类：

public class IconController implements Serializable {

    private List<String> availableIconStrings;

    public IconController() { }

    @PostConstruct
    public void init() {
        availableIconStrings = new ArrayList<>();
        availableIconStrings.addAll(Arrays
                .asList("fa-adjust,fa-adn,fa-align-center,fa-align-justify,fa-align-left,"
                        + "fa-align-right,fa-ambulance,fa-anchor,fa-android,fa-angellist,"
                        + "fa-angle-double-down,fa-angle-double-left,fa-angle-double-right,"
                        + "fa-angle-double-up,fa-angle-down,fa-angle-left,fa-angle-right"
                        // Shortened list
                        .split(",")));
    }

    public List<String> getAvailableIconStrings() {
        return availableIconStrings;
    }

    public void setAvailableIconStrings(List<String> availableIconStrings) {
        this.availableIconStrings = availableIconStrings;
    }
}

如您所见，我正在尝试使用p:button渲染图标。我是否正确理解我需要一个能够显示图标的PrimeFaces组件（例如p:button，p:commandButton，p:commandLink）以实现我的目标？

感谢任何帮助。非常感谢。

P.S。：在WildFly 9.0.2上使用PrimeFaces 5.3，JSF 2.2和Mojarra

Answer 1

为了简单和可重用，我决定将String包装在Icon类中，而不是按照BalusC在解决方法中建议的那样实现不同的Renderer类（ https://stackoverflow.com/a/32740430/2118909）。

    public class Icon {

    private String fontIconName;

    public Icon(String fontIconName) {
        this.fontIconName = fontIconName;
    }

    public String getFontIconName() {
        return fontIconName;
    }

    public void setFontIconName(String fontIconName) {
        this.fontIconName = fontIconName;
    }
}

JSF页面如下所示：

<p:selectOneMenu id="iconSelectOneMenu"
    value="#{iconController.selectedIcon}" var="_icon" converter="#{iconConverter}">
        <f:selectItem itemLabel="Choose icon"
        noSelectionOption="true" />
        <f:selectItems
        value="#{categoryController.availableIcons}" itemValue="#{_icon}"
        itemLabel="#{_icon.fontIconName}" />

        <p:column>
            <i class="fa fa-fw #{_icon.fontIconName}"/>
        </p:column>
        <p:column>
            <h:outputText value="#{_icon.fontIconName}" />
        </p:column>
    </p:selectOneMenu>

请注意以下事项：

#{iconController.selectedIcon}现在指的是Icon类
#{iconController.availableIcons}现在指的是List<Icon>实例
我为Converter课程添加了Icon。
图标现在以<i/>元素呈现。

请注意customContent方法中var变量的重要性和作用，表明您需要在p:selectOneMenu上直接<f:selectItems/>值（不在<f:selectItems/> var元素！）或渲染器无法识别自定义内容，因为它不会评估uses_allocator<use_arg, allocator<use_arg>>属性。

Answer 2

两件事：

要将p:column与p:selectOneMenu结合使用，您需要在var上声明p:selectOneMenu属性，并在p:column中引用它。可以在PrimeFaces showcase上找到一个示例。

所以你的代码应该是：

<p:selectOneMenu id="iconSelectOneMenu"
        value="#{iconController.availableIconStrings}" var="ic">
            <f:selectItem itemLabel="Choose icon"
            noSelectionOption="true" />
            <f:selectItems
            value="#{categoryController.availableIconStrings}"
            var="_icon" itemValue="#{_icon}"
            itemLabel="#{_icon}" />

            <p:column>
                <p:button id="iconButton" icon="#{ic}" />
            </p:column>
            <p:column>
                <h:outputText value="#{ic}" />
            </p:column>
        </p:selectOneMenu>

现在，您正面临一个错误，因为您使用的List<String>正如this所解释的那样问题：

因此，如果项值是String的实例，则完全忽略通过p:column的自定义内容。

您可以在同一帖子中找到解决方法：https://stackoverflow.com/a/32740430/2118909

PrimeFaces SelectOneMenu带有FontAwesome图标（自定义f：selectItems）

2 个答案: