Flex - Control de área de texto

Introducción

El control TextArea es un control de entrada de texto que permite a los usuarios ingresar y editar varias líneas de texto formateado.

Declaración de clase

A continuación se muestra la declaración de spark.components.TextArea clase -

public class TextArea 
   extends SkinnableTextBase

Propiedades publicas

No Señor	Propiedades y descripción
1	content : Object Esta propiedad está diseñada para su uso en MXML en tiempo de compilación; para obtener o establecer contenido de texto enriquecido en tiempo de ejecución, utilice la propiedad textFlow en su lugar.
2	heightInLines : Number La altura predeterminada del control, medida en líneas.
3	textFlow : flashx.textLayout.elements:TextFlow TextFlow que representa el texto enriquecido que muestra este componente.
4	widthInChars : Number El ancho predeterminado del control, medido en unidades em.

Métodos públicos

No Señor	Método y descripción
1	TextArea() Constructor.
2	getFormatOfRange (requestedFormats:Vector.<String> = null, anchorPosition:int = -1, activePosition:int = 1):flashx.textLayout.formats:TextLayoutFormat Devuelve un objeto TextLayoutFormat que especifica los formatos calculados para el rango de caracteres especificado.
3	scrollToRange(anchorPosition:int = 0, activePosition:int):void Se desplaza para que el rango de texto sea visible en el contenedor.
4	setFormatOfRange (format:flashx.textLayout.formats:TextLayout Format, anchorPosition:int = -1, activePosition:int = -1):void Aplica los formatos especificados a cada elemento en el rango especificado que corresponden al formato dado.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

spark.components.supportClasses.SkinnableTextBase
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control Flex TextArea

Sigamos los siguientes pasos para verificar el uso del control TextArea en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />   
   <s:BorderContainer width = "550" height = "400" id = "mainContainer" 
      styleName = "container">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "textAreaPanel" title = "Using TextArea"
            width = "420" height = "200">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:TextArea width = "400" height = "100">
               <s:content>
                  This is <s:span color = "#FF0000">HTML text</s:span>
                  in an <s:span fontWeight = "bold">TextArea control</s:span>.
                  <s:span textDecoration = "underline">content</s:span> property
                  of the <s:span color = "#008800">TextArea control</s:span> 
                  can be used to include basic HTML markup in including
                  <s:a href = "http://www.tutorialspoint.com" 
                  target = "_blank">links</s:a>.
               </s:content>
            </s:TextArea>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page