How to change PrimeFaces submenu default icons

Question

What is the method of adding my own custom icons to the submenu name area in a panelMenu in PF 3.5?

This is the example given on the official documentation web page:

I have to remove the small arrows and replace them with other images. So far, I have understood that the arrows are placed by the primefaces.js (which comes in the PF JAR file). What is the method of replacing them through java? As I am generating a dynamic menu, not a static one. I would like something like this:

I have tried

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

But this changes it for the items INSIDE the submenu. e.g. Save and Update. I am asking for the headings or group names, "Ajax Menuitems", "Non-Ajax Menuitem" etc.

did you try `.mainPageIcon { background: url(/images/motorStop.png) no-repeat; height: 16px; width: 16px; } ` — Yagami Light, Nov 03 '16 at 12:14
I am using ``, not ``. Also, the menu is generated dynamically in Java. In the JSF page, I use only . — , Nov 03 '16 at 12:20

Jasper de Vries · Accepted Answer · 2016-11-04T11:13:16.357

Disclaimer: I've tested this with PrimeFaces 6.0, but this will most likely also work with 3.5.

The easiest way to do so (in my opinion) is using CSS. If you inspect the arrow using your browsers debugging tools you will find that the image comes from a background sprite at a specific position.

To create a more specific rule to set your icon it's best to add a style class to your submenu:

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

or in Java:

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

Now you can use that class to create your CSS rules (assuming you've created a sprite):

.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 */
}

Adding the styleClass instead of icon worked. I will upload the solution that worked for me soon. Thanks! — , Nov 04 '16 at 11:34

score 0 · Answer 2 · edited May 23 '17 at 11:53

As suggested by @Jasper, I set the styleClass attribute for the submenu and it worked. Here is the code for my 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";

Creating a new submenu and adding styleClass:

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

Adding the submenu to the panelMenu:

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

Creating a new item to go inside the 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);
}

The result:

This method works much better than the first method I tried. For that, I added a custom PanelMenu renderer as explained here: Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu. It is a lot more work while requiring the same icon styling classes.

If the answer by @Jasper-de-vries helped, then please accept his answer. — Kukeltje, Nov 04 '16 at 13:51

score -1 · Answer 3 · edited May 23 '17 at 12:33

-1

to change the icon you have two solutions

First solution

You can look to the Ui-Icon we site and choose the icon that you want to use Icons Site

Second solution

you can use your own icon using css

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

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

for Java solution

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

You can read more Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu

edited May 23 '17 at 12:33

Community

1
1

answered Nov 03 '16 at 12:18

Yagami Light

1,756
4
19
39

1

This changes it for the items INSIDE the submenu. e.g. Save and Update in the picture have their own icons, whatever I want them to have. But I am asking for the headings or group names, "Ajax Menuitems", "Non-Ajax Menuitem" etc. – Nov 03 '16 at 12:22
Have to do it in the Java code, since the menu is generated dynamically. In the JSF page, I use only . I can add attributes here, but every item needs its own icon. So it has to be done during menu generation. – Nov 03 '16 at 12:27
did you try `ImageIcon imageIcon=new ImageIcon(ImageIO.read(getClass().getResourceAsStream("/Project1/rawaz/new.gif")));` and `item3.setIcon("imageIcon");` – Yagami Light Nov 03 '16 at 12:31
Yes. `item3.setIcon("imageIcon");` works only for the elements inside the submenu. – Nov 03 '16 at 12:35
did you try to change it with solution 1 – Yagami Light Nov 03 '16 at 12:38
1

Yes.Only the elements inside the submenu get the icon. The main elements like "Ajax Menuitems" do not get an icon still. – Nov 03 '16 at 13:04
Yes. Tried that as well. But I donot see how that can help here, since the icon name has to be set in Java, not CSS. – Nov 03 '16 at 17:12
did you see this http://stackoverflow.com/questions/38827309/are-user-icons-supported-on-root-submenus-in-primefaces-6-0-panelmenu – Yagami Light Nov 03 '16 at 19:14

How to change PrimeFaces submenu default icons

3 Answers3

Linked