< Anterior | Siguiente >

Lección 6: Utilización del tecleo anticipado como solicitud al usuario

Los controles con la característica de tecleo anticipado intentan anticiparse a lo que el usuario podría teclear en un campo de entrada, agilizando el proceso de entrada de información. En esta lección, aprenderá a crear una página de búsqueda independiente que utilice la funcionalidad de tecleo anticipado para buscar de una forma distinta a lo que lo hacía en la página anterior.

El funcionalidad de tecleo anticipado utiliza AJAX, o Asynchronous Javascript y XML, que es una tecnología web que permite que las aplicaciones web cambien parte de una página web sin tener que volver a cargar toda la página. En este caso, la funcionalidad AJAX permite que el Manejador JSF EGL añada y elimine sugerencias en el control de entrada sin tener que volver a someter la página. La funcionalidad de tecleo anticipado EGL proporciona un acceso directo a este uso común de la funcionalidad AJAX, evitándole tener que juntar una solicitud AJAX. En la siguiente lección, aprenderá a crear solicitudes AJAX personalizadas.

Por convenio, los controles de entrada con tecleo anticipado proporcionan opciones basadas en los primeros caracteres que teclea el usuario en un campo:
Un menú desplegable muestra todos los nombres de la base de datos que comienzan por la letra "L".

Dependiendo de cómo escriba el código EGL para el tecleo anticipado, podrá proporcionar sugerencias basadas en los primeros caracteres de entrada o procedentes de una función arbitraria que determina las sugerencias de forma dinámica.

Para proporcionar sugerencias para tecleo anticipado basadas en los primeros caracteres de la entrada, deberá especificar estas sugerencias en el momento del diseño, en la propiedad validValues o en una parte de la tabla de datos. En este ejemplo se utiliza la propuesta validValues:
state STRING {typeahead = YES, 
    validValues = ["AK","AL","AR","AZ",
        "NC","NY","NH","NJ",
        "NM","NE","NV","ND"]};
En esta variable, los valores válidos son las abreviaturas de los estados unidos de América que comiencen por las letras "A" y "N." Cuando el usuario escriba la letra "A" en el control de entrada, el tecleo anticipado le proporcionará abreviaturas que comiencen con la "A" y lo mismo con la letra "N" y las abreviaturas que comiencen con la "N."

