Tuesday, May 19, 2015

Monday, May 18, 2015

Autocompletado con Primefaces + JPA

Autocompletado con Primefaces + JPA
Tabla: Nivel1

Con NetBeans IDE generamos los Entity
Categories: Persistence    File Types: Entity Classes from Database


Luego generar los EJB


Editamos Nivel1Facade.java y agregar los métodos findByIdNivel1Like(), findByNombreLike().

public List<Nivel1> findByIdNivel1Like(String idnivel1) {

              Query query = em.createQuery("SELECT n FROM Nivel1 n WHERE lower(n.idnivel1) like :idnivel1");
                   idnivel1 = "%" + idnivel1.trim() + "%";
       return query.setParameter("idnivel1", idnivel1).getResultList();
     
}

    public List<Nivel1> findByNombreLike(String nombre) {

              Query query = em.createQuery("SELECT n FROM Nivel1 n WHERE lower(c.nombre) like :nombre");
                   nombre = "%" + nombre.trim() + "%";
       return query.setParameter("nombre", nombre).getResultList();
     
    
   }


Editar Nivel1SearchController.java

Agregar los métodos complete(),  completeNombre()

public List<Nivel1> complete(String query) { List<Nivel1> suggestions = new ArrayList<>(); try { query = query.trim(); nivel1Facade.findByIdNivel1Like(query.toLowerCase()); nivel1List.stream().forEach((p) -> { suggestions.add(p); }); } catch (Exception e) { JSFUtil.addErrorMessage("complete() "+e.getLocalizedMessage()); } return suggestions; } public List<Nivel1> completeNombre(String query) { List<Nivel1> suggestions = new ArrayList<>(); try { query = query.trim(); nivel1Facade.findByNombreLike(query.toLowerCase()); nivel1List.stream().forEach((p) -> { suggestions.add(p); }); } catch (Exception e) { JSFUtil.addErrorMessage("completeNombre() "+e.getLocalizedMessage()); } return suggestions; }

En la página .xhtml
   <p:outputLabel  rendered="#{!nivel1Controller.nuevoregistro}" value="#{msg.idnivel1}" for="idnivel1" />
                               <p:autoComplete size="45"   rendered="#{!nivel1Controller.nuevoregistro}" value="#{nivel1Controller.selected}"  
                                                 completeMethod="#{nivel1SearchController.complete}"  
                                                 var="p"  
                                                 itemLabel="#{p.idnivel1}"  itemValue="#{p}" converter="nivel1Converter" forceSelection="true">

                                   <p:ajax event="itemSelect" listener="#{nivel1Controller.handleSelect}" update=":form,:form:growl" />  
                                   <f:facet name="itemtip">
                                       <h:panelGrid columns="2" cellpadding="5">
                                           <h:outputText value="#{p.nombre}" />
                                       </h:panelGrid>
                                   </f:facet>
                               </p:autoComplete>



primefaces growl con bootfaces

Para mostrar el componente <p:growl> de Primefaces si utilizamos en conjunto con bootfaces y deseamos evitar que el growl se muestre sobrepuesto en el menu, incluimos en nuestro template o archivo css

  .ui-growl { right: 50%; top: 20%; }





Saturday, May 09, 2015

Crear Submenú bootfaces

Crear Submenú bootfaces

Basado en el ejemplo "Multi level dropdown menu BS3" cuya fuente es 

A continuación se muestra como integrarlo con bootfaces y primefaces.


Para crear submenus con bootfaces seguimos el siguiente procedimiento

  • Editar template.xhtml  y en la sección <h:header> y dentro de   <style type="text/css">
t.png
copiar

.dropdown-submenu {
   position: relative;
}

.dropdown-submenu>.dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   margin-left: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
   display: block;
}

.dropdown-submenu>a:after {
   display: block;
   content: " ";
   float: right;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   border-width: 5px 0 5px 5px;
   border-left-color: #ccc;
   margin-top: 5px;
   margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
   border-left-color: #fff;
}

.dropdown-submenu.pull-left {
   float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
   left: -100%;
   margin-left: 10px;
   -webkit-border-radius: 6px 0 6px 6px;
   -moz-border-radius: 6px 0 6px 6px;
   border-radius: 6px 0 6px 6px;
}



  • En la página de Menú
<b:dropMenu rendered="#{loginBean.logeado}" value="#{men['menu.ingresos']}" >
                   <b:navLink value="#{men['menu.nivel1']}"  href="/faces/page/nivel1/nivel1.xhtml"/>

                   <li class="dropdown-submenu">
                       <a tabindex="-1" href="#">Regimen</a>
                       <ul class="dropdown-menu">

                            <b:navLink value="#{men['menu.nivel2']}"  href="/faces/page/nivel1/nivel2.xhtml"/>
                           <li class="dropdown-submenu">
                               <a href="#">Otros</a>
                               <ul class="dropdown-menu">                                 
                                    <b:navLink value="#{men['menu.nivel4']}"  href="/faces/page/nivel4/nivel4.xhtml"/>
                                    <b:navLink value="#{men['menu.nivel5']}"  href="/faces/page/nivel5/nivel5.xhtml"/>
                               </ul>
                           </li>
                            <b:navLink value="#{men['menu.nivel3']}"  href="/faces/page/nivel3/nivel3.xhtml"/>
                     
                       </ul>
                   </li>
               </b:dropMenu>