Flash Builder 4.7教程从哪学？新手怎么入门？-贝博恩创新科技网

Flash Builder 4.7 是 Adobe 公司发布的一款强大的集成开发环境，主要用于开发基于 Adobe Flex 框架和 Adobe AIR 技术的富互联网应用程序和桌面应用程序，虽然它已经不再是当前的主流开发工具（现在推荐使用 Animate CC 或纯代码框架如 Apache Flex），但对于维护旧项目、学习 Flex 历史或开发特定 AIR 它依然非常有价值。

（图片来源网络，侵删）

本教程将从零开始，带您了解 Flash Builder 4.7 的核心概念和基本操作。

第一部分：Flash Builder 4.7 简介

什么是 Flash Builder 4.7？

Flash Builder 4.7（早期称为 Flex Builder）是一个基于 Eclipse 的 IDE,它的核心功能是：

Flex 应用开发：使用 MXML（一种基于 XML 的标记语言）和 ActionScript 3.0 来构建跨浏览器的 Web 应用程序。
AIR 应用开发：创建可以在 Windows, macOS, Linux 和移动设备（Android, iOS）上运行的桌面和移动应用程序。
强大的调试器：提供可视化的调试工具,帮助您快速定位和修复代码问题。
数据集成：方便地连接后端数据服务（如 BlazeDS, WebService, RESTful API）。

为什么现在还有人用它？

维护旧项目：许多企业级应用（如管理系统、内部工具）是用 Flex 开发的，Flash Builder 是维护这些项目的最佳工具。
AIR 应用：对于需要原生 API 访问（如文件系统、通知）的桌面工具，AIR 仍然是一个可行的选择。
学习 Flex 框架：Flex 是理解现代前端框架（如 React, Vue）中数据绑定、组件化思想的重要历史基础。

环境准备

安装 Flash Builder 4.7：
- 您可以从 Adobe 官网（需要 Adobe 账号）下载安装程序，请确保您的操作系统是兼容的（如 Windows 7, macOS 10.9 等）。
- 安装过程中会提示您安装 Adobe AIR SDK 和 Flash Player。
安装 JDK：
- Flash Builder 4.7 需要 Java Development Kit (JDK) 7 或 8 来运行，请确保已正确安装并配置了环境变量 JAVA_HOME。
安装 Flex SDK：
Flash Builder 自带了标准的 Flex SDK，但您也可以下载并配置其他版本的 SDK（如 Apache Flex SDK）以获得更新的功能或更好的性能。

第二部分：创建您的第一个 Flex 项目

我们将创建一个经典的 "Hello, World!" 应用程序。

（图片来源网络，侵删）

步骤 1：新建项目

打开 Flash Builder 4.7。
点击菜单栏的 文件 -> 新建 -> Flex 项目。

步骤 2：配置项目

项目名称：输入 HelloWorld。
应用程序类型：
- 选择 Web (在浏览器中运行)。
- 目标运行时：选择 Flash Player。
应用程序服务器类型：选择 无,因为我们现在不连接后端服务。
点击 完成。

Flash Builder 会自动为您生成项目结构，包括主应用程序文件 HelloWorld.mxml。

步骤 3：编写代码

在 src 文件夹下，双击打开 HelloWorld.mxml。

默认代码看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（如服务、值对象）放在此处 -->
    </fx:Declarations>
</s:Application>

我们在 <s:Application> 标签内添加一个 Label 组件来显示文字,修改代码如下：

（图片来源网络，侵删）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">
    <!-- 添加一个 Label 组件 -->
    <s:Label text="Hello, Flex World!"
             fontSize="24"
             horizontalCenter="0"
             verticalCenter="0"/>
    <fx:Declarations>
        <!-- 将非可视元素（如服务、值对象）放在此处 -->
    </fx:Declarations>
</s:Application>

<s:Label>：这是一个文本标签组件。
text="..."：显示的文本内容。
fontSize="24"：字体大小。
horizontalCenter="0" 和 verticalCenter="0"：这是 Flex 的布局管理,让这个标签在父容器中水平和垂直居中。

