Los campos de contraseña le permiten crear un campo, similar a un campo de texto, en el que los usuarios pueden escribir. Sin embargo, un campo de contraseña hace que todo se muestre como un asterisco (*) para que los usuarios no puedan ver lo que se está escribiendo..
En este tutorial, crearemos una clase estática que convertirá un campo de texto de entrada en un campo de contraseña similar a un iPhone.
Haremos uso de la estático atributo en ActionScript 3.0 para declarar una clase que no necesita ser instanciada para ser utilizada, de esta manera podemos llamar a sus métodos sin crear un objeto usando el nuevo operador.
Nuestra clase creará una Minutero que reemplazará los caracteres del TextField objetivo a cualquier carácter dado en el tiempo especificado.
Abra Flash y cree un nuevo archivo Flash (ActionScript 3).
Establezca el tamaño del escenario en 600x300 y agregue un fondo lineal gris (#EEEEEE, #DDDDDD).
Añadamos algunos detalles gráficos a nuestra aplicación..
Seleccione la herramienta Rectángulo (R), cree un rectángulo de 600x50px y rellénelo con # 222222.
Crea un campo de texto estático para agregar un título. Usé Helvetica Bold 21pt como TextFormat.
Use la Herramienta primitiva de rectángulo para crear un rectángulo de 200x30px (#AAAAAA) y cambie el radio a 6.00. Duplique esta forma (Cmd + D), cambie su tamaño a 198x28px, cambie su color a #EEEE y céntrela en la forma anterior.
Agrega un texto para etiquetar el campo.
Esto completará la parte gráfica..
Crearemos un campo de texto de entrada que usaremos para obtener la entrada del usuario y para especificar un objetivo en nuestra clase de máscara de contraseña.
Seleccione la herramienta de texto (T) y coloque un campo de texto de entrada en el fondo que creamos anteriormente. Establezca su nombre de instancia en campo de pase.
Cree un nuevo documento ActionScript y guárdelo como iPass.as. Esta será nuestra estático clase.
Las clases que necesitaremos. Para obtener información específica, consulte la ayuda de Flash (F1).
clases de paquetes import flash.display.Sprite; importar flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; importar flash.ui.Keyboard; import flash.events.KeyboardEvent;
Vamos a utilizar métodos y propiedades específicos de Sprite, por lo que ampliamos el uso de la Clase Sprite.
clase pública iPass extiende Sprite
Estas son las variables que utilizaremos, explicadas en los comentarios. Observe que las variables se declaran como estático tener acceso sin instancia.
public static var pass: String = ""; // Esto almacenará la contraseña original para cualquier uso public static var target: TextField; // El campo de texto para enmascarar var estático privado regExp: RegExp = /./g; // Una Expresión regular, busca TODOS los caracteres public static var timer: Timer = new Timer (1000); // Timer objeto, se ejecutará cada segundo, cuando se llama
Este es el método al que llamaremos para usar la clase..
función estática pública maskTextField (t: TextField): void // Necesitamos un parámetro que especifique el TextField de destino target = t; addListeners ();
Esta es la función que reemplazará los caracteres en el campo de destino..
función estática privada replaceOnTime (e: TimerEvent): void target.text = target.text.replace (regExp, "•"); // Reemplaza todos los caracteres en el campo de texto con "•" timer.stop (); // Detiene el temporizador cuando se reemplazan los caracteres
Esta función iniciará el temporizador cuando el campo de texto de destino esté enfocado y se presione una tecla.
función estática privada startTimer (e: KeyboardEvent): void / * Si el temporizador no se está ejecutando, inícielo, reinicie el temporizador, reemplace todos los caracteres pero el último y vuelva a ejecutar el temporizador * /! timer.running? timer.start (): timer.reset (); var msk: String = target.text.substring (0, target.length - 1); target.text = msk.replace (regExp, "•") + String.fromCharCode (e.charCode); timer.start (); / * Filtra claves válidas, de la a a la Z * / para (var i: int = 65; i < 123; i++) if (e.charCode == i) pass += String.fromCharCode(i); if (e.keyCode == Keyboard.BACKSPACE) pass = pass.substring(0, pass.length - 1); //If delete is pressed, delete last char
Agrega los oyentes a los objetos Timer y TextField.
función estática privada addListeners (): void timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer);
Esta clase llamará a la clase estática iPass y pasará el campo de texto en la etapa como un parámetro.
Cree un nuevo documento ActionScript y guárdelo como Main.as.
clases de paquetes import classes.iPass; importar flash.display.Sprite; public class Main extiende Sprite public function Main (): void iPass.maskTextField (passField); // Llama a la clase iPass / * función privada getPassword (): void trace (iPass.pass); // Un ejemplo de cómo obtener la contraseña * /
Vuelva al archivo .Fla y en el Panel de propiedades agregue clases.principal en el campo Clase para que sea la Clase de documento.
Ahora ha creado una clase de enmascaramiento de contraseñas y ha aprendido a crear y utilizar una clase estática: experimente con sus ventajas!
Gracias por leer!