Comunidad de diseño web y desarrollo en internet online

Tutorial del componente TextArea de Flash

Gracias a este componente podremos configurar cajas de texto con scrolls horizontales y verticales facilmente. TextArea soporta etiquetas HTML, por lo que podremos poner vinculos dentro de nuestro texto, colores, negritas, etc. Pon un componente TextArea en un tu biblioteca, y vamos a ver sus propiedades mediante este código:
//Atacheamos el componente
attachMovie("TextArea", "mi_texto", 1);
//Propiedades
mi_texto.setSize(300, 200);
mi_texto.editable = true;
mi_texto.html = true;
mi_texto.maxChars = null;
mi_texto.password = false;
mi_texto.restrict = "^aeiou";
mi_texto.wordWrap = true;
mi_texto.vScrollPolicy = "on";
mi_texto.hScrollPolicy = "off";
//Texto
mi_texto.text = "<p>The properties of the <b>TextArea</b> class allow you to set the text content, formatting, and horizontal and vertical position at runtime.You can also indicate whether the field is editable, and whether it is a '<i>password</i>' field. You can also restrict the characters that a user can enter.</p><br><p>Setting a property of the TextArea class with ActionScript overrides the parameter of the same name set in the <b>Property inspector</b> or <b>Component Inspector panel</b>.</p><br><p>The <b>TextArea</b> component overrides the default Flash Player focus rectangle and draws a custom focus rectangle with rounded corners.</p><p>The <b>TextArea</b> component supports <i>CSS styles</i> and any additional HTML styles supported by Flash Player. </p><br><p>Each component class has a version property which is a class property. Class properties are only available on the class itself. The version property returns a string that indicates the version of the component. To access the version property, use the following code:</p><br><pre>trace(mx.controls.TextArea.version)</pre>";

Nada más empezar le ponemos un tamaño al texto para que sea bien visible, ahora expliquemos las propiedades a través de esta tabla.

Estilo

Descripción/Uso

editable

Puede ser "true" o "false", y nos indicará si podremos cambiar el texto que haya escrito dentro del TextArea.

html

Puede ser "true" o "false", y nos indicará si podremos usar etiquetas html en nuestro texto.

maxChars

Cantidad de caracteres que podemos escribir en nuestro TextArea. Mediante programación podremos poner más caracteres de los permitidos por maxChars, ya que esta propiedad sólo afecta cuando se escribe en la caja, y no cuando mediante programación metemos datos.

password

Puede ser "true" o "false", y nos indicará si el texto se mostrará como una contraseña mediante el caracter asterisco (*).

restrict

Permite restringir los caracteres tecleables en el TextArea. Esto sólo afectará cuando se trate de teclear en el TextArea, esta propiedad no afecta a los textos insertados mediante programación. Para restringir los textos podemos usar "-" y "^".

Con "-" podremos abarcar un grupo de caracteres, por ejemplo:

mi_texto.restrict = "a-z A-Z" //Sólo se puede escribir minúsculas, mayúsculas y espacios.

Con "^" podremos eliminar los caracteres que no queremos que se puedan escribir, por ejemplo:

mi_texto.restrict = "^0-9"; //No se pueden escribir números

wordWrap

Puede ser "true" o "false", y nos indicará si nuestro texto se ajustará al ancho del componente.

vScrollPoliciy

Puede ser "on", "off" o "auto". Nos indicarán si habra, no habra o si habra en caso de que sea necesario, barras de desplazamiento verticales.

hScrollPoliciy

Puede ser "on", "off" o "auto". Nos indicarán si habra, no habra o si habra en caso de que sea necesario, barras de desplazamiento horizontales.

text

Texto que habrá dentro del componente.

length Cantidad de caracteres en nuestro texto.

El componente TextArea también posee un evento para saber cuando se ha cambiado el texto que hay dentro de él.

//Listener para cuando se cambia el texto
alCambiar = new Object();
alCambiar.change = function(evento) {
trace("Posición vertical actual: "+evento.target.vPosition);
trace("Posición vertical máxima: "+evento.target.maxVPosition);
trace("Posición horizontal actual: "+evento.target.hPosition);
trace("Posición horizontal máxima: "+evento.target.maxHPosition);
trace("Caracteres escritos en el texto: "+mi_text.length);
};
//Eventos
mi_texto.addEventListener("change", alCambiar);
De esta forma cuando cambiemos algo en nuestro texto, sabremos en que posición se ha cambiado, y cual es el scroll más grande que nos queda con el cambio efectuado. En el ejemplo actual, las posiciones horizontales, siempre son "0", esto es porque debemos cambiar un par de líneas en nuestro código de arriba, para que las barras de desplazamiento sean horizontales y no verticales.
mi_texto.wordWrap = false;
mi_texto.vScrollPolicy = "of";
mi_texto.hScrollPolicy = "on";
De esta forma, tendremos barras horizontales, y podemos ver, cómo funciona tambien el evento en los desplazamientos horizontales.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate