gpt4 book ai didi

jsf - 带有图标的 PrimeFaces SelectOneMenu(自定义 f :selectItems)

转载 作者:行者123 更新时间:2023-12-05 04:14:41 25 4
gpt4 key购买 nike

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

渲染器应该首先渲染图标,然后显示图标的名称。可以在此处找到一个类似的示例,但它是专门为 BootStrap 实现的:https://mjolnic.com/fontawesome-iconpicker/

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

Unfortunately, the custom columns just do not get rendered. The p:selectOneMenuappears but is rendered as by default.

My picker xhtml page looks as follows:

<!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:buttonp:commandButtonp:commandLink) 实现我的目标?

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

附言:在 WildFly 9.0.2 上使用 PrimeFaces 5.3、JSF 2.2 和 Mojarra

最佳答案

为了简单和可重用性,我决定包装 String s 在 Icon类而不是遵循实现不同的 Renderer BalusC 在解决方法中建议的类 (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类(class)。
  • 图标现在呈现在 <i/> 中元素。

另请注意 customContent 的重要性和作用 SelectOneMenuRenderer.encodePanel(...) 中的变量指示您需要 var 的方法p:selectOneMenu 上的值直接(不在 <f:selectItems/> 元素中!)否则渲染器将无法识别有自定义内容,因为它不评估 <f:selectItems/> var属性。

关于jsf - 带有图标的 PrimeFaces SelectOneMenu(自定义 f :selectItems),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34656127/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com