1. 主页
2. 开发人员中心
3. Flex 开发人员中心
4. Flex 快速入门

Flex 快速入门: 入门

目录

• 使用 MXML 和 ActionScript 进行编码
• 创建您的第一个应用程序
• 处理事件
• Flex 组件的定位和布局
• 嵌入应用程序资源

---

创建您的第一个应用程序

MXML 文件是普通的 XML 文件, 所以可以选择多种开发环境。 简单的文件编辑器、专用的 XML 编辑器或者支持文本编辑的集成开发环境 (IDE) 均可用于 MXML 代码编写。 Flex 提供专用的 IDE, 称为 Adobe® Flex™ Builder™ 2, 您可以使用它来开发应用程序。

MXML 文件的第一行是 XML 声明。 此行必须成为每个 MXML 文件的第一行。

下一行是 <mx:Application> 标签, 它定义始终是 Flex 应用程序的根标签的 Application 容器。

<mx:Panel> 标签定义包含一个标题栏、一个标题、一条状态消息、一个边框和其子级的一个内容区域的 Panel 容器。 其 title 属性被设置为 "My Application"。

<mx:Label> 标签代表一个 Label 控件, 一个用于显示文本的非常简单的用户界面组件。 其 text 属性被设置为 "Hello, World!"。

<mx:Label> 标签的 fontWeight 和 fontSize 属性改变使用的字体的样式。 还可以使用 CSS 来设置组件的样式。 有关详细信息, 请参阅 Flex 2 开发人员指南*中的“使用层叠样式表 (CSS)”。

注意: 可以通过使用命令行编译器 mxmlc 或 Flex Builder 2 编译 Flex 应用程序。有关使用 mxmlc 编译应用程序的说明, 请参阅使用 MXML 和 ActionScript 进行编码教程。

示例

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

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HelloWorld/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="160"
>
    <mx:Panel 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My Application"  
    >

        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

返回顶部

---

更多信息

有关创建 Flex 应用程序的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用 MXML 开发应用程序”部分。

关于作者