JSF

Autocompletar texto: Ajax y JavaServer Faces

Tomado de: http://www.netbeans.org/kb/docs/web/ajax-textfield.html

En este tutorial se demuestra el uso del componente TextField con funcionalidad Ajax dotada por el proyecto Dynamic Faces. Dynamic Faces, también es conocido como POJC (Plain Old JavaServer Faces Components), es una extensión de la tecnología JavaServer Faces que permite implementar funcionalidad Ajax facilmente. En particular, debe usar el componente “ Ajax Transaction” incluido dentro del proyecto Dynamic Faces, el cual le permite configurar la funcionalidad Ajax en tiempo de diseño. No es una página convensional que de lugar a un submit.

Especificamente, una petición Ajax es enviada cuando el usuario envia un comentario de texto en un text field. La página también utiliza peticiones Ajax para consultar continuamente al servidor la actualización de los comentarios.

Antes de que pueda utilizar los componentes de la libreria Dynamic Faces en su aplicación, debe descargar e instalar la libreria:

  1. En el menú Tools—p lugins

  2. Seleccione el tab de “Available Plugins” y en la caja de texto “ search” escriba las primeras letras del nombre del plugin, por ejemplo “Dyna…” (Figura 1)


Figura 1: Instalando Dynamic Faces

Una vez instalado el plugin, ya podemos proceder al diseño de la página.

CREANDO EL PROYECTO

En esta sección crearemos el proyecto Web usando el framework “Visual Web JSF”. La característica de este framework es el “drag and drop” (arrastra y suelta) como medio para el desarrollo web.

  1. En el menú principal, seleccione la opción “File > New Project”

  2. Seleccione “Java Web” como categoría y “Web Application” como tipo de proyecto. Next

  3. En el nombre del proyecto, escribimos “AutocompleteTF” y de clic en Next.

  4. Seleccione GlassFish como Servidor y de clic en Next.

  5. Seleccione el Framework “Visual Web JSF” tal como se muestra en la siguiente figura.

  6. Finalmente dar clic al botón de Finish.

AGREGANDO DYNAMIC FACES

En esta sección, usted agregará la libreria de componentes “Dynamic Faces” a su Entorno de Desarrollo (IDE).

  1. En la ventana “Projects”, de un clic derecho sobre el nodo “Component Libraries” y seleccione “Add Component Library”

  2. En el cuadro de dialogo, seleccione“Dynamic Faces Components (0.2)”y de clic al botónAdd Component Library”.

Ahora la categoria Dynamic Faces se muestra en la paleta de componentes.

DISEÑO DE LA PÁGINA

En este apartado, usted agregará funcionalidad Ajax a los componentes del woodstock. Construya un diseño como el mostrado en la siguiente figura.

Una vez insertados los componentes, seleccione el TextField y el ListBox, de clic derecho y seleccione la opción “Add Binding Attribute” para poder hacer referencia a dichos controles desde el código.

CONFIGURANDO “AJAX TRANSACTION”

El componente “Ajax Transaction” incluido en el proyecto Dynamic Faces, le permite configurar visualmente la funcionalidad Ajax en tiempo de diseño, mostrando los diferentes componentes con un borde de colores en el Diseñador Visual. Como minimo, debe especificar los componentes cuya entrada será enviada al servidor cuando se dispare el Ajax Transaction así como los componentes que serán re-pintados cuando el cliente reciba la respuesta via Ajax.

Los componentes cuya entrada son enviados al servidor, son mostrados con un borde solido y los componentes que serán re-pintados son mostrados con un borde punteado.

En esta sección, usted configurará dos “Ajax Transaction”, uno para el envio de comentarios y otro más para la votación del servidor. El primer “Ajax Transaction” se disparará en respuesta al usuario que escribio un texto en el componente TextField. Cuando se dispare el primer “Ajax Transaction”, el TextField enviará su entrada al servidor de manera Asíncrona (via Ajax) y el componente ListBox será repintado cuando el cliente reciba la respuesta Ajax del servidor.

  1. Arrastre dos componentes “Ajax Transaction” de la categoria Dynamic Faces en paleta de componentes.

  2. De clic al icono que se encuentra en la parte superior del Diseñador Visual cuyo ícono es parecido a dos cuadrados de distintos colores que se intersectan. Con esto usted vera en la esquina inferior derecha, algo como lo mostrado en la siguiente figura:

  1. Clic derecho sobre el componente TextField y seleccione “Configure Ajax Transaction” .

  2. En el cuadro de diálogo marque como Yes al “Send Input” y establezca No en “Re-Render” . Con esto podrá observar lo comentado con anterioridad, los componentes cuya entrada es enviada al servidor, se marcan con un borde sólido.

  1. Haga lo mismo para el componente ListBox pero ahora establezca No en el “Send Input” y Yes en “Re-Render”. Ahora observará que la lista estará con un borde punteado.

