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ón“Add 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. 

2. 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.