Flex - TextInput Control

Advertisements


Introduction

The TextInput control is a text-entry control that lets users enter and edit a single line of uniformly-formatted text..

Class declaration

Following is the declaration for spark.components.TextArea class:

public class TextInput 
   extends SkinnableTextBase

Public properties

S.N.Properties & Description
1widthInChars : Number
The default width of the control, measured in em units.

Public methods

S.N.Method & Description
1TextInput()
Constructor.

Methods inherited

This class inherits methods from the following classes:

  • 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

Flex TextInput Control Example

Let us follow the following steps to check usage of TextInput control in a Flex application by creating a test application:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file 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="textInputPanel" title="Using TextInput" 
            width="420" height="200" >
            <s:layout>
               <s:VerticalLayout  gap="10" 
                  verticalAlign="middle" horizontalAlign="center"/>	
            </s:layout>
            <s:TextInput text="Hello World" />
            <s:TextInput text="Hello World" enabled="false" />
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex TextInput Control

Advertisements
Advertisements