Personalizar Template

Enlaces

Iconos

https://fontawesome.com/v4.7.0/icons/

https://www.primefaces.org/showcase/ui/misc/fa.xhtml

Codigos Css de Botones primary

https://bootsnipp.com/snippets/featured/buttons-colors

Componentes:

Dentro de Web-Pages se crean las carpetas layout y resources

Archivo avbravo.css

Personaliza botones y otros componentes de primefaces.

Nota:

.ui-button lo usamos para botones imprimir ya que estos deben evitar el uso de ajax mediante <p:commandButton> en lugar de usar <b:commandButton>

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 02/28/2018, 11:19:25 PM
    Author     : avbravo
*/
/*.someStyleClass .ui-widget-content
{
 background-color: transparent;
}
.myTable td:nth-child(1) {
    width: 20px;
}

.ui-datatable.borderless thead {
  display: none;
}*/


.ui-datatable * {
    /*     background-color: white !important;
         border: 0.1px dotted black !important;
    */
    border-collapse:collapse;width:100%;
    background-color: white !important;

}
/*th, td {
   width: 25%;
   text-align: left;
   vertical-align: top;
}*/

.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer{
    text-align:center;padding:4px 10px;
}
.ui-datatable .ui-datatable-header{
    border-bottom:0px none;
}
.ui-datatable .ui-datatable-footer{
    border-top:0px none;
}



.ui-button.ui-state-default {
    /*background-color: #428bca!important;*/

    border-radius:4px !important;
    border:1px solid #83c41a !important;
    font-size:12px !important;
    padding:6px 18px !important;

    background-color: #F2F5F9 !important;
    border-color: #357ebd !important;
}

.ui-button.ui-state-hover {
    background-color: #d4d0c8!important;
}
.ui-button.ui-state-active {
    background-color: blue !important;
}


.ui-widget-content .ui-datatable-even{
    background: #F2F5F9;
}

.ui-widget-content .ui-datatable-odd{
    background: red;
}
/*.ui-datatable-odd {
    background: #ffffff;
}*/
/*.ui-datatable-odd {
    background: #009900;
}

.ui-datatable-even {
    background: #F2F5F9;
}*/

/*.coloredalert {
    background-color: #9972b5;
    color: #FFFFFF;
}
.coloredred {
    background-color: #720e9e;
    color: #FFFFFF;
}    */

Templates

Los templates se crean dentro de Web-Pages ā†’ layout

Se componen de tres pƔginas:

  • footer.xhtml

  • template.xhtml

  • top.xhtml

footer.xhtml

Genera el pie de las pƔginas.

<?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:b="http://bootsfaces.net/ui">

    <b:navBar brand="#{msg['footer.empresa']}" brandHref="" fixed="bottom">
        <p class="navbar-text pull-right">

              <strong>#{msg['footer.copyright']}<a href="#">#{msg['footer.empresa']}</a>.</strong> 
                          #{msg['footer.derechosreservados']}
        </p>

    </b:navBar>
</ui:fragment>

template.xhml

Es la plantilla que se usarƔ en las pƔginas.

  • En el first agregamos los archivos de propiedades.

  • Agregar<h:outputStylesheet library="css" name="avbravo.css"/>

  • Usar los include para agregar el footer y top.

Indicar las rutas de los paquetes donde se almacena el archivo properties del proyecto actual para la variable msg, y para la variable app, utilizar siempre la ruta de paquetes del proyecto avbravoutils.

