Tallercm
  • Introduction
  • Introduccion
  • Capitulo 1- EJB MongoDB
    • Capitulo 1 EJB
      • Instalar MongoDB
      • Proyecto EJB
      • Agregar Dependencias
      • MongoClientProvider
      • Enity
      • Facade
      • Converter
      • DataModel
      • Distribuir el EJB
  • Capitulo 2 Proyecto Web
    • Capitulo 2 Proyecto JavaEE
      • Crear proyecto
      • Dependencias
      • Archivo Properties
      • Crear el Template
      • top
      • cambiar Logo
      • left
      • footer
      • template
      • web.xml
      • ejemplo
      • index
      • Capitulo 4. Login
        • paquete util
        • login Controller
        • login.xhtml
  • Capitulo 3 Crud
    • Capitulo 3 CRUD
      • Interfaces
      • Controller
      • Pagina create
      • Pagina list
      • Pagina View
      • Reporte
  • Capitulo 4 Reportes
    • Capitulo 4 Reportes
      • plugin iReport
      • Crear reporte
  • Capitulo 5. Embebidos Referenciados
    • Capitulo 5. Documento Embebido
Powered by GitBook
On this page
  • Cambiar el logo en el menu left
  • El nombre del usuario logeado
  • Codigo completo

Was this helpful?

  1. Capitulo 2 Proyecto Web
  2. Capitulo 2 Proyecto JavaEE

left

Previouscambiar LogoNextfooter

Last updated 6 years ago

Was this helpful?

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>