Martes, 15 Julio 2014 01:41

Autocompletar texto con Icefaces (selectinputtext)

Escrito por 
Valora este artículo
(0 votos)

Que tal, despues de un tiempo, sin realizar posts por cuestiones de tiempo, volvemos al  ruedo, en esta ocasión haremos un ejemplo de cómo autocompletar texto en Java (JSF) de la mano del framework Icefaces.  Este Framework atraves de peticiones Ajax al servidor traera nombres de personas coincidentes con lo que tipeamos en un SelectInputText.

Para empezar podemos visitar el post donde nos introducimos a conceptos Sobre Icefaces

Para este posts, suponemos que ya sabemos como crear un proyecto con Icefaces.
Una  vez creado el proyecto, haremos uso de la clase Persona, anteriormente utilizada en otros post, a continuación el código de la misma
 

  1. /**
  2.  *
  3.  * @author RAFAEL
  4.  */
  5. public class Persona {
  6.     private String apellido;
  7. private String nombre;
  8. private String direccion;
  9.  
  10.   public Persona(String apellido, String nombre, String direccion) {
  11.     this.apellido = apellido;
  12.     this.nombre = nombre;
  13.     this.direccion = direccion;
  14.   }
  15.  
  16.     Persona() {
  17.    
  18.     }
  19.   public String getApellido() {
  20.     return apellido;
  21.   }
  22.   public void setApellido(String apellido) {
  23.     this.apellido = apellido;
  24.   }
  25.   public String getDireccion() {
  26.     return direccion;
  27.   }
  28.   public void setDireccion(String direccion) {
  29.     this.direccion = direccion;
  30.   }
  31.   public String getNombre() {
  32.     return nombre;
  33.   }
  34.   public void setNombre(String nombre) {
  35.     this.nombre = nombre;
  36.   }
  37. }
  38.  

Esta clase no es mas que una simple clase que nos representa la Entidad Persona, de una manera sencilla y simplificada para el ejemplo.
Por otra parte tenemos también la clase bean, que nos hara de backbeans para nuestra vista, a continuación el código con líneas comentadas para una mejor comprensión de la misma

  1. import com.icesoft.faces.component.selectinputtext.SelectInputText;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import javax.faces.event.ValueChangeEvent;
  5. import javax.faces.model.SelectItem;
  6.  
  7. /**
  8.  *
  9.  * @author RAFAEL
  10.  */
  11. public class bean {
  12.     private List<SelectItem> posiblespersonas;
  13.     private Persona[] persona = new Persona[]{
  14.         new Persona("Tolaba", "Fabiola", "Paso de Jama"),
  15.         new Persona("Ramos", "Pedro", "Guemes"),
  16.         new Persona("Ortega", "Ariel", "Ledesma"),
  17.         new Persona("Nina", "Juan", "Sta. Barbara"),
  18.         new Persona("Camacho", "Beatriz", "Abra Pampa"),
  19.         new Persona("Gomez ", "Pedro", "San Pedro")};
  20.     private String personaSeleccionada;
  21.     private String labelPersona;
  22.  
  23.     public bean() {
  24.     }
  25.  
  26.     public void autocompletarPersona(ValueChangeEvent event) {
  27.         //Se comprueba la instancia del objeto input
  28.         if (event.getComponent() instanceof SelectInputText) {
  29.             //se extrae la instancia del componente Selectinputtext
  30.             SelectInputText autoComplete = (SelectInputText) event.getComponent();
  31.             //Atraves del evento se extrae lo que se digito en el SelectInputText
  32.             String cadenaDigitada = (String) event.getNewValue();
  33.             //Se añade a la propiedad posiblepersonas lo que devuelve
  34.             //el metodo buscaPersona
  35.             this.posiblespersonas = buscaPersona(cadenaDigitada);
  36.             //en el if se comprueba si existe alguna seleccion
  37.             if (autoComplete.getSelectedItem() != null) {
  38.                 //Se extrae el objeto seleccionado
  39.                 Persona personaSel = (Persona) autoComplete.getSelectedItem().getValue();
  40.                 // a labelPersona la modificamos segun lo seleccionado
  41.                 this.labelPersona = "La persona seleccionada es : " + personaSel.getApellido() + " " + personaSel.getNombre();
  42.             }
  43.         }
  44.     }
  45.  
  46.     public List<SelectItem> buscaPersona(String cadenaDigitada) {
  47.         //inicializamos un objeto del tipo SelectItem
  48.         List<SelectItem> list = new ArrayList<SelectItem>();
  49.         // inicializamos un bucle for para recorrer el objeto persona
  50.         for (Persona p : persona) {
  51.             // preparamos la cadena a comparar y la pasamos a minusculas
  52.             String cadenaPersona = (p.getApellido() + " " + p.getNombre()).toLowerCase();
  53.             cadenaDigitada = cadenaDigitada.toLowerCase();
  54.             //con el metodo indesof del estring verificamos si la
  55.             // cadenaDigitada esta contenida el la cadenaPersona, que con-
  56.             //tiene el apellido y nombre de la Persona
  57.             if (cadenaPersona.indexOf(cadenaDigitada) >= 0) {
  58.                 SelectItem item = new SelectItem(p, p.getApellido() + " " + p.getNombre());
  59.                 list.add(item);
  60.             }
  61.         }
  62.         return list;
  63.  
  64.     }
  65.  
  66.     public Persona[] getPersona() {
  67.         return persona;
  68.     }
  69.  
  70.     public void setPersona(Persona[] persona) {
  71.         this.persona = persona;
  72.     }
  73.  
  74.     public List<SelectItem> getPosiblespersonas() {
  75.         return posiblespersonas;
  76.     }
  77.  
  78.     public void setPosiblespersonas(List<SelectItem> posiblespersonas) {
  79.         this.posiblespersonas = posiblespersonas;
  80.     }
  81.  
  82.     public String getPersonaSeleccionada() {
  83.         return personaSeleccionada;
  84.     }
  85.  
  86.     public void setPersonaSeleccionada(String personaSeleccionada) {
  87.         this.personaSeleccionada = personaSeleccionada;
  88.     }
  89.  
  90.     public String getLabelPersona() {
  91.         return labelPersona;
  92.     }
  93.  
  94.     public void setLabelPersona(String labelPersona) {
  95.         this.labelPersona = labelPersona;
  96.     }
  97. }
  98.  