步骤 4：运行项目

在代码编辑器中,右键点击任意位置。
选择 运行方式 -> Flex 应用程序。
Flash Builder 会编译项目，并在默认浏览器中打开它，您将看到一个居中显示 "Hello, Flex World!" 的页面。

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

第三部分：Flex 核心概念

MXML vs. ActionScript

MXML (Macromedia eXtensible Markup Language)：
- 基于 XML 的标记语言,用于描述用户界面。
- 就像 HTML 一样，您用它来放置按钮、文本框、图片等组件,并设置它们的布局和样式。
- <s:Button label="Click Me" />
ActionScript 3.0 (AS3)：
- 基于 ECMAScript 的编程语言,用于处理逻辑。
- 您用它来编写事件处理函数（如按钮点击）、数据验证、与服务器通信等。
- button.addEventListener(MouseEvent.CLICK, handleClick);

MXML 和 ActionScript 可以完美结合：MXML 可以声明式地创建组件，并通过 id 属性让 ActionScript 代码引用它；ActionScript 可以动态地创建和修改 MXML 组件。

数据绑定

这是 Flex 最强大的特性之一，它允许您将 UI 组件的属性（如文本）与 ActionScript 中的变量自动同步。

示例：

在 HelloWorld.mxml 的 <fx:Declarations> 中添加一个变量：

<fx:Script>
    <![CDATA[
        [Bindable] // 关键字，表示这个变量可以被数据绑定
        private var greeting:String = "Welcome to Flex!";
    ]]>
</fx:Script>

修改 <s:Label> 的 text 属性，使用花括号绑定这个变量：
```
<s:Label text="{greeting}" ... />
```

如果您在 ActionScript 中修改 greeting 的值（greeting = "Data binding works!";），Label 的文本会自动更新，无需手动操作 UI。

组件与布局

组件：Flex 提供了丰富的 UI 组件库，如 Button, TextInput, List, DataGrid 等,您还可以创建自己的自定义组件。
布局容器：用于组织和排列其他组件。
- <s:Application>：根容器。
- <s:VGroup>：垂直排列子组件。
- <s:HGroup>：水平排列子组件。
- <s:Panel>：一个带标题和边框的面板,内部可以放置其他组件。
- <s:BorderContainer>：一个带边框的容器,非常灵活。

第四部分：创建一个简单的 AIR 桌面应用

AIR 应用和 Web 应用的区别在于，它不运行在浏览器中，而是直接在操作系统上运行,因此可以访问更多本地资源。

步骤 1：新建 AIR 项目

文件 -> 新建 -> Flex 项目。
项目名称：输入 SimpleAIRApp。
应用程序类型：选择桌面。
目标运行时：选择 AIR。
点击 完成。

步骤 2：设计界面

打开 SimpleAIRApp.mxml，设计一个简单的界面,包含一个按钮和一个文本区域。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       title="Simple AIR App">
    <s:layout>
        <s:VerticalLayout paddingTop="20" paddingLeft="20" gap="10"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            protected function saveButtonClick(event:MouseEvent):void
            {
                // 使用 AIR 的 File API 来保存文件
                var file:File = File.desktopDirectory.resolvePath("my_note.txt");
                var stream:FileStream = new FileStream();
                stream.open(file, FileMode.WRITE);
                stream.writeUTFBytes(noteArea.text);
                stream.close();
                // 显示提示信息
                statusText.text = "文件已保存到桌面: " + file.nativePath;
            }
        ]]>
    </fx:Script>
    <s:TextArea id="noteArea" width="400" height="200" />
    <s:Button label="保存笔记到桌面" click="saveButtonClick(event)" />
    <s:Label id="statusText" color="#0B5394" />
</s:WindowedApplication>

步骤 3：理解代码