En esta lección, se utiliza la funcionalidad de tecleo anticipado para sugerir los apellidos de los clientes de la base de datos en la que busca el usuario. En este caso, debe determinar las sugerencias de tecleo anticipado en el tiempo de ejecución porque las sugerencias dependerán de los valores de la base de datos. Por lo tanto, va a crear una función en un manejador JSF nuevo que compara lo que ha escrito el usuario en un campo de entrada con los apellidos de los clientes de la base de datos. La función proporcionará luego los nombres coincidentes como sugerencias de tecleo anticipado.

  1. Cree una página web nueva en el proyecto EGLWeb denominada customersearchAJAX.jsp:
    1. En la vista Explorador de proyectos, pulse la carpeta WebContent del proyecto EGLWeb y, a continuación, pulse Nuevo > Página web.
    2. En el campo Nombre de archivo escriba este texto como el nombre del archivo nuevo, incluida la extensión:
      customersearchAJAX.jsp
    3. Asegúrese de que en el campo Carpeta aparezca la carpeta /EGLWeb/WebContent.
    4. En la lista Plantilla, pulse Mis plantillas.
    5. En el recuadro Vista previa, pulse la plantilla A_gray.htpl.
    6. Pulse Finalizar. La página nueva se crea y se abre en el editor.
    7. Elimine el texto predeterminado de la página y sustitúyalo por el texto siguiente:
      Búsqueda de cliente con tecleo anticipado
    8. Pulse Intro tres veces para crear un espacio en blanco debajo del título de la página.
  2. Abra el Manejador JSF por la página pulsando el botón derecho del ratón en el área de contenido de la página y, a continuación, pulse Editar código de página.
  3. Añada estas tres variables al Manejador JSF:
    lastNameInput STRING {TypeaheadFunction = suggestLastNames};
    allLastNames Customer[0];
    customerToDisplay Customer;

    La primera variable enlazará a un control de entrada de la página. La propiedad TypeaheadFunction indica que esta variable tendrá una función que proporcione sugerencias de tecleo anticipado. Creará esta función más adelante en esta lección.

    La segunda variable contendrá la lista de los apellidos de la base de datos. La función que proporciona sugerencias necesitará esta lista.

    La tercera variable es un solo registro que mostrará los resultados de la búsqueda.

  4. Elimine la propiedad onConstructionFunction del Manejador JSF pero deje onPreRenderFunction:
    handler customersearchAJAX type JSFHandler
    	{onPreRenderFunction = onPreRender,
    	view = "customersearchAJAX.jsp",
    	viewRootVar = viewRoot} 
  5. Elimine la parte de la función onConstruction().
  6. Complete la parte de la función onPreRender():
    function onPreRender()
    		get allLastNames with
    			#sql{
    				select
    					LASTNAME
    				from EGL.CUSTOMER
    				group by
    					EGL.CUSTOMER.LASTNAME
    			};
    	end
    Esta función se ejecutará cada vez que se renueve la página, para recuperar una lista de los apellidos de clientes de la base de datos y compararla con la entrada del usuario.
  7. Añada la función siguiente al manejador JSF:
    	function suggestLastNames(typedCharacters STRING in) returns (STRING[])
    		matchingLastNames STRING[0];
    		oneCustomer Customer;
    		oneCustomerName STRING;
    
    		//Esta variable representa los caracteres que ha escrito el usuario.
    		typedCharacters = StrLib.upperCase(typedCharacters);
    
    		//Compare la entrada de usuario con los valores de la base de datos.
    		for (counter INT from 1 to allLastNames.getSize())
    			oneCustomer = allLastNames[counter];
    			oneCustomerName = StrLib.upperCase(oneCustomer.LastName);
    
    			if (StrLib.indexOf(oneCustomerName, typedCharacters) == 1)
    				//Este valor comienza con los mismos caracteres.
    				//Añada este valor a las sugerencias de tecleo anticipado.
    				matchingLastNames.appendElement(oneCustomer.LastName);
    			end
    		end
    		return (matchingLastNames);
    	end
    Esta función hace referencia a la propiedad TypeaheadFunction de la variable que ha creado anteriormente. Como su nombre indica, esta función proporciona sugerencias de tecleo anticipado. Esta función debe recibir un único parámetro: una STRING (serie) que representa los caracteres que el usuario ha tecleado en el control de entrada. Además, debe devolver una matriz de STRING (series), que representan las sugerencias. Con esta función, podrá determinar las sugerencias de tecleo anticipado con una lógica EGL arbitraria.

    En este caso, la función permite el convenio que las sugerencias deberían empezar con los mismos caracteres que ha tecleado el usuario en el control de entrada. La función compara los caracteres que ha tecleado el usuario con cada apellido de los usuarios estableciendo, en cada caso, los valores a mayúsculas para eliminar posibles diferencias con mayúsculas y minúsculas. Cada vez que la función detecta una coincidencia, añade el apellido del cliente en la matriz de resultados que representan las sugerencias de tecleo anticipado.

  8. Añada la función siguiente al manejador JSF:
    	function displayCustomer()
    		get customerToDisplay with
    			#sql{
    				select
    					CUSTOMERID, FIRSTNAME, LASTNAME, PASSWORD, PHONE, 
    					EMAILADDRESS, STREET, APARTMENT, CITY, "STATE", 
    					POSTALCODE, DIRECTIONS
    				from EGL.CUSTOMER
    				where
    					LASTNAME = :lastNameInput
    			};
    	end
    Esta función enlazará a un botón de la página. Cuando, gracias al control de tecleo anticipado, el usuario haya podido encontrar el nombre de un cliente único, el cliente pulsará el botón y ejecutará esta función para recuperar los detalles del cliente.
  9. Optimice las importaciones y guarde el archivo del manejador JSF.


  10. Expanda Manejador JSF y Datos en la vista Datos de página. Arrastre la variable lastNameInput a la página customersearchAJAX.jsp. Se abrirá la ventana Insertar registro.
  11. Pulse Actualizar un registro existente y asegúrese de que el Tipo de control del control de entrada se haya establecido en Campo de entrada. Puede utilizar el tecleo anticipado solamente en controles de entrada JSF.
  12. Pulse Opciones.
  13. En la ventana Opciones, desmarque el recuadro de selección Botón Suprimir y marque el recuadro de selección Botón Someter. Deje la etiqueta predeterminada Someter para el botón.
  14. Pulse Aceptar.
  15. Pulse Finalizar. En la página se crearán el control de entrada y un botón. Debido a la propiedad TypeaheadFunction de la variable, el control de entrada nuevo se configura automáticamente para el tecleo anticipado. Puede ver las opciones de la funcionalidad de tecleo anticipado como, por ejemplo, la longitud del retardo antes de ofrecer sugerencias, si pulsa el icono de tecleo anticipado de la derecha del control de entrada y abre la vista Propiedades:
    Vista Propiedades que muestra las opciones del control de tecleo anticipado
  16. Arrastre la variable CustomerToDisplay de la vista Datos de página a la parte inferior de la página. Se abre la ventana Insertar control.
  17. En la ventana Insertar control, pulse Visualizar un registro existente (sólo de lectura).
  18. En Campos a visualizar, marque los recuadros de selección junto a los campos del registro de usuario que desee ver en los resultados de la búsqueda. Por ejemplo, puede seleccionar los campos IDCliente, Nombre, Apellido y Teléfono:
    La ventana Configuración de controles de datos tiene cuatro campos seleccionados.
  19. Pulse Finalizar. Los controles que representan los resultados de la búsqueda se añadirán a la página.
  20. Enlace la función displayCustomer() al botón Someter de la página arrastrando la función de la vista Datos de página al botón.
Ahora ha configurado la página para utilizar el tecleo anticipado. La página tendrá un aspecto similar a éste:
Un imagen de la página completada

Puede probar la página ejecutándola en el servidor y escribiendo el primer carácter o los dos primeros caracteres de un nombre de cliente en el campo de entrada:

Una imagen del control de tecleo anticipado que proporciona sugerencias

Cuando elija un nombre de cliente, puede pulsar después Someter y ver la información del cliente:

Una imagen de la página que muestra los resultados de la búsqueda

Éste es el código completo del archivo customersearchAJAX.egl. Si ve errores marcados por símbolos X rojos en el archivo, asegúrese de que el código coincida con el código de este archivo:Archivo customersearchAJAX.egl completado después de la lección 6.

Punto de comprobación de lección

En esta lección ha aprendido a aplicar el soporte de tecleo anticipado en un campo de entrada. El tecleo anticipado puede ayudar al usuario a escribir información válida pero deber tener en cuenta la presión que recibe el sistema a la hora de proporcionar sugerencias. Cada vez que cambia el valor del control de entrada, se ejecuta la función asociada al control de tecleo anticipado. Esta función debería ser lo máximo de simple posible para evitar que el sistema sufra una sobrecarga.
Para obtener más información sobre el tecleo anticipado, consulte el apartado Providing type-ahead support for input controls.
Con esto concluye la guía de aprendizaje.
< Anterior | Siguiente >

Comentarios