Share
Términos sugeridos es un excelente elemento de usabilidad que ayuda al usuario a seleccionar una mejor opción o simplemente aumentar la velocidad de búsqueda.
En este tutorial, aprenderemos cómo crear y mostrar los términos sugeridos en una aplicación Flash.
Haremos uso de los métodos y las propiedades de TextField y String para recuperar y mostrar palabras de un archivo externo que contiene las sugerencias de búsqueda..
Inicia Flash y crea un nuevo documento. Establezca el tamaño del escenario en 500x270px, el color de fondo en # F6F6F6 y la velocidad de fotogramas en 24 fps.
Esta es la interfaz que usaremos, un fondo simple con una barra de título y dos TextFields, un TextField estático que nos indica qué hacer y un TextField de entrada que usaremos para comenzar a sugerir.
Sin botones esta vez, los eventos serán llamados presionando una tecla.
Puede dejar el color de fondo como está o agregar un rectángulo de 500x270px para tener algo que pueda seleccionar. Para la barra de título, use nuevamente la herramienta Rectángulo (R) para crear un rectángulo de 500x30px y centrarlo.
Seleccione la Herramienta de texto (T) y escriba un título para su aplicación. Utilicé este formato: Lucida Grande Regular, 15pt, #EEEEEE.
Usaremos una forma de rectángulo para mostrar dónde está el campo de texto.
Con la herramienta Rectángulo, cree un rectángulo de 300x24 px y elimine el relleno; en su lugar, utilice un trazo #CCCCCC.
Por último, use la Herramienta de texto para crear un campo de texto de entrada de 345x20px y asígnele el nombre campo de entrada.Este es el formato que utilicé: Helvetica Bold, 16pt, # 666666.
Para mostrar la fuente correctamente en el texto de entrada, tendremos que incrustarla.
Seleccione el campo de entrada de texto y vaya a la Panel de propiedades, Personaje sección y presione el Empotrar… botón.
Aparecerá una nueva ventana, seleccione los caracteres que desea incrustar y haga clic en Aceptar..
Cree una nueva clase de ActionScript 3.0 (Cmd + N) y guárdela como Main.as en la carpeta de tu clase.
La palabra clave del paquete le permite organizar su código en grupos que pueden ser importados por otros scripts, se recomienda nombrarlos comenzando con una letra minúscula y usar intercaps para palabras posteriores, por ejemplo: mis clases. También es común nombrarlos usando el sitio web de su empresa: com.mycompany.classesType.myClass.
En este ejemplo, estamos usando una sola clase, por lo que realmente no hay necesidad de crear una carpeta de clases.
paquete
Estas son las clases que necesitaremos importar para que nuestra clase funcione, la importar La directiva hace que las clases y los paquetes definidos externamente estén disponibles para su código..
importar flash.display.Sprite; importar flash.net.URLLoader; importar flash.net.URLRequest; import flash.events.Event; importar flash.ui.Keyboard; import flash.events.KeyboardEvent; importar flash.text.TextField; import flash.events.MouseEvent; importar flash.text.TextFormat;
Aquí declaramos la clase usando el clase palabra clave de definición seguida del nombre que queremos para la clase, recuerde que debe guardar el archivo con este nombre.
los se extiende palabra clave define una clase que es una subclase de otra clase. La subclase hereda todos los métodos, propiedades y funciones, de esa manera podemos usarlos en nuestra clase.
Clase pública Principal extiende Sprite
Estas son las variables que usaremos, lea los comentarios en el código para obtener más información sobre ellas..
private var urlLoader: URLLoader = new URLLoader (); // Se usa para cargar el archivo externo. private var sugerencias: Array = new Array (); // Las sugerencias en el archivo de texto se almacenarán aquí. (); // Las sugerencias actuales son campos de texto privados var: Array = new Array (); // Un campo de texto que se usará para mostrar el término sugerido en formato privado var: TextFormat = new TextFormat (); // currentSelection: int = -1; // manejará la sugerencia seleccionada para escribirla en el campo de texto principal
El constructor es una función que se ejecuta cuando un objeto se crea a partir de una clase, este código es el primero en ejecutarse cuando se crea una instancia de un objeto o se ejecuta utilizando la Clase de documento.
Función pública Main (): void
Los términos para sugerir se almacenarán en un archivo de texto externo, también puede usar XML, PHP o el formato de su elección..
Escriba los términos que desea sugerir (separados por comas ",") y guarde el archivo en el mismo directorio que su swf, en este caso, usé una lista de deportes y los guardé en el archivo Deportes.txt.
Esta línea llama al método de carga de la clase URLLoader y pasa como parámetro la URL del archivo txt que estamos usando.
Accentsconagua
urlLoader.load (nueva URLRequest ("Sports.txt")); Dos oyentes iniciales; uno escucha la carga del archivo externo y otro escucha eventos clave en el campo de entrada de texto.
urlLoader.addEventListener (Event.COMPLETE, loadComplete); inputField.addEventListener (KeyboardEvent.KEY_UP, sugerir);
Establece el formato de texto utilizado en los campos de texto de sugerencias..
format.font = "Helvetica"; format.size = 12; format.bold = true;
La siguiente función se ejecuta cuando la carga externa se completa, crea una matriz que contiene las cadenas separadas por comas en el archivo txt.
función privada loadComplete (e: Event): void sugerencias = e.target.data.split (","); // El método de división separa las palabras usando como delimitador el "," La función de sugerencia maneja todas las operaciones para crear y mostrar las sugerencias, se ejecuta cuando el campo de entrada de texto detecta un evento Mouse_UP.
función privada sugiere (e: KeyboardEvent): void
Lo primero que debe hacer es borrar la matriz sugerida, esto borrará las sugerencias anteriores (si las hay).
sugerido = [];
El siguiente para recorre las sugerencias disponibles y utiliza una Si declaración y la índice de Método para buscar las letras iniciales de cualquiera de las palabras disponibles..
para (var j: int = 0; j < suggestions.length; j++) if (suggestions[j].indexOf(inputField.text.toLowerCase()) == 0)//indexOf returns 0 if the letter is found
Ya que todas las palabras en el archivo de texto de ejemplo están en minúsculas, podemos llamar toLowerCase () en el texto de entrada para permitir la búsqueda sin distinción entre mayúsculas y minúsculas. Esto significa que si el usuario escribe "SKI" encontrará "skiing".
Si se encuentran las letras escritas, se crea un nuevo campo de texto para la palabra correspondiente, ya que todavía estamos en el para, Si más de una sugerencia comienza con la misma letra (s), entonces se crearán muchos campos de texto..
término var: TextField = new TextField (); term.width = 100; term.height = 20; term.x = 75; term.y = (20 * Suggest.length) + 88; // Coloca el campo de texto debajo del último term.border = true; / * Aquí usamos la propiedad de borde term.borderColor = 0x353535; para separar los campos de texto * / term.background = true; term.backgroundColor = 0x282828; term.textColor = 0xEEEEEE; term.defaultTextFormat = format; // Establecer el formato creado previamente // Mouse Listeners term.addEventListener (MouseEvent.MOUSE_UP, useWord); term.addEventListener (MouseEvent.MOUSE_OVER, hover); term.addEventListener (MouseEvent.MOUSE_OUT, out); addChild (término); textfields.push (término); // Agrega el campo de texto a la matriz de campos de texto sugerida.push (sugerencias [j]); term.text = sugerencias [j]; // Establece la sugerencia encontrada en el campo de texto
Si el usuario elimina las letras en el campo de entrada, las sugerencias se eliminan.
if (inputField.length == 0) // el campo de entrada está vacío sugirió = []; // borrar matrices para (var k: int = 0; k < textfields.length; k++) removeChild(textfields[k]); //remove textfields textfields = [];
El siguiente código le permite al usuario moverse a través de las sugerencias usando el teclado.
Cambia el color de la palabra seleccionada, agrega o elimina un número a la selección actual variable para usarla más adelante en la matriz de campos de texto, de esta manera recupera el elemento correcto de las sugerencias.
Cuando se presiona la tecla Intro, la selección se escribe en el Campo de entrada y se eliminan las sugerencias..
if (e.keyCode == Keyboard.DOWN && currentSelection < textfields.length-1) currentSelection++; textfields[currentSelection].textColor = 0xFFCC00; if(e.keyCode == Keyboard.UP && currentSelection > 0) currentSelection--; campos de texto [currentSelection] .textColor = 0xFFCC00; if (e.keyCode == Keyboard.ENTER) inputField.text = textfields [currentSelection] .text; sugerido = []; para (var l: int = 0; l < textfields.length; l++) removeChild(textfields[l]); textfields = []; currentSelection = 0;
Esta función también se utiliza para seleccionar la sugerencia, aunque esto es más fácil debido a la capacidad de agregar escuchas de eventos a los campos de texto. Los oyentes fueron agregados en el sugerir()funciona en el paso 23, recuerda?
función privada useWord (e: MouseEvent): void inputField.text = e.target.text; sugerido = []; para (var i: int = 0; i < textfields.length; i++) removeChild(textfields[i]); textfields = []; private function hover(e:MouseEvent):void e.target.textColor = 0xFFCC00; private function out(e:MouseEvent):void e.target.textColor = 0xEEEEEE;
Vuelve a la FLA y en el Panel de propiedades> Sección de publicación> Campo de clase, añadir Principal como valor. Esto vinculará esta clase como la clase de documento.
¡Ha terminado de crear e implementar una clase de términos sugeridos, es hora de hacer su propia y personalizarla! ¿Por qué no intenta usar PHP para guardar los términos que los usuarios ingresan a la lista de términos sugeridos??
Gracias por leer este tutorial, espero que lo hayas encontrado útil.!
