tourdeflexmodules/src/spark/controls/TextInputExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--

  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Script>
		<![CDATA[
			import spark.events.TextOperationEvent;
			import spark.components.RichEditableText;
			
			private function txtChangeHandler(event:TextOperationEvent):void
			{
				var textInput:TextInput = event.target as TextInput;
				textInput.clearStyle("color");
			}
			

			protected function changeHandler(event:MouseEvent):void
			{
				txt.maxChars = this.maxChars.value;
				txt.restrict = this.restrictStr.text;
				RichEditableText(txt.textDisplay).textFlow.textAlign = alignVal.selectedItem;
				RichEditableText(txt.textDisplay).textFlow.direction = direction.selectedItem;
			}

		]]>
	</fx:Script>
	 
	<s:Panel title="TextInput Sample" width="100%" height="100%">
		
		<s:layout>
			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:HGroup verticalAlign="middle">
			<s:Label text="Specify Max Character Input:"/>
			<s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
		</s:HGroup>
		<s:HGroup verticalAlign="middle">
			<s:Label text="Specify Text Alignment:"/>
			<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
				<s:dataProvider>
					<mx:ArrayList>
						<fx:String>left</fx:String>
						<fx:String>right</fx:String>
						<fx:String>center</fx:String>
						<fx:String>justify</fx:String>
						<fx:String>start</fx:String>
						<fx:String>end</fx:String>
					</mx:ArrayList>
				</s:dataProvider>
			</s:DropDownList>
		</s:HGroup>
		<s:HGroup verticalAlign="middle">
			<s:Label text="Direction:"/>
			<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
				<s:dataProvider>
					<mx:ArrayList>
						<fx:String>rtl</fx:String>
						<fx:String>ltr</fx:String>
					</mx:ArrayList>
				</s:dataProvider>
			</s:DropDownList>
		</s:HGroup>
		<s:HGroup verticalAlign="middle">
			<s:Label text="Specify characters to restrict (use - for range):"/>
			<s:TextInput id="restrictStr" change="this.changeHandler(null)"/> 
		</s:HGroup>
		<s:HGroup verticalAlign="middle">
			<s:Label text="Text Input:"/>
			<s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" 
						 change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>	
		</s:HGroup>
		<mx:Spacer height="10"/>
		<s:Label width="85%" horizontalCenter="0"
				 text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the 
textFlow object from the TLF framework. Uses of some are shown above."/>
		
	</s:Panel>
	

</s:Module>