flex>文本设计 小强斋

文本的显示

一、在Flex中，提供了可以用来显示文本的控件Lable和Text。Lable控件可以显示纯文本，而Text控件既可以显示纯文本，也可以显示HTML格式的文本。

1.1 使用Label控件显示文本
创建一个文本显示Lable控件有两种方式：一种是直接拖放控件到设计视图中；另一种是编写代码。第一种方式拖放控件到设计视图中相对直观，不用编写代码。在开发小型的应用程序的时候，可以提高开发效率。

<mx:Label x="45" y="38" text="使用Label控件显示文本。" fontSize="12"/>

1.2 使用Text控件的text属性显示文本
通过设置Text控件的text属性，可以显示纯文本。

<mx:Text x="26" y="22" text="使用文本显示Text控件中的text属性" fontSize="12"/>

1.3 使用Text控件的htmlText属性显示文本
使用Text控件，除了可以创建纯文本显示外，还可以通过设置htmlText属性显示HTML格式的超文本，如字体的颜色、大小、超链接、粗细等等。

<mx:Text>
		<mx:htmlText>
			<![CDATA[
				<font size="12"><b>使用<font size="14" color="#FFFFFF"> Text </font>控件的<a href="#"> <u> htmlText </u> </a>属性显示文本<b></font>
			]]>
		</mx:htmlText>
	</mx:Text>

二、 单行文本框TextInput
文本框是系统与用户交互最基本的控件。在Flex中也提供了一个可以输入单行文本的文本框。使用TextInput控件可以创建一个单行的文本框。本节会详细讲述如何使用TextInput控件设计单行文本框。

2.1 使用TextInput控件设计文本框
TextInput控件是Flex提供的，用来输入单行文本的控件。使用时，可以直接在设计视图中拖放到设计窗口中，也可以在代码视图中编写代码。

<mx:TextInput x="22" y="23" text="使用文本输入TextInput控件" fontSize="12" width="284"/>

2.2 动态定义文本框的内容
使用ActionScript代码可以动态的定义文本框的内容。通过定义Text控件的text属性的值，可以动态的改变文本框的内容。 很多实际应用开发中经常会遇到这种情况，如在用户填写某些表单之前，会根据该表单的填写习惯或者其他信息，预先赋值，之后用户再根据实际情况修改。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			// 初始化函数，在界面加载时执行
			private function InitApp():void
			{
				// 设置 txtSalary 文本控件的值
				txtSalary.text = "0";
			}
			
			// txtSalary控件的change事件函数
			private function txtSalary_change():void
			{
				// 计算税后工资
				var salary:String = txtSalary.text;
				// 设置 txtSalaryTax 文本控件的值
				txtSalaryTax.text = String(Number(salary) * (1 - 0.15));
			}
		]]>
	</mx:Script>
	<mx:TextInput id="txtSalary" x="110" y="27" fontSize="12" change="txtSalary_change()"/>
	<mx:TextInput id="txtSalaryTax" x="107" y="73" fontSize="12"/>
	<mx:Label x="29" y="27" text="税前工资：" fontSize="14"/>
	<mx:Label x="29" y="73" text="税后工资：" fontSize="14"/>
</mx:Application>

2.3 动态创建文本框
动态创建文本框很简单，只要遍历地创建一个文本框，设置属性，并添加到页面中即可。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			import mx.controls.TextInput;
			
			private function InitApp():void
			{
				// 循环10次
				for(var i:int=1; i<=10; i++)
				{
					// 把文本框增加到舞台中
					this.addChild(CreateTextInput(i.toString(), "文本框" + i.toString(), 50, i*30));
				}
			}
			
			private function CreateTextInput(_Id:String, _text:String, _X:Number, _Y:Number):TextInput
			{
				// 创建文本框
				var textInput:TextInput = new TextInput();
				// 设置文本框的宽度
				textInput.width = 100;
				// 设置文本框的标识属性ID
				textInput.id = _Id;
				// 设置坐标
				textInput.x = _X; 
				textInput.y = _Y;
				// 设置文本框的值
				textInput.text = _text;
				
				return textInput;
			}
		]]>
	</mx:Script>
