top.xhtml
En el top.xhtml
Agregamos los componentes y los principales serian
<p:remoteCommand
websocketidTopText
websocketIdToptext2
<label id="websocketidTopText" >0</label>
<li class="header">You have <label id="websocketidTopText2" >0</label> notifications</li> Que son los que actualizamos desde el template.xhtml
<li class="dropdown notifications-menu">
<h:form id="topForm">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">
<label id="websocketidTopText" >0</label>
</span>
</a>
<ul class="dropdown-menu">
<li class="header"> you have <label id="websocketidTopText2" >0</label> notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<p:outputLabel id="topLabel1"
value="Value: #{pushSocket.value}"/>
<p:remoteCommand
name="myFormRC"
update=":topForm:topLabel1, :topForm:growl_top"
actionListener="#{pushSocket.myAction2()}"
process="@all">
</p:remoteCommand>
<p:growl id="growl_top" globalOnly="true" life="5000" showDetail="true" />
</li><!-- end notification -->
</ul>
</li>
<li class="footer">
<p:commandLink value="Ver" action="/pages/rol/list.xhtml"/>
</li>
</ul>
</h:form>
</li>
Código completo
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui">
<ui:remove>
<!--
Hint to editors: The menus follow the Chicago style of capitalization. Please capitalize everything but the "smaller" words.
-->
</ui:remove>
<b:navBar brand="#{msg['application.shorttitle']}"
brandHref="" inverse="true"
fixed="top">
<b:container>
<b:navbarLinks>
<b:navLink />
<b:navLink />
<b:navbarLinks>
<b:navLink outcome="/pages/index" value="#{msg['menubar.home']}" iconAwesome="home" />
</b:navbarLinks>
<b:dropMenu value="#{msg['menubar.solicitud']}" rendered="#{p:ifAnyGranted('ADMINISTRADOR, DOCENTE, ADMINISTRATIVO, SECRETARIA')}">
<b:navLink value="#{msg['menu.solicituddocentemanual']}" rendered="#{p:ifGranted('ADMINISTRADOR')}" outcome="/pages/solicitudmanualdocente/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.solicitudadministrativomanual']}" rendered="#{p:ifGranted('ADMINISTRADOR')}" outcome="/pages/solicitudmanualadministrativo/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.crearsolicitud']}" rendered="#{p:ifGranted('DOCENTE')}" outcome="/pages/solicituddocente/new" iconAwesome="fa-pencil-square-o" />
<b:navLink value="#{msg['menu.misolicituddocente']}" rendered="#{p:ifGranted('DOCENTE')}" outcome="/pages/solicituddocente/list" iconAwesome= "fa-book" />
<b:navLink value="#{msg['menu.calendariodocente']}" rendered="#{p:ifGranted('DOCENTE')}" outcome="/pages/solicituddocente/calendario" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.solicitudadministrativo']}" rendered="#{p:ifGranted('ADMINISTRATIVO')}" outcome="/pages/solicitudadministrativo/list" iconAwesome= "fa-calendar-o" />
</b:dropMenu>
<b:dropMenu value="#{msg['menubar.calendario']}" rendered="#{p:ifGranted('ADMINISTRADOR')}">
<b:navLink value="#{msg['menu.viajes']}" outcome="/pages/calendario/viaje" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.solicitudes']}" outcome="/pages/calendario/solicitudes" iconAwesome= "fa-calendar-o" />
</b:dropMenu>
<b:dropMenu value="#{msg['menubar.viaje']}" rendered="#{p:ifGranted('ADMINISTRADOR')}">
<b:navLink value="#{msg['menu.viajes']}" outcome="/pages/viaje/list" iconAwesome= "fa-book" />
<b:navLink/>
</b:dropMenu>
<b:dropMenu value="#{msg['menubar.reportes']}" rendered="#{p:ifGranted('ADMINISTRADOR')}">
<b:navLink value="#{msg['menu.solicitudpendiente']}" outcome="/pages/reportes/solicitudpendiente" iconAwesome= "fa-battery-empty" />
<b:navLink value="#{msg['menu.viajesporvehiculo']}" outcome="/pages/reportes/viajeporvehiculo" iconAwesome= "fa-car" />
<b:navLink value="#{msg['menu.viajesporconductor']}" outcome="/pages/reportes/viajeporconductor" iconAwesome= "fa-drivers-license-o" />
<b:navLink value="#{msg['menu.viajespendientes']}" outcome="/pages/reportes/viajependiente" iconAwesome= "fa-book" />
<b:navLink/>
<b:navLink value="#{msg['menu.viajesrealizados']}" outcome="/pages/reportes/viajerealizado" iconAwesome= "fa-drivers-license-o" />
<b:navLink value="#{msg['menu.viajessinconductor']}" outcome="/pages/reportes/viajesinconductor" iconAwesome= "fa-child" />
<b:navLink value="#{msg['menu.viajessinsolicitud']}" outcome="/pages/reportes/viajesinsolicitud" iconAwesome= "fa-unlink" />
<b:navLink/>
<b:navLink value="#{msg['menu.kmrecorridosporvehiculo']}" outcome="/pages/reportes/kmrecorridosporvehiculo" iconAwesome= "fa-map-signs" />
<b:navLink value="#{msg['menu.kmrecorridosporconductor']}" outcome="/pages/reportes/kmrecorridosporconductor" iconAwesome= "fa-map-signs" />
<b:navLink/>
<b:navLink value="#{msg['menu.programacionflota']}" outcome="/pages/reportes/programacionflota" iconAwesome= "fa-bus" />
</b:dropMenu>
<b:dropMenu value="#{msg['menubar.registros']}" rendered="#{p:ifGranted('ADMINISTRADOR')}">
<b:navLink value="#{msg['menu.vehiculo']}" outcome="/pages/vehiculo/list" iconAwesome= "fa-car" />
<b:navLink value="#{msg['menu.vehiculocambiarplaca']}" outcome="/pages/vehiculo/cambiarplaca" iconAwesome="fa-pencil-square-o" />
<b:navLink />
<b:navLink value="#{msg['menu.conductor']}" outcome="/pages/conductor/list" iconAwesome= "fa-drivers-license-o" />
<b:navLink value="#{msg['menu.cambiarcedulaconductor']}" outcome="/pages/conductor/cambiarcedula" iconAwesome="fa-pencil-square-o" />
<b:navLink/>
<b:navLink value="#{msg['menu.estatus']}" outcome="/pages/estatus/list" iconAwesome="fa-address-card " />
<b:navLink value="#{msg['menu.tipovehiculo']}" outcome="/pages/tipovehiculo/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.tiposolicitud']}" outcome="/pages/tiposolicitud/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.sugerencia']}" outcome="/pages/sugerencia/list" iconAwesome= "fa-comments-o" />
<b:navLink/>
<b:navLink value="#{msg['menu.tipogira']}" outcome="/pages/tipogira/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.unidad']}" outcome="/pages/unidad/list" iconAwesome= "fa-calendar-o" />
<b:navLink/>
<b:navLink value="#{msg['menu.semestre']}" outcome="/pages/semestre/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.facultad']}" outcome="/pages/facultad/list" iconAwesome= "fa-calendar-o" />
<b:navLink value="#{msg['menu.carrera']}" outcome="/pages/carrera/list" iconAwesome= "fa-calendar-o" />
</b:dropMenu>
<b:dropMenu value="#{msg['menubar.administracion']}" rendered="#{p:ifGranted('ADMINISTRADOR')}">
<b:navLink value="#{msg['menu.usuario']}" outcome="/pages/usuario/list" icon="user" />
<b:navLink value="#{msg['menu.rol']}" outcome="/pages/rol/list" iconAwesome="desktop" />
<b:navLink value="#{msg['menu.emailmaster']}" outcome="/pages/emailmaster/list" iconAwesome="fa-twitch" />
</b:dropMenu>
<b:dropMenu value="#{app['button.logout']}" >
<b:navLink value="#{msg['menu.cambiarpassword']}" outcome="/pages/password/change" iconAwesome="fa-expeditedssl" />
<h:form id="navbartopform">
<p:commandLink class="btnn btnn-primary login-btn" value="#{app['button.logout']}" action="#{loginController.doLogout()}"/>
</h:form>
</b:dropMenu>
<li class="dropdown notifications-menu">
<h:form id="topForm">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">
<label id="websocketidTopText" >0</label>
</span>
</a>
<ul class="dropdown-menu">
<li class="header"> you have <label id="websocketidTopText2" >0</label> notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<p:outputLabel id="topLabel1"
value="Value: #{pushSocket.value}"/>
<p:remoteCommand
name="myFormRC"
update=":topForm:topLabel1, :topForm:growl_top"
actionListener="#{pushSocket.myAction2()}"
process="@all">
</p:remoteCommand>
<p:growl id="growl_top" globalOnly="true" life="5000" showDetail="true" />
</li><!-- end notification -->
</ul>
</li>
<li class="footer">
<p:commandLink value="Ver" action="/pages/rol/list.xhtml"/>
</li>
</ul>
</h:form>
</li>
</b:navbarLinks>
</b:container>
</b:navBar>
</ui:fragment>
Last updated
Was this helpful?