|
El componente TextInput es un componente de una sola línea de texto que ajusta el objeto TextField nativo de ActionScript. Si necesita un campo de texto de varias líneas, utilice el componente TextArea. Por ejemplo, si desea utilizar un componente TextInput como campo de contraseña en un formulario, se puede definir un detector que compruebe si el campo tiene caracteres suficientes cuando el usuario utiliza el tabulador para salir del campo. El detector podría mostrar un mensaje de error indicando que se debe introducir el número de caracteres correcto.
Se puede establecer la propiedad
textFormat
con el método
setStyle()
para cambiar el estilo de texto que aparece en una instancia de TextInput. El componente TextInput puede definirse con el formato HTML o como un campo de contraseña que disfraza el texto.
Interacción del usuario con el componente TextInput
Es posible activar o desactivar el componente TextInput en una aplicación. Si está desactivado, no recibe la entrada del ratón ni del teclado. Cuando está activado, sigue las mismas reglas de selección y navegación que un objeto TextField de ActionScript. Cuando la instancia de TextInput está seleccionada, puede controlarla con las teclas siguientes:
|
Tecla
|
Descripción
|
|
Teclas de flecha
|
Desplaza el punto de inserción un carácter hacia la izquierda o la derecha.
|
|
Mayús+Tabulador
|
Desplaza la selección al objeto anterior.
|
|
Tabulador
|
Desplaza la selección al objeto siguiente.
|
Para obtener más información sobre el control de la selección, consulte la clase FocusManager en la
Referencia de ActionScript 3.0
para Flash Professional
y en
Trabajo con FocusManager
.
La previsualización dinámica de cada instancia de TextInput refleja los cambios de parámetros realizados durante la edición en el inspector de propiedades o el inspector de componentes. No es posible seleccionar texto en la previsualización dinámica, de igual modo que tampoco se puede introducir texto en la instancia del componente en el escenario.
Cuando se añade el componente TextInput a una aplicación, es posible utilizar el panel Accesibilidad para que los lectores de pantalla puedan acceder al mismo.
Parámetros del componente TextInput
Puede establecer los siguientes parámetros de edición para cada instancia del componente TextInput en el inspector de propiedades o en el inspector de componentes:
editable
,
displayAsPassword
,
maxChars
,
restrict
y
text
. Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase TextInput en la
Referencia de ActionScript 3.0
para Flash Professional
.
Es posible escribir código ActionScript para controlar éstas y otras opciones adicionales para el componente TextInput mediante sus propiedades, métodos y eventos. Para obtener más información, consulte la clase TextInput en la
Referencia de ActionScript 3.0
para Flash Professional
.
Creación de una aplicación con el componente TextInput
En el procedimiento siguiente se explica cómo añadir un componente TextInput a una aplicación. En el ejemplo se utilizan dos campos de TextInput para recibir y confirmar una contraseña. Se utiliza un detector de eventos para comprobar que se ha introducido un mínimo de ocho caracteres y que coincide el texto de los dos campos.
-
Cree un nuevo documento de Flash (ActionScript 3.0).
-
Arrastre un componente Label del panel Componentes al escenario y asígnele los valores siguientes en el inspector de propiedades:
-
Introduzca el nombre de instancia
pwdLabel
.
-
Introduzca un valor de anchura de
100
.
-
Introduzca un valor X de
50
.
-
Introduzca un valor Y de
150
.
-
En la sección Parámetros, introduzca el valor de
Password
del parámetro de texto.
-
Arrastre un segundo componente Label del panel Componentes al escenario y asígnele los valores siguientes:
-
Introduzca el nombre de instancia
confirmLabel
.
-
Introduzca un valor de anchura de
100
.
-
Introduzca un valor X de
50
.
-
Introduzca un valor Y de
200
.
-
En la sección Parámetros, introduzca el valor de
Confirm
Password
del parámetro de texto.
-
Arrastre un componente TextInput del panel Componentes al escenario y asígnele los valores siguientes:
-
Introduzca el nombre de instancia
pwdTi
.
-
Introduzca un valor de anchura de
150
.
-
Introduzca un valor X de
190
.
-
Introduzca un valor Y de
150
.
-
En la sección Parámetros, haga doble clic en el valor del parámetro
displayAsPassword
y seleccione
true
. Esta acción hace que el valor introducido en el campo de texto se enmascare con asteriscos.
-
Arrastre un segundo componente TextInput del panel Componentes al escenario y asígnele los siguientes valores:
-
Introduzca el nombre de instancia
confirmTi
.
-
Introduzca un valor de anchura de
150
.
-
Introduzca un valor X de
190
.
-
Introduzca un valor Y de
200
.
-
En la sección Parámetros, haga doble clic en el valor del parámetro
displayA
s
Password
y seleccione
true
. Esta acción hace que el valor introducido en el campo de texto se enmascare con asteriscos.
-
Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:
function tiListener(evt_obj:Event){
if(confirmTi.text != pwdTi.text || confirmTi.length < 8)
{
trace("Password is incorrect. Please reenter it.");
}
else {
trace("Your password is: " + confirmTi.text);
}
}
confirmTi.addEventListener("enter", tiListener);
Este código configura un controlador de eventos
enter
en la instancia de TextInput denominada
confirmTi
. Si no coinciden las dos contraseñas, o bien si el usuario escribe menos de ocho caracteres, el ejemplo muestra el mensaje “Contraseña incorrecta. Vuelva a introducirla". Si las contraseñas constan de ocho caracteres o más y coinciden, el ejemplo muestra el valor introducido en el panel Salida.
-
Seleccione Control > Probar película.
Creación de una instancia del componente TextInput con ActionScript
En el ejemplo siguiente se crea un componente TextInput con ActionScript. En el ejemplo también se crea un componente Label que se utiliza para solicitar al usuario que introduzca su nombre. En el ejemplo se establece la propiedad
restrict
del componente para permitir únicamente letras mayúsculas y minúsculas, un punto y un espacio. También se crea un objeto TextFormat que se utiliza para formatear el texto en los componentes Label y TextInput.
-
Cree un nuevo documento de Flash (ActionScript 3.0).
-
Arrastre un componente TextInput del panel Componentes al panel Biblioteca.
-
Arrastre un componente Label del panel Componentes al panel Biblioteca.
-
Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:
import fl.controls.Label;
import fl.controls.TextInput;
var nameLabel:Label = new Label();
var nameTi:TextInput = new TextInput();
var tf:TextFormat = new TextFormat();
addChild(nameLabel);
addChild(nameTi);
nameTi.restrict = "A-Z .a-z";
tf.font = "Georgia";
tf.color = 0x0000CC;
tf.size = 16;
nameLabel.text = "Name: " ;
nameLabel.setSize(50, 25);
nameLabel.move(100,100);
nameLabel.setStyle("textFormat", tf);
nameTi.move(160, 100);
nameTi.setSize(200, 25);
nameTi.setStyle("textFormat", tf);
-
Seleccione Control > Probar película para ejecutar la aplicación.
|
|
|
