如何设置Flex中TextArea控件文字位置的例子

下面的例子展示了如何通过设置Flex的TextArea控件中的 textAlign风格，来设定该控件文字的左对齐，右对齐，居中对齐或者完全的识别一个文字块(block)。

下面是具体的程序源代码：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- http://blog.flexexamples.com/2008/03/08/setting-the-text-alignment-in-a-textarea-control-in-flex/ -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
4.         layout="vertical"
5.         verticalAlign="middle"
6.         backgroundColor="white">
8.     <mx:Script>
9.         <![CDATA[
10.             import mx.events.ItemClickEvent;
12.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
13.                 textArea.setStyle("textAlign", evt.label);
14.             }
15.         ]]>
16.     </mx:Script>
18.     <mx:Array id="arr">
19.         <mx:String>left</mx:String>
20.         <mx:String>center</mx:String>
21.         <mx:String>right</mx:String>
22.         <mx:String>justify</mx:String>
23.     </mx:Array>
25.     <mx:String id="lorem" source="lorem.txt" />
27.     <mx:ApplicationControlBar dock="true">
28.         <mx:Form styleName="plain">
29.             <mx:FormItem label="textAlign:">
30.                 <mx:ToggleButtonBar id="toggleButtonBar"
31.                         dataProvider="{arr}"
32.                         selectedIndex="0"
33.                         itemClick="toggleButtonBar_itemClick(event);" />
34.             </mx:FormItem>
35.         </mx:Form>
36.     </mx:ApplicationControlBar>
38.     <mx:TextArea id="textArea"
39.             text="{lorem}"
40.             textAlign="left"
41.             width="100%"
42.             height="100%" />
44. </mx:Application>