NOTA: Para ámbos componentes, configurelos con el ajaxTransaction1 (color azul) y no con ajaxTransaction2 (color verde).

Debemos comprender que el ListBox no será el único componente que se repintará! También la caja de texto sera repintara cuándo el ListBox retorne su entrada.

  1. Repita los pasos descritos en los puntos 3-5 pero invirtiendo la configuración, es decir;

ajaxTransaction2 (color verde)

Componente

Send Input

Re-Render

TextField

No

Yes

ListBox

Yes

No

(Figura 8).

  1. Seleccione el TextField y en la ventana de propiedades, agregue los siguientes parámetros en la propiedad “onKeyUp”

DynaFaces.Tx.fire(“ajaxTransaction1”, “textField1”)

  1. Establezca para la propiedad onChange del ListBox lo siguiente:

    DynaFaces.Tx.fire(“ajaxTransaction2”, “listbox1”)

INTERACTUANDO CON BASES DE DATOS

  1. Vaya a la venta “Service” y expanda el nodo DataBase. Localice la BD vir y de clic derecho sobre ella y seleccione “Connect”.

  1. Expanda el nodo de la BD vir, seleccione la tabla EMPLOYEE y arrastre y suelte sobre la página (Page1) dicha tabla.

  2. En la ventana Navigator, expanda el nodo “ SessionBean1”, de clic sobre el employeeRowSet y seleccione la opción “Edit SQL Statament”.

  1. En el panel del Editor SQL, reemplace la consulta existente por la siguiente:

SELECT ALL VIR.EMPLOYEE.ID, VIR.EMPLOYEE.FIRSTNAME, VIR.EMPLOYEE.LASTNAME,

VIR.EMPLOYEE.EMAIL FROM VIR.EMPLOYEE WHERE VIR.EMPLOYEE.FIRSTNAME LIKE ?

  1. Guarde los cambios y cierre el editor.

  2. En la pestaña “Service” arrastre nuevamente la tabla EMPLOYEE sobre la página (Page1).

  3. Aparecerá un cuadro de diálogo, seleccione “ Create SessionBean1 employeeRowSet1” tal como lo muestra la siguiente figura.

  1. Repita los pasos del 3-5, pero ahora con la siguiente consulta:

SELECT ALL VIR.EMPLOYEE.ID, VIR.EMPLOYEE.FIRSTNAME, VIR.EMPLOYEE.LASTNAME, VIR.EMPLOYEE.EMAIL FROM VIR.EMPLOYEE WHERE VIR.EMPLOYEE.ID = ?

  1. De clic derecho sobre el componente ListBox y seleccione “Bind to Data”

  2. Vaya a la pestaña “Bind to Data Provider” y seleccione “employeeDataProvider” desde el combo.

  3. Seleccione EMPLOYEE.ID en “Value Field” y EMPLOYEE.FIRSTNAME en “Display field”.

AGREGANDO EL CÓDIGO JAVA

  1. De doble clic sobre el TextField y escriba el siguiente código:

if (textField1.getText().toString() != null || textField1.getText().toString().length() > 0) {

listbox1.setVisible(true);

}

String prefix = textField1.getText().toString();

String doctName = prefix.substring(0, 1).toUpperCase() + prefix.substring(1) + ‘%’;

try {

getSessionBean1().getEmployeeRowSet().setObject(1, doctName);

employeeDataProvider.refresh();

} catch (SQLException ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);

}

  1. De doble clic sobre el ListBox y escriba el siguiente código:

if (textField1.getText() == null || textField1.getText().toString().length() == 0) {

listbox1.setVisible(false);

try {

getSessionBean1().getEmployeeRowSet().setObject(1, “”);

} catch (SQLException ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);

}

}

  1. Localice el método “prerender” y coloque el siguiente código:

