How to insert an image in a p: menubar

0

could help me with this problem that has been bothering me for a while, I have researched a lot and I have not been able to solve this problem of inserting an image inside my menu bar, I share the image of how the bar looks at this moment and the code, I'd appreciate it if you help me.

I was able to solve it below I leave the code solved greetings ...

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns="http://www.w3.org/1999/xhtml">


    <h:form>
        
        <p:menubar  style="background: #333; width: 100%;">
            <p:menuitem>
                <h:graphicImage value="/imgs/Slidenew1.png" style="margin-left: 10px; position: fixed !important;  position: relative;" width="50px" height="70px"></h:graphicImage>
            </p:menuitem>
            <p:submenu label="SIANSA" icon="ui-icon-person" style="width: 110px; color: #fff; position: relative;">
                <p:menuitem value="Perfil" url="#" icon="ui-icon-person" style="color: black;"></p:menuitem>
                <p:menuitem value="Registro de Usuarios" action="#{buttonView.registroUsuarios}" icon="ui-icon-plusthick" style="color: black;" ajax="false"></p:menuitem>
                <p:menuitem value="Salir" action="#{buttonView.buttonExit}" style="color: black;" icon="ui-icon-closethick" ajax="false"></p:menuitem>
            </p:submenu>          
            <p:menuitem value="Segmento Estilos" action="#{buttonView.segmentoEstilos}" style="color: white;" ajax="false"></p:menuitem>
            <p:menuitem value="Segmento Clases" style="color: white;"></p:menuitem>
            <p:submenu label="Consultas" icon="ui-icon-help" style="width: 125px; color: #CCCCCC;">
                <p:menuitem value="General" url="#" style="color: black;"></p:menuitem>
                <p:menuitem value="Por Estilos" url="#" style="color: black;"></p:menuitem>
                <p:menuitem value="Por Clases" url="#" style="color: black;"></p:menuitem>
            </p:submenu>
            <p:menuitem value="Home" action="#{buttonView.buttonAction}" icon="ui-icon-home" style="color: whitesmoke; float: right;" ajax="false" ></p:menuitem>
        </p:menubar> 
    </h:form>
</ui:composition>

Resolved code

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns="http://www.w3.org/1999/xhtml">

<!-- Barra de Navegacion   -->
    <h:form>
        <p:menubar  style="background: #333; width: 1185px; height: 30px;">
            <p:menuitem>
                <h:graphicImage value="/imgs/Slidenew1.png" style="margin-left: 10px; " width="50px" height="70px"></h:graphicImage>
            </p:menuitem>
            <p:submenu label="SIANSA" icon="ui-icon-person" style="width: 110px; color: #fff;">
                <p:menuitem value="Perfil" url="#" icon="ui-icon-person" style="color: black;"></p:menuitem>
                <p:menuitem value="Registro de Usuarios" action="#{buttonView.registroUsuarios}" icon="ui-icon-plusthick" style="color: black;" ajax="false"></p:menuitem>
                <p:menuitem value="Salir" action="#{buttonView.buttonExit}" style="color: black;" icon="ui-icon-closethick" ajax="false"></p:menuitem>
            </p:submenu>          
            <p:menuitem value="Segmento Estilos" action="#{buttonView.segmentoEstilos}" style="color: white;" ajax="false"></p:menuitem>
            <p:menuitem value="Segmento Clases" style="color: white;"></p:menuitem>
            <p:submenu label="Consultas" icon="ui-icon-help" style="width: 125px; color: #CCCCCC;">
                <p:menuitem value="General" url="#" style="color: black;"></p:menuitem>
                <p:menuitem value="Por Estilos" url="#" style="color: black;"></p:menuitem>
                <p:menuitem value="Por Clases" url="#" style="color: black;"></p:menuitem>
            </p:submenu>
            <p:menuitem value="Home" action="#{buttonView.buttonAction}" icon="ui-icon-home" style="color: whitesmoke; float: right;" ajax="false" ></p:menuitem>
        </p:menubar> 
    </h:form>
</ui:composition>
    
asked by julio colmenares 26.06.2017 в 20:01
source

1 answer

0

What do you want to achieve?

Primefaces has a tag to add custom content in the menu bar.

<p:menubar>
    //submenus and menuitems
    <f:facet name="options">
        //custom content
    </f:facet>
</p:menubar>

Is it what you're looking for?

You could also add the image as a menu item:

<p:menuitem>
    <h:link outcome="#">
        <h:graphicImage name="/miImagen.jpg"/>
    </h:link>
</p:menuitem>
    
answered by 26.06.2017 в 20:16