<s:WindowedApplication>：这是 AIR 应用的根容器，而不是 Web 应用的 <s:Application>。
<s:VerticalLayout>：将内部的子组件垂直排列。
<fx:Script>：包含 ActionScript 逻辑。
File.desktopDirectory：这是 AIR 的 API，代表用户的桌面目录，这是 Web 应用无法做到的！
FileStream：用于读写文件的流。
click="saveButtonClick(event)"：为按钮绑定点击事件，当用户点击时，调用 saveButtonClick 函数。

步骤 4：运行和打包

运行：右键点击项目，选择 运行方式 -> Flex 应用程序，会弹出一个独立的 AIR 窗口。
打包：
- 右键点击项目，选择 导出 -> 发布 AIR 应用程序。
- 选择目标平台（如 Windows 或 macOS）。
- 设置应用程序 ID（如 com.mycompany.SimpleAIRApp）、版本、图标等。
- 选择输出位置。
- 点击 完成。
- 您将得到一个 .air 安装包,可以在其他电脑上安装和运行。

第五部分：进阶学习资源

由于 Flash Builder 4.7 比较古老，官方文档已不再维护,以下是推荐的学习资源：

Adobe 官方文档存档：
- Flash Builder 4.7 帮助 (Adobe Help Center)
- Flex 4.6 SDK 文档 (与 4.7 SDK 版本接近)
Flex.org (Apache Flex 官方)：
- Apache Flex 官网：Flex 由 Apache 基金会维护，这里有最新的 SDK 和文档,很多概念是相通的。
社区和博客：
- 博客园/CSDN：搜索 "Flex 教程"、"ActionScript 3.0",有很多国内开发者留下的宝贵文章和示例。
- Stack Overflow：搜索 flex 或 actionscript-3,可以找到大量已解决的问题。

Flash Builder 4.7 是一个功能强大但已过时的 IDE，通过本教程，您应该已经掌握了它的基本使用方法，包括创建项目、编写 MXML 和 ActionScript、理解数据绑定、开发 Web 和 AIR 应用。

虽然现在用它进行新项目开发已不主流，但掌握 Flex 的思想对于理解现代前端框架和进行遗留项目维护依然非常有价值,祝您学习愉快！

Flash Builder 4.7教程从哪学？新手怎么入门？

第一部分：Flash Builder 4.7 简介

什么是 Flash Builder 4.7？

为什么现在还有人用它？

环境准备

第二部分：创建您的第一个 Flex 项目

步骤 1：新建项目

步骤 2：配置项目

步骤 3：编写代码

步骤 4：运行项目

第三部分：Flex 核心概念

MXML vs. ActionScript

数据绑定

组件与布局

第四部分：创建一个简单的 AIR 桌面应用

步骤 1：新建 AIR 项目

步骤 2：设计界面

步骤 3：理解代码

步骤 4：运行和打包

第五部分：进阶学习资源

Team Win Recovery教程怎么用？

iPad与iPhone互联，体验差异在哪？

createinstall free教程怎么用？

foru designs是何品牌，有何设计理念与特色？

Mac PS CC教程视频如何高效学？

myfitnesspal支持哪些品牌？

区块链如何革新互联网金融？

Kindle Fire互联网服务中断，为何事？

Airport为何连不上网？

iPhone与iPad如何协同互联网体验？

沃3G手机上网与沃3G连接互联网有何区别？

Flash Builder 4.7教程从哪学？新手怎么入门？

第一部分：Flash Builder 4.7 简介

什么是 Flash Builder 4.7？

为什么现在还有人用它？

环境准备

第二部分：创建您的第一个 Flex 项目

步骤 1：新建项目

步骤 2：配置项目

步骤 3：编写代码

步骤 4：运行项目

第三部分：Flex 核心概念

MXML vs. ActionScript

数据绑定

组件与布局

第四部分：创建一个简单的 AIR 桌面应用

步骤 1：新建 AIR 项目

步骤 2：设计界面

步骤 3：理解代码

步骤 4：运行和打包

第五部分：进阶学习资源

相关推荐

Team Win Recovery教程怎么用？