Babylon Menu vs. PF Menu Bar Widget

Post Reply
michaelgeorge
Posts: 5
Joined: 25 May 2016, 18:01

02 May 2019, 17:58

I am able to add an options facet to the p:menubar widget (which doesn't look as good as the pb:menu), but I cannot do so with the pb:menu. Does the pb:menu widget support the options facet?

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

06 May 2019, 11:21

Babylon menu is not a PrimeFaces component. It is a special component to use on Babylon and unfortunately, it doesn't support f:facet etc features of p:* components.

For your issue, please make the following changes;

Code: Select all

//BabylonMenuRenderer.java
public class BabylonMenuRenderer extends BaseMenuRenderer {

    @Override
    protected void encodeMarkup(FacesContext context, AbstractMenu abstractMenu) throws IOException {
        BabylonMenu menu = (BabylonMenu) abstractMenu;
        ResponseWriter writer = context.getResponseWriter();
        ...
        
        if(menu.getElementsCount() > 0) {
            encodeElements(context, menu, menu.getElements(), true);
        }
        
        /************* Please add the following lines (Line 51) **********/
        UIComponent optionsFacet = menu.getFacet("options");
        if (optionsFacet != null) {
            writer.startElement("li", null);
            writer.writeAttribute("class", "ui-babylon-menu-options", null);
            writer.writeAttribute("role", "menuitem", null);
            optionsFacet.encodeAll(context);
            writer.endElement("li");
        }
        /***************************************************************/
        
        writer.endElement("ul");
    }

Code: Select all

//webapp/resources/sass/overrides/_layout_styles.scss
/* Add your customizations of layout here */
body {
    .layout-wrapper {
        .layout-menu-container {
            .layout-menu {
                .ui-babylon-menu-options {
                    display: none;
                }
            }
        }
 
        &.layout-horizontal {
            .layout-menu-container {
                .layout-menu {
                    .ui-babylon-menu-options {
                        display: inline-block;
                        float: right;
                    }
                    @media screen and (max-width: 896px) {
                        .ui-babylon-menu-options {
                            float: none;
                        }
                    }
                }
            }
        }
    }
}
Then, please provide new css files using sass command.

Exp;

Code: Select all

<pb:menu>
    ....
    <f:facet name="options">
            <p:inputText />
            <p:commandButton value="Test"/>
        </f:facet>
</pb:menu>
Best Regards,

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest