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