left

La pagina left.xhtml define el menu de la izquierda en el template

Alli definimos el menú, mostramos el nombre del usuario logeado y logo.

Cambiar el logo en el menu left

En la parte superior dentro de <div class="user-panel">

localizamos el componente <h:graphicImage y en name=" " inidcamos el nuevo nombre de la imagen que se usa como logo.

<div class="user-panel">
  <div class="pull-left image">
      <h:graphicImage library="img" name="bujias.jpg" class="img-circle" alt="User Image"/>
   </div>

El nombre del usuario logeado

En la sección <div class="pull-left info"> indicamos el nombre del usuario

 <div class="user-panel">
        <div class="pull-left image">
            <h:graphicImage library="img" name="bujias.jpg" class="img-circle" alt="User Image"/>
        </div>
        <div class="pull-left info">
            <p>#{loginController.usuario.cedula.nombre}</p>
            <!-- Status -->
            <a href="#"><i class="fa fa-circle text-success"></i> </a>
        </div>
    </div>

Codigo completo

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:p="http://primefaces.org/ui">

    <div class="user-panel">
        <div class="pull-left image">
            <h:graphicImage library="img" name="bujias.jpg" class="img-circle" alt="User Image"/>
        </div>
        <div class="pull-left info">
            <p>#{loginController.usuario.cedula.nombre}</p>
            <!-- Status -->
            <a href="#"><i class="fa fa-circle text-success"></i> </a>
        </div>
    </div>
    <h:form id="left" rendered="#{loginController.loggedIn}">
        <!-- Sidebar Menu -->
        <ul class="sidebar-menu">
            <li class="header">#{msg['menu.menu']}</li>

            <li class="treeview">
                <a href="#"><i class="fa fa-link"></i> <span>#{msg['menubar.ordentrabajo']}</span> <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">

                    <li> 
                        <p:link value="#{msg['menu.solicitar']}"  outcome="/pages/ordentrabajo/solicitar"/>
                    </li>   
                    <li> 
                        <p:link value="#{msg['menu.editservicios']}" outcome="/pages/ordentrabajo/editordenservicios"/>
                    </li>   

                    <li> 
                        <p:link value="#{msg['menu.ordenes']}" outcome="/pages/ordentrabajo/listordenes"/>
                    </li>   

                </ul>
            </li>
            <li class="treeview">
                <a href="#"><i class="fa fa-link"></i> <span>#{msg['menubar.registros']}</span> <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                    <li> 
                        <p:link value="#{msg['menu.vehiculos']}" outcome="/pages/vehiculos/list"/>
                    </li> 
                    <li> 

                        <p:link value="#{msg['menu.mecanicos']}" outcome="/pages/mecanicos/list"/>
                    </li> 
                    <li> 

                        <p:link value="#{msg['menu.tipovehiculo']}" outcome="/pages/tipovehiculo/list"/>
                    </li> 

                </ul>
            </li>
            <li class="treeview">
                <a href="#"><i class="fa fa-link"></i> <span>#{msg['menubar.reportes']}</span> <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                    <li> 
                        <p:link value="#{msg['menu.clientes']}" outcome="/pages/clientes/list"/>
                    </li>   

                </ul>
            </li>
            <li class="treeview">
                <a href="#"><i class="fa fa-link"></i> <span>#{msg['menubar.agenda']}</span> <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                    <li> 
                        <p:link value="#{msg['menu.agenda']}" outcome="/pages/agenda/create"/>
                    </li>   

                </ul>
            </li>
        </ul><!-- /.sidebar-menu -->
    </h:form>

</ui:composition>

Last updated