</mx:Application>

三、 多行文本TextArea
除了单行文本框外，Flex中还提供了多行文本的控件，用作多行文本的设计。使用多行文本不仅可以显示纯文本内容，还可以显示HTML格式的超文本内容。本节将详细讲述多行文本框的设计。

3.1 使用TextArea控件显示多行文本
在Flex中提供了一个多行文本输入控件TextArea。使用这个控件可以使用户输入多行的文本。

<mx:TextArea x="30" y="29" fontSize="12" width="203" height="72" />

3.2 在多行文本框中显示HTML文本
在多行文本框中，除了可以显示纯文本内容之外，还可以显示HTML格式的内容文本。要显示HTML格式的文本，需要在htmlText属性里面设置内容。

<mx:htmlText>
			<![CDATA[
				<p>
					<a href="#">这是一个超级链接</a>
					<img src='asset/help.gif'>
					<b>这是加粗的字体。</b>
					<font color="#0000ff">这是带有颜色的字体</font>
				<p>
			]]>
		</mx:htmlText>
	</mx:TextArea>

四、文本编辑器
多行文本框在显示HTML格式内容的时候，是通过htmlText属性的HTML代码实现的。普通用户是不懂得HTML代码的，如果普通用户要自己设置HTML格式文本，就需要有个所见即所得的编辑器。在Flex中，就提供了这样的HTML文本编辑器。本节将详细讲解使用RichTextEditor控件设计文本编辑器。

4.1 使用RichTextEditor控件创建一个文本编辑器
在Flex中，可以使用RichTextEditor控件设计一个所见即所得的文本编辑器。在编辑器中，用户可以设置字体、字体大小和颜色、对齐方式、粗细等。

<mx:RichTextEditor id="richText1"/>

4.2 添加和移除文本编辑器的工具栏内容
默认情况下RichTextEditor编辑器的工具栏中，只有几个工具按钮。通过toolbar属性的addChild()方法可以自定义添加和移除工具栏的内容，使得编辑器的功能得以扩展。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			
			/**
			 * 初始化
			 * */
			private function InitApp():void
			{
				// 创建一个“打印”按钮
				var but:Button = new Button();
				but.label = "打印";
				but.addEventListener("click",PrintDialog);
				// 添加“打印”按钮到工具栏中
				rte.toolbar.addChild(but);
			}
			
			/**
			 * 打印事件
			 * */
			private function PrintDialog():void
			{
				// 弹出打印对话框
			}
		]]>
	</mx:Script>
	<mx:RichTextEditor id="rte" x="10" y="10" title="Title" width="451">
	</mx:RichTextEditor>
</mx:Application>

五、获取选择的文本
为了增加用户的交互性，提供更加友好的界面和操作，需要获取文本框中选择的文本。实际应用的例子很多，如查找和替换文本的部分内容等。在Flex中，同样也提供了方法可以方便的获取选择的文本。

5.1 获取文本框中选择的文本
获取文本框中选择文本的方式是通过TextRange类，被选择的文本则保存在TextRange类的text属性的值中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.textClasses.TextRange;
			
			/**
			 * 单行文本框的鼠标焦点改变事件
			 * */
			private function txtSelected_FocusChange():void
			{
				// 创建一个 TextRange 对象，获取选中的内容
				var mySelect:TextRange = new TextRange(txtSelected, true);
				lbSelected.text = mySelect.text;
			}
			
			/**
			 * 多行文本框的鼠标焦点改变事件
			 * */
			private function taxSelected_FocusChange():void
			{
				// 创建一个 TextRange 对象，获取选中的内容
				var mySelect:TextRange = new TextRange(taxSelected, true);
				lbSelected.text = mySelect.text;
			}
		]]>
	</mx:Script>
	<mx:TextInput id="txtSelected" x="10" y="10" mouseFocusChange="txtSelected_FocusChange()" 
		fontSize="12" width="211"/>
	<mx:Label id="lbSelected" x="10" y="132" text="选择的文本内容" fontSize="12"/>
	<mx:TextArea id="taxSelected" x="10" y="63" mouseFocusChange="taxSelected_FocusChange()" 
		width="211" fontSize="12"/>
