第一部分：Flex Builder 简介

1 什么是 Flex Builder？

Flex Builder 是一个强大的 IDE，它为 Flex 应用程序的开发提供了可视化的设计工具、代码编辑器、调试器和编译器，它使得开发者可以像开发传统桌面应用一样，使用 MXML (一种基于 XML 的标记语言) 和 ActionScript (一种基于 ECMAScript 的编程语言) 来构建富互联网应用程序。

2 Flex Builder 的版本

• Flex Builder 2: 第一个正式版本，基于 Eclipse。
• Flex Builder 3: 最经典和广泛使用的版本，功能非常成熟。
• Flash Builder 4: 从这个版本开始，Adobe 将其更名为 Flash Builder，以更好地与 Adobe Flash Platform 的整体战略保持一致。

注意： 由于 Adobe 已停止对 Flex 的官方支持，您需要从第三方网站（如旧版软件库）下载 Flex Builder 3 或 Flash Builder 4.6 等版本。

3 环境准备

1. 安装 Flex Builder 3:
   • 下载 Flex Builder 3 的安装包（通常包含一个序列号或需要破解）。
   • 运行安装程序,按照提示完成安装，它会自动集成到 Eclipse 平台中。
2. 安装 Flex SDK:
   • Flex Builder 自带了一个版本的 Flex SDK (软件开发工具包)。
   • 您也可以下载更新版本的 Flex SDK (Flex 4.x)，然后在 Flex Builder 中配置使用它，以获得更新的特性和 bug 修复。
3. 验证安装:
   • 启动 Flex Builder。
   • 创建一个新的 Flex 项目，如果可以成功编译并运行一个简单的 "Hello World" 程序，说明环境配置成功。

第二部分：核心概念

在开始编码前,需要理解 Flex 的两个核心语言：

1 MXML (Macromedia eXtensible Markup Language)

MXML 是一种用于描述用户界面布局的 XML 语言，它类似于 HTML，但功能更强大，你用它来放置按钮、文本框、图片等组件，并设置它们的属性、样式和布局。

示例：一个简单的按钮

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button label="点击我" x="100" y="100"/>
</mx:Application>

• <mx:Application> 是所有 Flex 应用程序的根标签。
• <mx:Button> 是一个按钮组件。
• label, x, y 是组件的属性。

2 ActionScript 3.0 (AS3)

ActionScript 是 Flex 的编程语言，用于处理应用程序的逻辑、事件、数据交互和动态行为，它运行在 Adobe Flash Player 或 AIR 虚拟机中。

示例：为按钮添加点击事件

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button label="点击我" x="100" y="100" click="handleClick()"/>
    <mx:Script>
        <![CDATA[
            private function handleClick():void {
                trace("按钮被点击了！");
                // 你可以在这里添加更多逻辑，比如弹出一个提示框
                // Alert.show("你好，Flex！");
            }
        ]]>
    </mx:Script>
</mx:Application>

• <mx:Script> 标签用于嵌入 ActionScript 代码。
• <![CDATA[ ... ]]> 是 XML 的标准写法，用于包含特殊字符（如 <, >），避免与 XML 标签冲突。
• click="handleClick()" 是按钮的 click 事件，当按钮被点击时，会调用 handleClick 这个函数。

第三部分：创建第一个 Flex 项目 (Hello World)

让我们通过一个完整的步骤来创建并运行第一个 Flex 应用。

步骤 1：创建新项目

1. 打开 Flex Builder。
2. 选择 File -> New -> Flex Project。
3. Project name: 输入 MyFirstApp。
4. Application type: 选择 Web application。
5. 点击 Finish。

Flex Builder 会自动生成一个基本的 MXML 文件 MyFirstApp.mxml。

步骤 2：编写代码

双击 MyFirstApp.mxml，打开编辑器，你会看到类似下面的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Label text="Hello World" x="100" y="100"/>
</mx:Application>

步骤 3：运行程序

1. 在工具栏中,确保选择了 "Run" (运行) 模式。
2. 点击绿色的 "Run" 按钮（或按 Ctrl + F11）。
3. Flex Builder 会编译你的代码，并启动一个默认的浏览器来显示你的应用程序，你应该能看到一个页面，上面写着 "Hello World"。

恭喜！你已经成功创建了你的第一个 Flex 应用！

第四部分：常用组件与布局

1 常用组件

2 常用布局

布局决定了组件在屏幕上的排列方式。

• 绝对布局: 通过 x 和 y 坐标精确控制组件位置。

  <mx:Application layout="absolute">
      <mx:Button x="50" y="50" label="按钮1"/>
      <mx:Button x="150" y="150" label="按钮2"/>
  </mx:Application>

• 垂直布局: 组件从上到下垂直排列。

  <mx:Application layout="vertical">
      <mx:Button label="按钮1"/>
      <mx:Button label="按钮2"/>
      <mx:Button label="按钮3"/>
  </mx:Application>

