一步一步学Flex系列（1）：创建一个基本的Flex应用

妖狐艹你老母 2021-09-10 07:06 243阅读 0赞

一步一步学 Flex 系列（ 1 ）：创建一个基本的 Flex 应用

FLEX3版本发布了，无论从ActionScript3还是Air都给我们带来了很多的惊喜，全面支持AIR、代码重构、内存和性能分析器 (profilers)、高级Datagrid组件、Web service introspection　Web服务的内省一系列新特性更是给我们带来了不少惊喜。《一步一步学Flex 3系列》文章将从Flex3基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Flex3的开发。

本文为系列第一篇创建一个基本的 FLEX 3 应用，不能免俗，从最简单的 Hello Word  开始。

**建立项目**

安装完 Flex 3 之后打开 Flex ，打开新建项目对话框，可以看到 Flex 3 Application 项目模板。 ![1-1.gif][]

要想让 Flex 3 运行，在之后的对话框中可供我们建立一个  Web Application  或 Desktop Accplication  前者需要  Flash Player9 的支持 , 后者则需要  Adobe AIR 支持。我们在这示例中先用  Desktop Application 类型

![1-2.gif][]  项目存放目录

![1-3.gif][]  接下来配置输出目录

![1-4.gif][]

创建完成之后项目结构如下图所示：

![1-5.gif][]

**理解MXML文件**

在建立一个Flex应用程序后，我们什么都不做，可以看到在资源管理器中有一个.MXML文件。

![1-6.gif][] 该文件是一个纯粹的xml描述文件和ActionScript。   Flex 3 Builder已经自动给我们打开了 HelloWorld.mxml文件

![1-7.gif][]

可以看到该文件遵循 XML 规范　并以 <mx:WindowedApplication> 标签为根

**创建一个HelloWorld　程序**

现在我们创建一个简单的 Hello Word Flex 程序，使用如下 MXML 创建一个简单的按钮 ： ![1-8.gif][] 运行后效果：

![1-9.gif][] 为按钮添加click事件，在MXML编辑器中输入事件名称click之后，我们键入: click="mx.controls.Alert.show('Hello World!', 'OIDN.NET')" ![1-10.gif][] 再运行上面的程序并单击按钮，将弹出标题为OIDN.NET的对话框 Hello World

![1-11.gif][]

**结束语**

本篇文章是使用 Flex Builder 3 开发 Flex 应用程序的一个入门。

\[本日志由 刘万林 于 2008-06-14 10:27 AM 编辑\] ![From.gif][] **文章来自:** [本站原创][Link 1] ![icon_trackback.gif][] **引用通告地址:** [http://www.oidn.net/blog/trackback.asp?tbID=271&action=view][http_www.oidn.net_blog_trackback.asp_tbID_271_action_view] ![tag.gif][] **Tags:** [flex3][] [flex3][flex3 1] [flex2][] [flex2][flex2 1] [flex][] [flex][flex 1] [flex 3][] [flex 3][flex 3 1] [flex 2][] [flex 2][flex 2 1] [ActionScript][] [ActionScript][ActionScript 1] [ActionScript 3][] [ActionScript 3][ActionScript 3 1] [一步一步学FLEX][FLEX] [一步一步学FLEX][FLEX 1] [FLEX学习][FLEX 2] [FLEX学习][FLEX 3]

[1-1.gif]: http://www.oidn.net/blog/flex3/1/1-1.gif
[1-2.gif]: http://www.oidn.net/blog/flex3/1/1-2.gif
[1-3.gif]: http://www.oidn.net/blog/flex3/1/1-3.gif
[1-4.gif]: http://www.oidn.net/blog/flex3/1/1-4.gif
[1-5.gif]: http://www.oidn.net/blog/flex3/1/1-5.gif
[1-6.gif]: http://www.oidn.net/blog/flex3/1/1-6.gif
[1-7.gif]: http://www.oidn.net/blog/flex3/1/1-7.gif
[1-8.gif]: http://www.oidn.net/blog/flex3/1/1-8.gif
[1-9.gif]: http://www.oidn.net/blog/flex3/1/1-9.gif
[1-10.gif]: http://www.oidn.net/blog/flex3/1/1-10.gif
[1-11.gif]: http://www.oidn.net/blog/flex3/1/1-11.gif
[From.gif]: http://www.oidn.net/blog/images/From.gif
[Link 1]: http://www.oidn.net/blog/
[icon_trackback.gif]: http://www.oidn.net/blog/images/icon_trackback.gif
[http_www.oidn.net_blog_trackback.asp_tbID_271_action_view]: http://www.oidn.net/blog/trackback.asp?tbID=271&action=view
[tag.gif]: http://www.oidn.net/blog/images/tag.gif
[flex3]: http://www.oidn.net/blog/default.asp?tag=flex3
[flex3 1]: http://technorati.com/tag/flex3
[flex2]: http://www.oidn.net/blog/default.asp?tag=flex2
[flex2 1]: http://technorati.com/tag/flex2
[flex]: http://www.oidn.net/blog/default.asp?tag=flex
[flex 1]: http://technorati.com/tag/flex
[flex 3]: http://www.oidn.net/blog/default.asp?tag=flex+3
[flex 3 1]: http://technorati.com/tag/flex%203
[flex 2]: http://www.oidn.net/blog/default.asp?tag=flex+2
[flex 2 1]: http://technorati.com/tag/flex%202
[ActionScript]: http://www.oidn.net/blog/default.asp?tag=ActionScript
[ActionScript 1]: http://technorati.com/tag/ActionScript
[ActionScript 3]: http://www.oidn.net/blog/default.asp?tag=ActionScript+3
[ActionScript 3 1]: http://technorati.com/tag/ActionScript%203
[FLEX]: http://www.oidn.net/blog/default.asp?tag=%E4%B8%80%E6%AD%A5%E4%B8%80%E6%AD%A5%E5%AD%A6FLEX
[FLEX 1]: http://technorati.com/tag/一步一步学FLEX
[FLEX 2]: http://www.oidn.net/blog/default.asp?tag=FLEX%E5%AD%A6%E4%B9%A0
[FLEX 3]: http://technorati.com/tag/FLEX学习