Y por ultimo nuestra vista, en mi caso estoy utlizando la  vista que me creo por defecto el netbeans,  welcomeICEfaces.xhtml
A continuación el código

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!--
  3.    Document   : welcomeICEfaces
  4.    Created on : 13/08/2011, 21:00:18
  5.    Author     : RAFAEL
  6. -->
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml"
  9.      xmlns:ui="http://java.sun.com/jsf/facelets"
  10.      xmlns:f="http://java.sun.com/jsf/core"
  11.      xmlns:h="http://java.sun.com/jsf/html"
  12.      xmlns:icecore="http://www.icefaces.org/icefaces/core"
  13.      xmlns:ace="http://www.icefaces.org/icefaces/components"
  14.      xmlns:ice="http://www.icesoft.com/icefaces/component"
  15.      >
  16.     <h:head>
  17.         <title>Autocompletar texto-Icefaces-Compujuy</title>
  18.         <link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css"/>
  19.     </h:head>
  20.     <h:body styleClass="ice-skin-rime">
  21.         <h:form id="form">
  22.             <h:outputText value="Autocompletar texto-Icefaces-Compujuy"/>
  23.             <ice:selectInputText id="autocomletaPersona" rows="5" width="350"
  24.                                 value="#{bean.personaSeleccionada}"
  25.                                 valueChangeListener="#{bean.autocompletarPersona}"
  26.                                 listVar="_persona"
  27.                                 listValue="#{bean.posiblespersonas}">
  28.                 <f:facet name="selectInputText">
  29.                     <ice:panelGrid columns="2">
  30.                         <ice:outputText id="apellido" value="#{_persona.apellido}" />
  31.                         <ice:outputText id="nombre" value="#{_persona.nombre}" />
  32.                     </ice:panelGrid>
  33.                 </f:facet>
  34.             </ice:selectInputText>
  35.  
  36.         </h:form>
  37.         <h:outputText value="#{bean.labelPersona}"/>
  38.     </h:body>
  39.     <h:outputStylesheet library="org.icefaces.component.skins" name="rime.css" />
  40. </html>
  41.  

 El componente que utilizamos para el autocompletado es el
<ice:selectInputText >   </ice:selectInputText>
En donde tenemos las siguientes propiedades:
Id: identificación del componente.
rows: la cantidad de filas que nos mostrara el autocompletado
width: ancho de las filas del autocompletado
 value:  indica a que propiedad del backbean esta asociada, en este caso a la propiedad personaSeleccionada del nuestra clase bean.
 valueChangeListener= método que se ejecuta cada vez que se produce un cambio, en este caso se ejecuta el método .autocompletarPersona
 listVar: varialble o alias a usar por el componente.
 listValue:representa a que valor del backbean esta asociado,  esta propiedad con tiene la lista  con las opciones a desplegarse como autocompletado, en este aso corresponde a la lista (List ) posiblespersonas  de nuestra clase bean.
Dentro de nuestro  <ice:selectInputText >   </ice:selectInputText> tenemos
<f:facet name="selectInputText">
                    <ice:panelGrid columns="2">
                        <ice:outputText id="apellido" value="#{_persona.apellido}" />
                        <ice:outputText id="nombre" value="#{_persona.nombre}" />
                    </ice:panelGrid>
                </f:facet>

Atraves del   ice:panelGrid, con dos columnas (columns="2") icefaces nos muestra el despliegue del autocompletado. En este caso mostramos el Apellido y el Nombre  en 2 outputText.
Por otra parte además de esto nesecitaremos nuestro faces-config.xml que queda de la siguiente manera

  1. <?xml version='1.0' encoding='UTF-8'?>
  2. <!-- =========== FULL CONFIGURATION FILE ================================== -->
  3. <faces-config version="2.0"
  4.    xmlns="http://java.sun.com/xml/ns/javaee"
  5.    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  6.    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
  7. <managed-bean>
  8.   <managed-bean-class>bean</managed-bean-class>
  9.   <managed-bean-name>bean</managed-bean-name>
  10.   <managed-bean-scope>session</managed-bean-scope>
  11. </managed-bean>
  12. </faces-config>

Hasta aquí tenemos todo para  ya poder ejecutar nuestro poryecto en donde  realizamos  el autocompletado con  icefaces.
Nuestro árbol de proyecto queda de la siguiente manera

Bien, ahora ejecutamos nuestro proyecto, y si todo lo hicimos bien debemos tener lo siguiente


Acabamos de tipear, en mi caso la letra “t” y me aparecen las personas que contienen esa letra
Hago una selección y el labelPersona me aparece con la cadena “La persona seleccionada es : Tolaba Fabiola”. como lo muestra la imagen


Bien eso es todo por ahora,  espero que haya servido, por dudas, preguntas o sugerencias comenten, si desean el proyecto comenten y en breve lo subire..hasta pronto.yes

Visto 773 veces

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.