</mx:Application>

5.2 获取文本编辑器中选择的文本
同样的，使用TextRange类也可以获取文本编辑器中选择的文本。不同的是，要获取HTML格式的文本，需要使用htmlText属性。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.textClasses.TextRange;
			
			/**
			 * 文本编辑器的鼠标焦点改变事件
			 * */
			private function rteSelected_FocusChange():void
			{
				// 创建 TextRange 对象，获取选择的文本
				var mySelected:TextRange = rteSelected.selection;
				lbSelected.htmlText = mySelected.htmlText;
			}
		]]>
	</mx:Script>
	<mx:RichTextEditor id="rteSelected" x="10" y="10" title="Title" 
		mouseFocusChange="rteSelected_FocusChange()">
	</mx:RichTextEditor>
	<mx:Label id="lbSelected" x="10" y="333" text="Label" width="325" 
		height="63" fontSize="12"/>
	
</mx:Application>

六、HTML文本编辑器设计和代码视图切换
在目前最流行的Blog网站中，也提供了编写Blog日志内容的编辑器。大部分编辑器既为普通用户提供了所见即所得的视图界面，同时也为高级用户提供了HTML代码页面，可以手动编写HTML代码。这种两种视图之间切换的功能使用Flex也同样可以轻松的实现。 本例仿照Blog系统中的文本编辑器，实现设计界面和视图界面互相切换的效果和功能。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			
			/**
			 * 初始化，添加文本编辑器的设计和代码按钮
			 * */
			private function InitApp():void
			{
				// 隐藏
				taHtmlEditor.visible = false;
				btnDesign1.visible = false;
				btnCode1.visible = false;
				
				// 创建设计按钮
				var btnDesign:Button = new Button();
				btnDesign.label = "设计";
				btnDesign.addEventListener(MouseEvent.CLICK, btnDesign_Click);
				
				// 创建代码按钮
				var btnCode:Button = new Button();
				btnCode.label = "代码";
				btnCode.addEventListener(MouseEvent.CLICK, btnCode_Click);
				
				// 添加两个按钮到文本编辑器的工具栏中
				rteHtmlEditor.toolbar.addChild(btnDesign);
				rteHtmlEditor.toolbar.addChild(btnCode);
			}
			
			/**
			 * 设计按钮的单击事件
			 * */
			private function btnDesign_Click(e:MouseEvent):void
			{
				// 设置 taHtmlEditor 不可见
				taHtmlEditor.visible = false;
				// 设置两个按钮不可见
				btnDesign1.visible = false;
				btnCode1.visible = false;
				// 设置 rteHtmlEditor 可见
				rteHtmlEditor.visible = true;
			}
			
			/**
			 * 代码按钮的单击事件
			 * */
			private function btnCode_Click(e:MouseEvent):void
			{
				// 设置 taHtmlEditor 可见
				taHtmlEditor.visible = true;
				// 设置两个按钮可见
				btnDesign1.visible = true;
				btnCode1.visible = true;
				// 设置 rteHtmlEditor 不可见
				rteHtmlEditor.visible = false;
			}
			
			/**
			 * 设计界面 change 事件
			 * */
			private function rteHtmlEditor_change():void
			{
				// 同步两个视图中的内容
				taHtmlEditor.text = rteHtmlEditor.htmlText;
			}
			
			/**
			 * 代码界面 change 事件
			 * */
			private function taHtmlEditor_change():void
			{
				// 同步两个视图中的内容
				rteHtmlEditor.htmlText = taHtmlEditor.text;
			}
		]]>
	</mx:Script>
	<mx:RichTextEditor id="rteHtmlEditor" x="10" y="10" title="Title" width="757" height="385"
		change="rteHtmlEditor_change()">
	</mx:RichTextEditor>
	<mx:TextArea id="taHtmlEditor" x="10" y="10" height="355" width="757" change="taHtmlEditor_change()" fontSize="12"/>
	<mx:Button id="btnDesign1" x="654" y="373" label="设计" click="btnDesign_Click(event)"/>
	<mx:Button id="btnCode1" x="710" y="373" label="代码" click="btnCode_Click(event)"/>
</mx:Application>