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:
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.
- Cree una página web nueva en el proyecto EGLWeb denominada customersearchAJAX.jsp:
- En la vista Explorador de proyectos, pulse la carpeta WebContent del proyecto EGLWeb y, a continuación, pulse .
- En el campo Nombre de archivo escriba este texto como el
nombre del archivo nuevo, incluida la extensión:
customersearchAJAX.jsp
- Asegúrese de que en el campo Carpeta aparezca la carpeta
/EGLWeb/WebContent.
- En la lista Plantilla, pulse Mis plantillas.
- En el recuadro Vista previa, pulse la plantilla A_gray.htpl.
- Pulse Finalizar. La página nueva se crea y se abre en el editor.
- Elimine el texto predeterminado de la página y sustitúyalo por el texto siguiente:
Búsqueda de cliente con tecleo anticipado
- Pulse Intro tres veces para crear un espacio en blanco debajo del título de la página.
- 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.
- 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.
- Elimine la propiedad onConstructionFunction del Manejador JSF pero deje onPreRenderFunction:
handler customersearchAJAX type JSFHandler
{onPreRenderFunction = onPreRender,
view = "customersearchAJAX.jsp",
viewRootVar = viewRoot}
- Elimine la parte de la función onConstruction().
- 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.
- 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.
- 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.
- Optimice las importaciones y guarde el archivo del manejador JSF.
- 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.
- 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.
- Pulse Opciones.
- 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.
- Pulse Aceptar.
- 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:
- 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.
- En la ventana Insertar control, pulse Visualizar un registro existente (sólo de lectura).
- 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:
- Pulse Finalizar. Los controles que representan los resultados de la búsqueda se añadirán a la página.
- 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:
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:
Cuando elija un nombre de cliente, puede pulsar después Someter y ver la información del cliente:
É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.