第四章　第八节创建定制的组件

创建定制MXML 组件可以简化构造复杂程序的过程。将程序划分为便于管理的块，你
可以编写并测试每个独立的组件。同时，你还可以在同一程序或其它程序中复用这些组件，
以加快开发的速度。
本节将教授你如何构造MXML 组件并将它们插入到应用程序中。
为定制组件创建一个测试文件
你打算构造一个定制MXML 组件，一个登录框。在你开始之前，不管怎样，需要创建
一个MXML 应用程序文件去测试它。
1. 在导航视图中选择Lessons 项目，选择File > New > MXML Application 并创建名为
Main.mxml 的应用程序文件。
2. 将导航视图中的Main.mxml 设计为被编译的默认文件，并在关联菜单中选择Set As
Default Application。
3. 在MXML 编辑器设计模式下，将组件视图中布局分类里的面板容器，拖拉到
Main.mxml 文件里。
4. 选择Main.mxml 文件中的面板容器，进行相应的属性设置：
Title: Main Application Window
Width: 375
Height: 300
X: 20
Y: 20
布局看起来就象这样：

5. 保存文件。
现在，你可以构造并测试定制的组件了。
创建定制组件文件
构造定制MXML 组件的第一步是创建文件。大多数进行定制的组件都是利用已经存在
的组件。比如你的新登录框组件，是由MXML 面板组件扩展而来，因为它提供了用于登录
表格的基本用户界面。
在开始之前，创建一个子目录去保存定制组件。
1. 在导航视图中，右击Lessons 父文件夹，并从关联菜单中选择New > Folder。
新文件夹对话框出现。
2. 在文件夹名称文本框中，输入myComponents 并点击完成。
Flex Builder 创建一个名叫myComponents 的子目录。
3. 在导航视图中选择myComponents 文件夹，选择File > New > MXML Component。
新 MXML 组件对话框出现，将Lessons/myComponents 文件夹设置为定制组件的默认文
件夹。

4. 在文件名文本框中，输入LoginBox。
5. 在弹出菜单中，选择Panel。
你想要扩展面板/panel 组件。
6. 在布局弹出菜单里，确定Absolute 被选定（它应该是默认的）。
7. 点击完成。
Flex Builder 创建并保存LoginBox.mxml 文件到myComponents 文件夹中，然后在
MXML 编辑器里打开。
如果你切换到设计模式，就会在组件视图的定制分类中看到它：

设计定制组件的布局
接下来是设计定制组件的界面布局。对于你的LoginBox 组件，你希望在布局中包括用
户名和密码框，以及一个提交/submit 按钮。
1. 确保在设计模式中LoginBox 组件是打开的。
2. 选择面板并设置相应的属性：
Title: Member Login
Width: 275
Height: 150
3. 在面板中插入两个Label 控件，并让它们垂直排列。
4. 在Label 控件右边插入两个TextInput 控件，并让它们垂直排列。
5. 选择第一个Label 控件，并将它的文本属性值设为Username。
6. 选择第二个Label 控件，并将它的文本属性值设为Password。
7. 选择第一个TextInput 控件，将txtUID 作为它的id 属性值。
8. 选择第二个TextInput 控件，将txtPwd 作为它的id 属性值，并将Display As Password
值设置为true。
9. 在第二个TextInput 控件下方插入一个按钮控件，将Login 作为它的标签属性值。
10. 放置好这些控件，使布局看起来就象这样：

请输入随后的代码（你可以改变其中的坐标值）：
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275"
height="150" title="Member Login">
<mx:Label x="10" y="12" text="Username"/>
<mx:Label x="10" y="42" text="Password"/>
<mx:TextInput x="74" y="10" id="txtUID"/>
<mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/>
<mx:Button x="178" y="70" label="Login"/>
</mx:Panel>
11. 保存文件。
为定制组件定义事件监听器
有时，你希望定制组件包含可以处理用户活动的逻辑。比如说你的LoginBox 组件，当
用户点击登录按钮时，组件对用户名和密码进行校验，然后仅向授权的用户传送数据。
本节将教授你如何为登录按钮定义一个简单的事件监听器。一个事件监听器，就是我们
常说的事件处理器。
首先，插入并修改一个Label 控件以测试事件监听器是否正确地进行调用。
1. 在设计模式中，在Login 按钮左边的空白处插入一个Label 控件，就象这样：

2. 选择Labe 控件，将lblTest 作为它的ID 属性，同时清空文本属性的值。
3. 选择按钮控件，在On Click 文本框中输入handleLoginEvent（）。
当用户点击按钮时，希望程序能够调用handleLoginEvent 功能函数。接下来，编写监听
器的程序。
4. 切换到源代码模式下，将鼠标移到<mx:Panel>标签后使之获得焦点。
5. 输入<mx:Script>直到所有标签在代码提示中被选择，按Enter 键插入标签，然后使用
结束方括号来完成标签。
Flex Builder 会生成一个包含CDATA 结构的<mx:Script>脚本块。
6. 在CDATA 结构中输入随后的代码：
private function handleLoginEvent():void {
lblTest.text = "logging in...";
//login logic
}
关键字private 表明了功能函数的作用范围。在本例中，其作用范围仅限于组件内。如
果你将它改成public，则功能函数在整个代码中均有效。关键字void 表明功能函数不返回任
何数值。
组件的代码看起来就象这样：
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275"
height="150" title="Member Login">
<mx:Script>
<![CDATA[
private function handleLoginEvent():void {
lblTest.text = "logging in...";
//login logic
}
]]>
</mx:Script>
<mx:Label x="10" y="12" text="Username"/>
<mx:Label x="10" y="42" text="Password"/>
<mx:TextInput x="74" y="10" id="txtUID"/>
<mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/>
<mx:Button x="178" y="70" label="Login" click="handleLoginEvent()"/>
<mx:Label x="74" y="72" id="lblTest"/>
</mx:Panel>
7. 保存文件。
使用定制组件
接下来的一步就是将定制组件添加到MXML 程序文件中，然后编译并运行以测试其效
果。
1. 在设计模式中，切换到Main.mxml 文件。
2. 在组件视图的定制分类中找到LoginBox 组件。

3. 将LoginBox 组件拖拉到布局中面板的右边缘。
4. 在布局中选择LoginBox 组件，进行相应的属性设置：
X: 400
Y: 20
完成的布局看起来就象这样：

5. 切换到MXML 编辑器源代码模式下，在文件中插入如下代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="myComponents.*">
<mx:Panel x="20" y="20" width="375" height="300" layout="absolute"
title="Main Application Window">
</mx:Panel>
<ns1:LoginBox x="400" y="20">
</ns1:LoginBox>
</mx:Application>
当你将定制组件拖拉到MXML 文件中时，Flex Builder 会定义一个叫ns1 的命名空间，
然后在<mx:Panel>标签后插入一个<ns1:LoginBox>标签。
6. 保存文件，编译后运行。

应用程序会显示你在主文件中所插入的LoginBox 组件。你可以在多个MXML 文件中
复用相同的组件。
点击 Login 按钮检验事件监听器是否正确调用，字符串"logging in..." 将出现在Login 按
钮的左边。（译者注：这只是一个演示定制组件的简单程序，在实际工作中，取而代之的是
进行相应处理的逻辑。）
在本节中，你创建了一个定制的MXML 组件，并在应用程序中使用它。你设计好组件
的布局，并且为控制它而定义好事件监听器。

 

 

 

 

 

 

 

 

 

加支付宝好友偷能量挖...