如何更改 PrimeFaces 子菜单默认图标

Question

在PF 3.5中panelMenu的子菜单名称区域添加我自己的自定义图标的方法是什么？

这是官方文档网页上给出的示例：

我必须删除小箭头并用其他图像替换它们。到目前为止，我已经了解到箭头是由 primefaces.js（它位于 PF JAR 文件中）放置的。通过java替换它们的方法是什么？因为我正在生成一个动态菜单，而不是静态菜单。我想要这样的东西：

我试过了

MenuItem item = new MenuItem();
item.setIcon("ui-icon-print");

但这会改变子菜单内的项目。例如保存并更新。我要求提供标题或组名、“Ajax Menuitem”、“Non-Ajax Menuitem”等。

Answer 1

改变图标有两种解决方案

第一个解决方案

您可以查看我们网站的Ui-Icon并选择您要使用的图标Icons Site

第二种解决方案

您可以使用 css 使用自己的图标

.mainPageIcon {
background: url(/images/image.png) no-repeat;
height: 16px;
width: 16px;
}

<p:panelMenu style="width:300px" icon="mainPageIcon ">
 ...
</p:panelMenu >

Java 解决方案

MenuItem item3 = new MenuItem();
ImageIcon imageIcon = new ImageIcon(ImageIO.read(getClass().getResourceAsStream("/Project1/rawaz/new.gif")));
item3.setIcon("imageIcon");

您可以阅读更多Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu

Answer 2

正如@Jasper 所建议的，我为子菜单设置了styleClass 属性并且它起作用了。这是我的 xhtml 的代码：

<div class="">
    <h:form>
        <p:panelMenu model= "#{menuBean.getModel()}" type="tiered">
        </p:panelMenu>
        <p:spacer height="10"></p:spacer>
    </h:form>

</div>

CSS：

.icon-1 > h3 > span{
    background-image: url(../resources/images/icon_1.png);
    margin: 0px 4px 0px 0px;
    width: 25px;
    height: 25px;
}

.icon-2 > h3 > span {
    background-image: url(../resources/images/icon_2.png);
    margin: 0px 4px 0px 0px;
    width: 25px;
    height: 25px;   
}

Java：

List<Items> list = //map of items to be added to the panelMenu with a parent-child hierarchy.
String label = "SubMenu 1";
String icon = "icon-1";

创建一个新的子菜单并添加styleClass：

Submenu submenu = new Submenu();
submenu.setLabel(label);
//submenu.setIcon(icon);
submenu.setStyleClass(icon);

将子菜单添加到 panelMenu：

((MenuModel) container).addSubmenu(submenu);

创建一个进入子菜单的新项目：

MenuItem item = new MenuItem();
item.setValue(label);
item.setTitle(label);
item.setIcon(icon);
if (container instanceof MenuModel) {
    ((MenuModel) container).addMenuItem(item);
} else if (container instanceof Submenu) {
    ((Submenu) container).getChildren().add(item);
}

结果：

这种方法比我尝试的第一种方法效果好得多。为此，我添加了一个自定义 PanelMenu 渲染器，如下所述：Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu。当需要相同的图标样式类时，需要做更多的工作。

Answer 3

免责声明：我已经使用 PrimeFaces 6.0 对此进行了测试，但这很可能也适用于 3.5。

最简单的方法（在我看来）是使用 CSS。如果您使用浏览器调试工具检查箭头，您会发现图像来自特定位置的背景精灵。

要创建更具体的规则来设置图标，最好将样式类添加到子菜单：

<p:submenu label="Ajax Menuitems" styleClass="myIcon">

或在 Java 中：

DefaultSubMenu defaultSubMenu = new DefaultSubMenu("Ajax Menuitems");
defaultSubMenu.setStyleClass("myIcon");

现在您可以使用该类来创建您的 CSS 规则（假设您已经创建了一个精灵）：

.myIcon .ui-icon.ui-icon-triangle-1-e {
    background-image: url('pathToYourSprite.svg');
    background-position: 0 0; /* closed position */
}
.myIcon .ui-icon.ui-icon-triangle-1-s {
    background-image: url('pathToYourSprite.svg');
    background-position: 0 0; /* opened position */
}