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>