<f:loadBundle basename="com.avbravo.store.properties.messages" var="msg" />
<f:loadBundle basename="com.avbravoutils.properties.application" var="app"
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
         <f:facet name="first">
            <f:view locale="#{idiomas.locale}"></f:view>
            <f:loadBundle basename="com.avbravo.store.properties.messages" var="msg" />
            <f:loadBundle basename="com.avbravoutils.properties.application" var="app" />
        </f:facet>
        <title>#{msg['application.shorttitle']}</title>
        <meta name="author" content="Aristides Villarreal" />
        <meta name="description" content="BootsFaces, a powerful JSF framework that takes the best from Bootstrap and jQuery UI to let develop well-designed state-of-the-art next-gen Front-end Enterprise Applications fast and easy supporting HTML5." />
        <meta name="KEYWORDS" content="jsf, bootstrap, framework, java, enterprise, server, faces, jquery, usability, next-gen, web, html5, easy, modern, well-designed, website, state-of-the-art" />
        <meta name="robots" content="index, follow" />
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="revisit-after" content="7 days" />
        <meta name="DISTRIBUTION" content="GLOBAL" />
        <meta http-equiv="PRAGMA" content="NO-CACHE" />
        <meta name="copyright" content="AVBravo" />
        <h:outputStylesheet library="sh" name="css/shCore.css"/>
        <h:outputStylesheet library="sh" name="css/shCoreEclipse.css"/>
         <h:outputStylesheet library="css" name="avbravo.css"/>
                <style>.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}</style>
    </h:head>



    <h:body style="padding-top: 85px;padding-bottom: 85px;" >

        <h:outputScript library="sh" name="js/shCore.js"         target="head"/>
        <h:outputScript library="sh" name="js/shBrushXml.js"     target="head"/>
        <h:outputScript library="sh" name="js/shBrushJava.js"    target="head"/>
        <h:outputScript library="sh" name="js/shBrushGroovy.js"  target="head"/>
        <h:outputScript library="sh" name="js/shBrushJScript.js" target="head"/>
        <script>SyntaxHighlighter.defaults['gutter'] = false;</script>   
        <script>
        if ($.blockUI) {
          $.blockUI.defaults.overlayCSS.opacity=0;
          $.blockUI.defaults.message='<h1><img src="../javax.faces.resource/images/waitcursor.gif.jsf?ln=bsf" /></h1>';
        }
        </script>         
        <ui:insert name="nbtop">
            <ui:include src="/layout/top.xhtml"/>
        </ui:insert>

        <b:container>
            <ui:insert name="content"/>
        </b:container>

        <ui:insert name="nbtop">
            <ui:include src="/layout/footer.xhtml"/>
        </ui:insert>

    </h:body>
</html>

top.xhtml

Es la barra superior donde colocamos las opciones del menĆŗ

<?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="/index" value="#{msg['menubar.home']}" iconAwesome="home" />
                </b:navbarLinks>

                <b:dropMenu value="#{msg['menubar.registros']}" rendered="#{applicationMenu.menuBarRegistros}">

                    <b:navLink  value="#{msg['menu.proveedor']}"  rendered="#{applicationMenu.proveedor.menu}" outcome="/pages/proveedor/list" iconAwesome="fa-briefcase" />
                    <b:navLink />

                    <b:navLink />
                    <b:navLink  value="#{msg['menu.modelo']}"  rendered="#{applicationMenu.modelo.menu}" outcome="/pages/modelo/list" icon="play-circle" />
                </b:dropMenu>
                <b:dropMenu value="#{msg['menubar.reportes']}" rendered="#{applicationMenu.menuBarReportes}">

                </b:dropMenu>

                <b:dropMenu value="#{msg['menubar.administracion']}" rendered="#{applicationMenu.menuBarAdministracion}">
                    <b:navLink value="#{msg['menu.usuario']}" rendered="#{applicationMenu.usuario.menu}" outcome="/pages/usuario/list" icon="user" />
                    <b:navLink value="#{msg['menu.rol']}" rendered="#{applicationMenu.rol.menu}" outcome="/pages/rol/list" iconAwesome="desktop"  />

                </b:dropMenu>
                <b:dropMenu value="#{loginController.usuario.username}" rendered="#{loginController.loggedIn}">
                    <h:form id="navbartopform">
                    <p:commandLink class="btnn btnn-primary login-btn" value="#{app['button.logout']}" action="#{loginController.doLogout()}"/>

                </h:form>
<b:navLink value="#{msg['menu.cambiarpassword']}" rendered="#{loginController.loggedIn}" outcome="/pages/password/change" iconAwesome="fa-expeditedssl"  />
                </b:dropMenu>
            </b:navbarLinks>


        </b:container>
    </b:navBar>

</ui:fragment>
PreviousTemplateNextProperties

Last updated

Was this helpful?