if (textField1.getText() == null || textField1.getText().toString().length() == 0) {

listbox1.setVisible(false);

try {

getSessionBean1().getEmployeeRowSet().setObject(1, “”);

} catch (SQLException ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);

}

}

Finalmente, resta ejecutar el proyecto para ver los resultados!

NOTA: Este artículo ha sido sacado de http://www.netbeans.org/kb/docs/web/ajax-textfield.html . Si bien no es estrictamente una traducción , todo esta sacado de dicho artículo.

Saludos!!

Si este contenido fue de provecho para ti, no olvides dejar algún comentario. Recuerda que el conocimiento es libre, lo único que se pide es el agradecimiento de quien aprovecho el material y las críticas de quien tiene sugerencias de mejora. Lo anterior, alienta a seguir publicando más artículos con los cuales puedas beneficiarte.

14 comentarios en “Autocompletar texto: Ajax y JavaServer Faces

  1. Muchas gracias por la traduccion del articulo, por mas quelo habia leido en ingles no habia entendido bien como funcionaba este Dynamic Faces, es realmente sencillo y practicamente sin codigo por parte del programador.

  2. Gracias por el comentario!

    En realidad tengo varios ejemplos en mente, algunos muy básicos, intermedio y otros más avanzados, desafortunadamente no he tenido mucho tiempo para dedicarle, espero muy pronto pueda seguir compartiendo más cosas.

    Saludos!!

  3. El tutorial está bien y todo pero no puedo hacer que funcione con botones, con textFields todo bien, no sé si deba de usar el mismo dynaface (DynaFaces.Tx.fire) en la propiedad on_click del boton que es el que tu usaste en on key up del textField. El principal problema es que si pongo un botón hace submit por default cuando se le da click, y eso refresca la pag aunque no quiera, ya probe metiendo el botón en un ajax zone pero sigue igual, no sé si sepas como se hace esto y puedas ayudarme, lo único que trato de hacer es que tienendo 2 text fields y un botón al darle al botón el texto que esta en el primert tf se copie al segundo (obviamente sin tener que recargar la pag):
    Agradesco mucho este tutorial y espero puedas ayudarme, saludos

  4. Muchas gracias, la verdad no se que estaba haciendo mal que no me mostraba el listbox pero, repeti todo y ya salió.
    y también gracias por el link =D.. y si funciona por si lo prueban y no les sale a la primera.

    No se desesperen

  5. alguien hizo el ejemplo c en vez de un textbox y un lisbox lo hizon con dos dropDown es que lo intente relacionar dos dropDown pero simplemente no hace nada….cololoco para el primer evento en onchange y para el segundo lo mismo..y no me sale😦 agradeceria mucho su ayuda… saludos

  6. Muy bueno tu blog, pero como se hace para hacerlo con botones, lo que quiero hacer es colocar varias cajas de texto y al darle a un boton filtrar me filtre por los datos que coloco en dichas cajas de texto

    gracias…

  7. No es necesario trabajar con botones cuando lo puedes hacer manejando los eventos del objeto, es decir en vez de colocar el codigo para en un boton para pasar la información de un textfield a otro lo colocas en uno de los eventos como KeyUp de acuerdo a tu necesidad, en tu caso la accion sería que al salir de la caja de texto aplique el filtro a otro control que quieres filtrar.

    Atte,

    Oscar

  8. man te pasaste esta muy bueno el artículo, pero en mi aplicacion no puedo recorrer con las teclas direccionales el listbox que evento y que codigo puedo poner ahi para poder hacerlo si fuera posible recibir tu ayuda escribeme al correo

  9. Buenisimo el blog, ahora estoy intentando hacer que el ajax en lugar de esperar un evento para ejecutarse lo haga cada cierto intervalo de tiempo no se si podrias ayudarme por fa.

  10. Magnificent items from you, man. I’ve consider your stuff previous to and you’re just extremely great.
    I really like what you have received here, certainly like what you are stating and the way
    in which through which you say it. You make it entertaining and you
    still care for to stay it smart. I cant wait to read far more from you.
    That is actually a wonderful site.

    My personal webpage on technology: wireless surround sound systems

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s