Share
Termini suggeriti è un eccellente elemento di usabilità che aiuta l'utente a selezionare un'opzione migliore o semplicemente aumenta la velocità di ricerca.
In questo tutorial, impareremo come creare e visualizzare i termini suggeriti in un'applicazione Flash.
Useremo i metodi e le proprietà TextField e String per recuperare e visualizzare le parole da un file esterno contenente i suggerimenti di ricerca.
Avvia Flash e crea un nuovo documento. Imposta le dimensioni dello stage su 500x270px, il colore dello sfondo su # F6F6F6 e il frame rate su 24fps.
Questa è l'interfaccia che useremo, uno sfondo semplice con una barra del titolo e due TextField, uno Static TextField che ci dice cosa fare e un campo di testo di input che useremo per iniziare a suggerire.
Nessun pulsante questa volta, gli eventi saranno chiamati premendo un tasto.
Puoi lasciare il colore di sfondo così com'è o aggiungere il rettangolo 500x270px per avere qualcosa che puoi selezionare. Per la barra del titolo, utilizza nuovamente lo strumento Rettangolo (R) per creare un rettangolo di 500 x 30 px e centrarlo.
Seleziona lo strumento di testo (T) e scrivi un titolo per la tua applicazione. Ho usato questo formato: Lucida Grande Regular, 15pt, #EEEEEE.
Useremo una forma rettangolare per mostrare dove si trova il campo di testo.
Con lo strumento Rettangolo, creare un rettangolo 300x24 px e rimuovere il riempimento, invece, utilizzare un tratto #CCCCCC.
Infine, usa lo strumento Testo per creare un campo di testo di immissione 345x20px e nominarlo Campo di inserimento.Questo è il formato che ho usato: Helvetica Bold, 16pt, # 666666.
Per visualizzare correttamente il carattere nel testo di input dovremo incorporarlo.
Seleziona Input TextField e vai al Pannello Proprietà, Personaggio sezione e premere il Incorporare… pulsante.
Verrà visualizzata una nuova finestra, selezionare i caratteri che si desidera incorporare e fare clic su OK.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
La parola chiave package consente di organizzare il codice in gruppi che possono essere importati da altri script, si consiglia di nominarli iniziando con una lettera minuscola e utilizzare gli intercapori per le parole successive, ad esempio: le mie classi. È anche comune denominarli utilizzando il sito Web della tua azienda: com.mycompany.classesType.myClass.
In questo esempio, stiamo usando una singola classe, quindi non c'è davvero bisogno di creare una cartella delle classi.
pacchetto
Queste sono le classi che dovremo importare affinché la nostra classe funzioni, il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; import flash.ui.Keyboard; import flash.events.KeyboardEvent; import flash.text.TextField; import flash.events.MouseEvent; import flash.text.TextFormat;
Qui dichiariamo la classe usando il classe definizione della parola chiave seguita dal nome che vogliamo per la classe, ricorda che devi salvare il file usando questo nome.
Il si estende keyword definisce una classe che è una sottoclasse di un'altra classe. La sottoclasse eredita tutti i metodi, le proprietà e le funzioni, in questo modo possiamo usarli nella nostra classe.
public class Main estende Sprite
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
private var urlLoader: URLLoader = new URLLoader (); // Utilizzato per caricare il file esterno private var suggerimenti: Array = new Array (); // I suggerimenti nel file di testo saranno archiviati qui private var suggerito: Array = new Array (); // I suggerimenti attuali campi di testo var privati: Array = new Array (); // Un campo di testo da utilizzare per visualizzare il termine suggerito private var format: TextFormat = new TextFormat (); // Il formato del testo dei suggerimenti private var currentSelection: int = -1; // Gestirà il suggerimento selezionato per scriverlo nel campo di testo principale
Il costruttore è una funzione che viene eseguita quando viene creato un oggetto da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o viene eseguita utilizzando la classe documento.
funzione pubblica Main (): void
I termini da suggerire saranno memorizzati in un file di testo esterno, puoi anche usare XML, PHP o il formato di tua scelta.
Scrivi i termini che vuoi suggerire (separati da virgole ",") e salva il file nella stessa directory del tuo swf, in questo caso ho usato un elenco di sport e li ho salvati nel file Sports.txt.
Questa linea chiama il metodo load della classe URLLoader e passa come parametro l'url del file txt che stiamo usando.
Accentsconagua
urlLoader.load (new URLRequest ("Sports.txt")); Due ascoltatori iniziali; uno ascolta il caricamento del file esterno e altri ascolta gli eventi di key up nell'Input TextField.
urlLoader.addEventListener (Event.COMPLETE, loadComplete); inputField.addEventListener (KeyboardEvent.KEY_UP, suggerire);
Imposta il formato di testo utilizzato nei campi di testo dei suggerimenti.
format.font = "Helvetica"; format.size = 12; format.bold = true;
La seguente funzione viene eseguita quando il carico esterno è completo, crea una matrice contenente le stringhe separate da virgole nel file txt.
private function loadComplete (e: Event): void suggestions = e.target.data.split (","); // Il metodo split separa le parole usando come delimitatore "," La funzione suggerisci gestisce tutte le operazioni per creare e visualizzare i suggerimenti, viene eseguita quando Input TextField rileva un evento Mouse_UP.
funzione privata suggerire (e: KeyboardEvent): void
La prima cosa da fare è cancellare l'array suggerito, questo cancellerà i suggerimenti precedenti (se presenti).
suggerito = [];
Il prossimo per scorre tra i suggerimenti disponibili e utilizza un Se dichiarazione e il indice di metodo per cercare le lettere iniziali di una qualsiasi delle parole disponibili.
per (var j: int = 0; j < suggestions.length; j++) if (suggestions[j].indexOf(inputField.text.toLowerCase()) == 0)//indexOf returns 0 if the letter is found
Dal momento che tutte le parole nel file di testo di esempio sono in minuscolo, possiamo chiamare toLowerCase () sul testo di input per consentire la ricerca senza distinzione tra maiuscole e minuscole. Ciò significa che se l'utente digita "SCI" troverà "sciare".
Se vengono trovate le lettere scritte, viene creato un nuovo campo di testo per la parola corrispondente, poiché siamo ancora nel per, se più di un suggerimento inizia con la stessa (e) lettera (e), verranno creati molti campi di testo.
var term: TextField = new TextField (); term.width = 100; term.height = 20; term.x = 75; term.y = (20 * recommended.length) + 88; // Posiziona il campo di testo sotto l'ultimo term.border = true; / * Qui usiamo la proprietà border term.borderColor = 0x353535; per separare i campi di testo * / term.background = true; term.backgroundColor = 0x282828; term.textColor = 0xEEEEEE; term.defaultTextFormat = format; // Imposta il formato precedentemente creato // Mouse Listeners term.addEventListener (MouseEvent.MOUSE_UP, useWord); term.addEventListener (MouseEvent.MOUSE_OVER, hover); term.addEventListener (MouseEvent.MOUSE_OUT, out); addChild (termine); textfields.push (termine); // Aggiunge il campo di testo all'array textfield suggerito.push (suggerimenti [j]); term.text = suggerimenti [j]; // Imposta il suggerimento trovato nel campo di testo
Se l'utente elimina le lettere nel campo di immissione, i suggerimenti vengono rimossi.
if (inputField.length == 0) // il campo di input è vuoto suggerito = []; // cancella gli array per (var k: int = 0; k < textfields.length; k++) removeChild(textfields[k]); //remove textfields textfields = [];
Il prossimo codice consente all'utente di spostarsi tra i suggerimenti usando la tastiera.
Cambia il colore della parola selezionata, aggiunge o rimuove un numero al selezione corrente variabile per usarlo più tardi nella matrice textfields, in questo modo recupera l'elemento corretto dai suggerimenti.
Quando viene premuto il tasto Invio, la selezione viene scritta nel campo di immissione e i suggerimenti vengono rimossi.
if (e.keyCode == Keyboard.DOWN && currentSelection < textfields.length-1) currentSelection++; textfields[currentSelection].textColor = 0xFFCC00; if(e.keyCode == Keyboard.UP && currentSelection > 0) currentSelection--; textfields [currentSelection] .textColor = 0xFFCC00; if (e.keyCode == Keyboard.ENTER) inputField.text = textfields [currentSelection] .text; suggerito = []; per (var l: int = 0; l < textfields.length; l++) removeChild(textfields[l]); textfields = []; currentSelection = 0;
Questa funzione viene anche utilizzata per selezionare il suggerimento, sebbene ciò sia più semplice grazie alla possibilità di aggiungere listener di eventi ai campi di testo. Gli ascoltatori sono stati aggiunti nel suggerire ()funzione nel passaggio 23, ricorda?
funzione privata useWord (e: MouseEvent): void inputField.text = e.target.text; suggerito = []; per (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;
Torna al FLA e nel Pannello Proprietà> sezione Pubblica> campo Classe, Inserisci Principale come valore. Questo collegherà questa classe come la Document Class.
Hai finito di creare e implementare una classe di termini suggeriti, è ora di crearne una tua e personalizzarla! Perché non provare a utilizzare PHP per salvare i termini che gli utenti inseriscono nell'elenco dei termini suggeriti?
Grazie per aver letto questo tutorial, spero che tu l'abbia trovato utile!
