目录
- 用MXML和ActionScript 编程
- 创建第一个程序
- 处理事件
- 定位和布局Flex组件
- 嵌入程序资源
Adobe?把Flex作为一个ActionScript类库实现。这个类库包含组件(容器和控件)、管理类、数据服务类、以及所有其他特性的类。你通过带有类库的MXML 和 ActionScript来开发应用程序。
MXML
MXML是一个XML语言,你可以使用它来为Adobe? Flex?应用程序布局用户界面。也可以使用MXML来定义程序的非可视组件,比如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。
比如,你可以使用如下的MXML语言,通过
<mx:Button>
标签创建一个按钮控件实例:
<mx:Button id="myButton" label="I'm a button!"/>
你可以设置id属性给些按钮实例一个唯一的名字,随后你可以通过id属性引用这个实例。label属性设定在按钮实例上显示的文本。
下面的例子展示了创建一个显示按钮控件的Flex程序的完整代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="center" > <mx:Button id="myButton" label="I'm a button!" /> </mx:Application>
在写了一个Flex程序之后,你必须使用Flex编译器编译它。Flex编译器是一个叫mxmlc的小型可执行文件,位于Flex 2安装文件夹Flex SDK 2.0bin 之下。
提示: 确保 Flex 2安装文件夹Flex SDK 2.0bin 在你系统路径中。如果Flex编译器存在于你的系统路径,你可以通过命令行调用它,不管你的当前目录在哪。
操作规程
1. 用常用的文本编辑器新建一个文件 (比如, 记事本)并保存为 MyFirst.mxml。
2. 把前面的例子输入MyFirst.mxml,保存文件。
3. 选择 开始>所有程序>附件>命令提示符 打开命令行窗口。
4. 切换到包含步骤1中创建的Flex 程序的文件夹。
5. 键入以下命令调用Flex编译器:
mxmlc --strict=true --file-specs MyFirst.mxml
命令中以两个短划线开头的两个元素就是编译器选项,用来定义Flex编译器的行为。在前例中,设定 --strict 选项为true 强制编译器为精确模式。在精确模式中,编译器高度期望你的代码。比如,它认为你静态键入变量。使用--file-specs 选项指定编译的MXML文件。
6. 你可以在IE浏览器中双击打开编译产生的SWF文件,或在命令行键入文件名用独立的Adobe Flash Player 9播放器打开。
提示: 你也可以使用Adobe Flex Builder 2创建和编译Flex程序,Adobe Flex Builder 2是一个带有可视化视图的Flex集成开发环境(IDE)。有关Flex Builder 2更多信息,请看 使用 Flex Builder 2 。
ActionScript
MXML标签对应ActionScript类或类道具。当你编译Flex程序,Flex分析MXML标签并生成对应的ActionScript类。然后编译器把这些ActionScript类编译成存储在SWF文件中的SWF字节码。
提示: 要查看Flex生成的中间ActionScript文件,在mxmlc 命令中加入 --keep-generated-actionscript 选项。
继续上面的例子,Flex提供了定义Flex按钮控件的ActionScript 按钮类。
注意: 前例中,
<mx:Button>
标签里的mx前缀是名字空间。它通过使用程序标签中唯一的URL指定。mx前缀把mx名字空间里每一个组件映射到它的全限定类名上。这就是Flex编译器如何在mx名字空间中找到ActionScript类对应的MXML标签的。
下面的例子示范了如何使用ActionScript创建按钮控件。结果和使用MXML的一样。
<?xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/GettingStartedActionScript/index.html" creationComplete="creationCompleteHandler();" width="300" height="80" > [CDATA[ import mx.controls.Button; import mx.events.FlexEvent; private var myButton:Button; private function creationCompleteHandler():void { // Create a Button instance and set its label myButton = new Button(); myButton.label = "I'm a button!"$$ // Get notified once button component has been created and processed for layout myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler); // Add the Button instance to the DisplayList addChild (myButton); } private function buttonCreationCompleteHandler ( evt:FlexEvent ):void { // Center the button myButton.x = parent.width/2 - myButton.width/2; myButton.y = parent.height/2 - myButton.height/2; } ]]>
当通过ActionScript创建Flex组件时,必须导入组件的类。也必须使用addChild()程序把组件加入到程序的DisplayList中使其可见。通过比较此例与相同MXML版本的长度与复杂度, 你可以看到简单、基于标签、声明式语法的MXML语言是如何节省你编写多行ActionScript代码来布局组件的时间的。
注意: 此例示范了带Script标签的内嵌ActionScript的用法,它是在你Flex程序中引入ActionScript的一个可能方法。其他方法有把Script模块分离到外部ActionScript文件中或使用ActionScript类。
更多信息...
有关MXML和ActionScript更多信息,请参见 Flex 2 开发指南 的"Developing applications in MXML," "MXML Syntax,"和"Using ActionScript" 章节。
关于作者
Aral Balkan喜欢表演和唱歌,他领导开发团队,设计用户体验, 是富互联网应用的体系结构设计师,并且运行OSFlash.org 网站,伦敦Macromedia用户组,还有他的公司 Ariaware。 他喜欢谈论设计模式并在书和报纸上发表。他也是Arp的作者, Flash平台上的开源RIA架构。 Aral十分固执,有活力和充满热情。他喜欢笑,甚至能边嚼口香糖边走路。
=====俺们就这样分了======
翻译原文:http://www.yeeyan.com/articles/view/888888/4086
译者: cccccc 01/16/2008 原文