第四章 Flex编程入门 （1小节）

第四章 Flex 编程入门教程

本章节将提供一系列的课程教授你如何开 发 Flex 应用程序。

第一节创建你的第一个应用程序

本节将向你展示如何使 用 Adobe Flex Builder 编译和运行一个简单 的 Flex 应用程序。其中涉及的重点内容包 括 Flex Builder 项目的概念。 在 Flex Builder 中，所有的程序都被包含在项目 /projects 里。

创建一个项目

在 Flex Builder 中创建一 个 Flex 应用程序之前，你必须首先要创建一个项目。当创建好项目文件时， 主 MXML 程序文件就已经准备好。然后你就可以在项目中添加各种资源， 如 MXML 组件文件 、 ActionScript 文件等等。其主要操作步骤有 ：

1. 1. 启 动 Flex Builder 并从主菜单中选 择 File > New > Flex Project ，出现新项目向 导 /New Flex Project wizard 。
2. 2. 在打开的屏幕中，选择基础数据选 项 /Basic data option 并点下一 步 /Next 。接下来会询问你指定保存项目文件的目录 。
3. 3. 在项目名称栏中输 入 Lessons 。在项目内容区域，确保使用默认目录选 项 /Use Default Location option 被选定。默认的目录 是 C:\Documents and Settings\your_user_name\My Documents\Flex Builder 2 。 Flex Builder 将在该目录下创 建 Lessons 文件夹 。

4. 点击完 成 /Finish 。 Flex Builder 创建好新的项目并在导航视图中进行显示。

新建项目向导将自动生成项目配置文件，存放被编 译 SWF 文件的输出目录，以及主程序文 件 Lessons.mxml 。

5. 确定自动构造选 项 /automatic build option 是打开的，选 择 Select Project > Build Automatically 。

创建并运行应用程 序

1. 1. 如 果 Lessons.mxml 文件没有被打开，请在导航视图中找到并双击来打开它 。
2. 2. 切换 到 MXML 编辑器 。

Flex Builder 将 在 Lessons.mxml 文件中插入随后代码 ：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:Application>

1. 3 . 在 <mx:Application> 组标签之间输入随后的代码来添加一个面板容器 。 <mx:Panel title="My Application" width="200" height="300"> </mx:Panel> 面板容器 是 Flex 布局的基本部件 。
   1. 4. 在 <mx:Panel> 组标签之间输入随后的代码来添加一 个 Label 控件 。
   2. <mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight" /> 你可以点击设计按 钮 /Design button 是预览布局的效果 。
2. 5. 保存文件每当你保存文件时 ， Flex Builder 就会自动地构造应用程序。

构造完成后，请点击运 行 /Run 按钮来执行程序。

一个浏览器打开并运行应用程序。

在这一节中，你学习了 在 Flex Builder 中如何创建一个项目，以及如何编译和运用一 个 Flex 应用程序。