• 水平布局: 组件从左到右水平排列。

  <mx:Application layout="horizontal">
      <mx:Button label="按钮1"/>
      <mx:Button label="按钮2"/>
      <mx:Button label="按钮3"/>
  </mx:Application>

• 表单布局: 专门用于创建表单，标签和输入框会自动对齐。

  <mx:Application layout="vertical">
      <mx:Form>
          <mx:FormItem label="用户名:">
              <mx:TextInput/>
          </mx:FormItem>
          <mx:FormItem label="密码:">
              <mx:TextInput displayAsPassword="true"/>
          </mx:FormItem>
      </mx:Form>
  </mx:Application>

第五部分：进阶主题

1 数据绑定

数据绑定是一种将数据源自动同步到 UI 组件的机制，使用大括号 实现。

示例：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            [Bindable] // 使用 [Bindable] 标记使变量可以被绑定
            private var userName:String = "Flex 新手";
        ]]>
    </mx:Script>
    <mx:Label text="欢迎, {userName}!"/>
</mx:Application>

当 userName 变量的值改变时，Label 组件的文本会自动更新。

2 使用视图状态

视图状态允许你在同一个容器中定义和切换不同的 UI 布局。

示例：一个登录表单，有“登录”和“注册”两种状态

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:states>
        <!-- 注册状态 -->
        <mx:State name="registerState">
            <mx:SetProperty target="{passwordConfirm}" visible="true"/>
            <mx:SetProperty target="{registerBtn}" visible="true"/>
            <mx:SetProperty target="{loginBtn}" visible="false"/>
        </mx:State>
    </mx:states>
    <mx:Form>
        <mx:FormItem label="用户名:">
            <mx:TextInput id="username"/>
        </mx:FormItem>
        <mx:FormItem label="密码:">
            <mx:TextInput id="password" displayAsPassword="true"/>
        </mx:FormItem>
        <mx:FormItem label="确认密码:" visible="false" includeIn="registerState" id="passwordConfirm">
            <mx:TextInput displayAsPassword="true"/>
        </mx:FormItem>
    </mx:Form>
    <mx:Button label="登录" id="loginBtn"/>
    <mx:Button label="注册" id="registerBtn" visible="false" click="currentState='registerState'"/>
</mx:Application>

第六部分：学习资源与工具

虽然 Flex Builder 已经过时，但 Flex 的核心思想（声明式 UI、数据绑定、组件化）在现代前端框架（如 React, Vue, Angular）中依然适用。

1 推荐资源

1. Adobe 官方文档 (Archive.org):

   • Flex 3 文档: https://web.archive.org/web/20121026064838/http://livedocs.adobe.com/flex/3/
   • 这是 Flex 3 最权威、最全面的资料库，包含了所有组件的 API 参考和教程。

2. Flex Examples:

   • http://flexexamples.com/ (此网站可能无法访问，但可以在互联网档案馆找到快照)
   • 一个非常好的示例代码集合,几乎涵盖了所有常用组件的使用方法。

3. 书籍:

   • 《Flex 3 权威指南》：虽然旧，但仍然是学习 Flex 3 经典的入门书籍。
   • 《Adobe Flex 3: Training from the Source》：官方出品的培训教材，质量很高。

4. 社区:

   • Stack Overflow: 搜索 [flex] 或 [actionscript-3] 标签，可以找到大量历史问题和解答。
   • GitHub: 搜索 "flex" 或 "actionscript"，可以找到很多开源的 Flex 项目供你参考学习。

2 现代替代方案

如果你想继续使用类似 Flex 的开发体验，可以考虑以下现代工具：

• Visual Studio Code + FlexJS/NextWeb:
  • FlexJS 是 Apache 基金会维护的一个开源 Flex 项目，它可以将 Flex 代码编译成 JavaScript，从而在浏览器中运行。
  • 你可以在 VS Code 中编写 MXML 和 AS3，然后使用 FlexJS SDK 进行编译。
• 其他 RIA 框架:
  • OpenFL: 使用 Haxe 语言，可以编译成 Flash, JavaScript, C++, Native 等多种平台，是 Flash/Flex 精神的现代继承者。
  • Starling: 一个纯 ActionScript 2D 游戏引擎，专注于高性能渲染。

Flex Builder 是一个时代的产物，它开创了使用 XML 和脚本语言快速构建富客户端应用的先河，通过本教程，你应该已经掌握了 Flex Builder 的基本使用方法，并能独立创建简单的 Flex 应用。

虽然 Flex 技术本身已不再是主流，但学习它有助于理解现代前端框架的设计理念，特别是组件化和数据绑定等核心概念，希望这份教程能帮助你顺利入门 Flex 开发！