---

Flex - 快速指南

Flex - 概述

什么是 Flex?

Flex 是一个功能强大的开源应用程序框架，允许您使用相同的编程模型、工具和代码库为浏览器、移动设备和桌面构建传统应用程序。

Flex 提供 FLEX SDK，其中包含 Flex 类库(ActionScript 类)、Flex 编译器、调试器、MXML 和 ActionScript 编程语言以及其他实用程序，用于构建富有表现力和交互性的富互联网应用程序 (RIA)

Flex 负责 Web 应用程序的用户界面 (UI) 或客户端功能。服务器端功能依赖于用传统脚本语言(Java/PHP 等)编写的服务器端组件。

基于 Flex 的应用程序实际上是以 SWF 文件的形式提供的，它与传统 Web 应用程序的 HTML/JavaScript 部分非常相似。

Flex 应用程序作为 SWF 文件加上 HTML 包装器、CSS 文件和任何服务器端脚本文件(即 Java、.CFM、.PHP 等)部署到服务器。就像传统的 Web 应用程序一样。

这些资源使用惯用的 HTTP 请求/响应方式和在浏览器中运行应用程序的 Flash Player 从服务器传送到客户端的浏览器。

Flex 的优势

• Flex 应用程序通常基于 Flash Player，可以访问设备功能，如 GPS、摄像头、本地数据库、图形加速度计。

• Flex 应用程序可以在 Android、BlackBerry Tablet OS 和 iOS 设备上运行。

• Flex 应用程序可以在浏览器和桌面上运行。

• Flex 应用程序与平台无关。 UI 可以是平台原生的，也可以在每个平台上都相同。

• Flex 应用程序可以使用所有主要的服务器端技术(如 Java、Spring、Hibernate、PHP、Ruby、.NET、Adobe ColdFusion 和 SAP)与服务器交互，使用 REST、SOAP、JSON、JMS 和 AMF 等行业标准。

• Flex 应用程序通过与应用程序的直观交互和在视觉上更丰富的界面中呈现信息来确保丰富的用户体验。

• Flex 应用程序是一个单页应用程序，其中状态可以从一个状态转换到另一个状态，而无需从服务器获取新页面或刷新浏览器。

• Flex 应用程序在很大程度上减少了服务器上的负载，因为它只需要返回一次应用程序，而不是每次用户更改视图时都返回一个新页面。

Flex 的缺点

• Flex 应用程序是单线程应用程序，但 Flex 提供了异步编程模型来缓解此问题。

• Flex 基于 ActionScript 和 XML。学习这两者是使用 Flex 的必备条件。

Flex - 环境设置

本教程将指导您如何准备开发环境以开始使用 Adob​​e Flex Framework。本教程还将教您如何在设置 Flex Framework 之前在您的机器上设置 JDK 和 Adob​​e Flash Builder。

系统要求

FLEX 需要 JDK 1.4 或更高版本，因此第一个要求是在您的机器上安装 JDK。

按照给定的步骤设置您的环境开始进行 Flex 应用程序开发。

步骤 1 - 验证机器上的 Java 安装

现在打开控制台并执行以下 java 命令。

让我们验证所有操作系统的输出 −

第 2 步 - 设置 Java 开发工具包 (JDK)

如果您尚未安装 Java，则可以从 Oracle 的 Java 站点 Java SE 下载 安装 Java 软件开发工具包 (SDK)。您将在下载的文件中找到安装 JDK 的说明，然后按照给出的说明安装和配置设置。最后设置 PATH 和 JAVA_HOME 环境变量以引用包含 java 和 javac 的目录，通常分别为 java_install_dir/bin 和 java_install_dir。

设置 JAVA_HOME 环境变量以指向 Java 在您的计算机上安装的基本目录位置。例如 −

将 Java 编译器位置附加到系统路径。

步骤 3 - 设置 Adob​​e Flash Builder 4.5

本教程中的所有示例均使用 Adob​​e Flash Builder 4.5 Profession IDE 试用版编写。因此，建议您在计算机上安装最新版本的 Adob​​e Flash Builder。另外，请检查操作系统的兼容性。

要安装 Adob​​e Flash Builder IDE，请从 https://www.adobe.com/in/products/flash-builder.html 下载最新的 Adob​​e Flash Builder 二进制文件。下载安装程序后，将二进制分发包解压到方便的位置。例如，在 Windows 上为 C:\flash-builder，在 Linux/Unix 上为 /usr/local/flash-builder，最后适当设置 PATH 变量。

在 Windows 机器上执行以下命令或双击 FlashBuilder.exe 时，Flash Builder 将启动

%C:\flash-builder\FlashBuilder.exe

在 Unix(Solaris、Linux 等)机器上执行以下命令即可启动 Flash Builder −

$/usr/local/flash-builder/FlashBuilder

Adobe Flash Builder 试用版可使用 60 天。只需接受条款和条件，跳过初始注册步骤即可继续使用 IDE。为了便于理解，我们使用试用版进行教学。

启动成功后，如果一切正常，则应显示以下结果 −

Adobe Flash Builder 预配置了 FLEX SDK。我们在示例中使用与 Adob​​e Flash Builder 4.5 捆绑在一起的 FLEX SDK 4.5。

第 4 步 - 设置 Apache Tomcat

您可以从 https://tomcat.apache.org/ 下载最新版本的 Tomcat。下载安装程序后，将二进制分发包解压到方便的位置。例如，在 Windows 上位于 C:\apache-tomcat-6.0.33，或在 Linux/Unix 上位于 /usr/local/apache-tomcat-6.0.33，并设置指向安装位置的 CATALINA_HOME 环境变量。

可以在 Windows 机器上执行以下命令来启动 Tomcat，或者只需双击 startup.bat 即可

%CATALINA_HOME%\bin\startup.bat
或
C:\apache-tomcat-6.0.33\bin\startup.bat

可以在 UNIX(Solaris、Linux 等)机器上执行以下命令来启动 Tomcat −

$CATALINA_HOME/bin/startup.sh
或
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

成功启动后，可通过访问 http://localhost:8080/ 来访问 Tomcat 附带的默认 Web 应用程序。如果一切正常，则应显示以下结果 −

有关配置和运行 Tomcat 的更多信息，请参阅此处包含的文档以及 Tomcat 网站:http://tomcat.apache.org

可以在 Windows 计算机上执行以下命令来停止 Tomcat −

%CATALINA_HOME%\bin\shutdown
或
C:\apache-tomcat-5.5.29\bin\shutdown

可以在 UNIX(Solaris、Linux 等)计算机上执行以下命令来停止 Tomcat −

$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Flex - 应用程序

在我们开始使用 Flash Builder 创建实际的 "HelloWorld" 应用程序之前，让我们先了解一下 Flex 应用程序的实际部分 −

Flex 应用程序由以下四个重要部分组成，其中最后一部分是可选的，但前三个部分是必需的。

• Flex 框架库
• 客户端代码
• 公共资源 (HTML/JS/CSS)
• 服务器端代码

像 HelloWord 这样的典型 Flex 应用程序不同部分的示例位置如下所示 −

应用程序构建过程

首先，Flex 应用程序需要 Flex 框架库。稍后，Flash Builder 会自动将库添加到构建路径中。

当我们使用 Flash builder 构建代码时，Flash builder 将执行以下任务 −

• 将源代码编译为 HelloWorld.swf 文件。

• 从存储在 html-template 文件夹中的文件 index.template.html 编译 HelloWorld.html(swf 文件的包装文件)

• 将 HelloWorld.swf 和 HelloWorld.html 文件复制到目标文件夹 bin-debug 中。

• 复制 swfobject.js，这是一段 JavaScript 代码，负责在目标文件夹 bin-debug 中的 HelloWorld.html 中动态加载 swf 文件

• 将框架库以名为 frameworks_xxx.swf 的 swf 文件的形式复制到目标文件夹中， bin-debug

• 复制目标文件夹中的其他 flex 模块(.swf 文件，例如 sparkskins_xxx.swf、textLayout_xxx.swf)。

应用程序启动过程

• 在任何 Web 浏览器中打开 \HelloWorld\bin-debug 文件夹中的 HelloWorld.html 文件。

• HelloWorld.swf 将自动加载，应用程序将开始运行。

Flex 框架库

以下是一些重要框架库的简要介绍。请注意，Flex 库使用 .swc 符号表示

客户端代码

Flex 应用程序代码可以用 MXML 和 ActionScript 编写。

在 Flex 中，我们可以混合使用 ActionScript 和 MXML，以执行以下操作 −

• 使用 MXML 标签布局用户界面组件

• 使用 MXML 以声明方式定义应用程序的非可视化方面，例如对服务器上数据源的访问

• 使用 MXML 在用户界面组件和服务器上数据源之间创建数据绑定。

• 使用 ActionScript 在 MXML 事件属性内定义事件侦听器。

• 使用 标签添加脚本块。

• 包含外部 ActionScript 文件。

• 导入 ActionScript 类。

• 创建 ActionScript 组件。

公共资源

这些是 Flex 应用程序引用的帮助文件，例如位于 html-template 文件夹下的主机 HTML 页面、CSS 或图像。它包含以下文件 −

HelloWorld.mxml

这是实际编写的 MXML/AS(ActionScript)代码，用于实现应用程序的业务逻辑，Flex 编译器将其转换为 SWF 文件，该文件将由浏览器中的 Flash Player 执行。

示例 HelloWorld Entry 类如下 −

<?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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

下表给出了上述代码脚本中使用的所有标签的描述。

服务器端代码

这是应用程序的服务器端部分，并且是可选的。如果您没有在应用程序中执行任何后端处理，则不需要此部分，但如果后端需要某些处理并且您的客户端应用程序与服务器交互，则必须开发这些组件。

在下一章中，我们将使用上述所有概念使用 Flash Builder 创建 HelloWorld 应用程序。

Flex - 创建应用程序

我们将使用 Flash Builder 4.5 创建 Flex 应用程序。让我们从一个简单的 HelloWorld 应用程序开始。

步骤 1 - 创建项目

第一步是使用 Flash Builder IDE 创建一个简单的 Flex 项目。使用选项 文件 > 新建 > Flex 项目 启动项目向导。现在使用向导窗口将您的项目命名为 HelloWorld，如下所示 −

选择应用程序类型 Web(在 Adob​​e Flash Player 中运行)。但是，如果未选择此选项，则保留其他默认值，然后单击"完成"按钮。成功创建项目后，您的项目资源管理器中将显示以下内容 −

以下是所有重要文件夹的简要说明 −

第 2 步 - 创建外部 CSS 文件

在 html-template 文件夹中为 Wrapper HTML 页面创建 CSS 文件 styles.css。

html, body { 
   height:100%;
}

body { 
   margin:0; 
   padding:0; 
   overflow:auto; 
   text-align:center;		
}   

object:focus { 
   outline:none; 
}

#flashContent { 
   display:none;	
}

.pluginHeader {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#9b1204;
   text-decoration:none;
   font-weight:bold;
}

.pluginInstallText {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

.pluginText { 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

步骤 3 – 修改 Wrapper HTML 页面模板

修改 htmltemplate 文件夹中的 Wrapper HTML 页面模板 index.template.html。Flash Builder 将创建一个默认的 Wrapper HTML 页面模板 html-template/index.template.html，该模板将被编译为 HelloWorld.html。

此文件包含 Flash Builder 在编译过程中替换的占位符。例如，Flash 播放器版本、应用程序名称等。

让我们修改此文件，以便在未安装 Flash 插件的情况下显示自定义消息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
   
   <head>
      <title>${title}</title>
      <meta name = "google" value = "notranslate" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
      <link rel = "stylesheet" type = "text/css" href = "history/history.css" />
      <script type = "text/javascript" table table-bordered = "history/history.js">
      </script>
      <script type = "text/javascript" table table-bordered = "swfobject.js"></script>
      
      <script type = "text/javascript">
         // For version detection, set to min. required Flash Player version,
         //or 0 (or 0.0.0), for no version detection.
         var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";

         // To use express install, set to playerProductInstall.swf,
         //otherwise the empty string.
         var xiSwfUrlStr = "${expressInstallSwf}";
         var flashvars = {};
         var params = {};
         params.quality = "high";
         params.bgcolor = "${bgcolor}";
         params.allowscriptaccess = "sameDomain";
         params.allowfullscreen = "true";
         
         var attributes = {};
         attributes.id = "${application}";
         attributes.name = "${application}";
         attributes.align = "middle";
         swfobject.embedSWF (
            "${swf}.swf", "flashContent",
            "${width}", "${height}",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);

         // JavaScript enabled so display the flashContent div in case
         //it is not replaced with a swf object.
         swfobject.createCSS("#flashContent", "display:block;text-align:left;");
      </script>
   </head>
   
   <body>
      <div id = "flashContent">
         <p style = "margin:100px;">

            <table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
               <tr>
                  <td class = "pluginHeader">Flash Player Required</td>
               </tr>
               
               <tr>
                  <td class = "pluginText">The Adobe Flash Player version
                     10.2.0 or greater is required.</td>
               </tr>
               
               <tr>
                  <td class = "pluginInstallText" align = "left">
               
                  <table border = "0" width = "100%">
                     <tr class = "pluginInstallText" >
                        <td>Click here to download and install Adobe Flash Player:</td>
                        <td> </td>
                        <td align = "right">
                           <script type = "text/javascript">
                              var pageHost
                                 = ((document.location.protocol == "https:") ? "https://" : "http://");
                              document.write("<a target = '_blank'"
                                 +" href = 'http://get.adobe.com/flashplayer/'><"
                                 +"img style = 'border-style: none' table table-bordered = '"
                                 +pageHost
                                 +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                 +" alt = 'Get Adobe Flash player' /></a>" );
                           </script>
                        </td>
                     </tr>
                  </table>
               </tr>
            </table>
         </p>
      </div>
      
      <noscript>
         <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            width = "${width}" height = "${height}" id = "${application}">
            <param name = "movie" value = "${swf}.swf" />
            <param name = "quality" value = "high" />
            <param name = "bgcolor" value = "${bgcolor}" />
            <param name = "allowScriptAccess" value = "sameDomain" />
            <param name = "allowFullScreen" value = "true" />
         
            <!--[if !IE]>-->
            <object type = "application/x-shockwave-flash" data = "${swf}.swf"
               width = "${width}" height = "${height}">
               <param name = "quality" value = "high" />
               <param name = "bgcolor" value = "${bgcolor}" />
               <param name = "allowScriptAccess" value = "sameDomain" />
               <param name = "allowFullScreen" value = "true" />
            <!--<![endif]-->
         
            <!--[if gte IE 6]>-->
               <p>
                  <p style = "margin:100px;">
                     <table width = "700" cellpadding = "10" cellspacing = "2" 
                        border = "0">
                        <tr>
                           <td class = "pluginHeader">Flash Player Required</td>
                        </tr>
                        
                        <tr>
                           <td class = "pluginText">The Adobe Flash Player version
                           10.2.0 or greater is required.</td>
                        </tr>
                        
                        <tr>
                           <td class = "pluginInstallText" align = "left">

                           <table border = "0" width = "100%">
                              <tr class = "pluginInstallText" >
                                 <td>Click here to download and install Adobe Flash 
                                    Player:</td>
                                 <td> </td>
                                 <td align = "right">
                                    <script type = "text/javascript">
                                       var pageHost
                                          = ((document.location.protocol == "https:") ? "https://" : "http://");
                                       document.write("<a target = '_blank'"
                                          +" href = 'http://get.adobe.com/flashplayer/'><"
                                          +"img style = 'border-style: none' table table-bordered = '"
                                          +pageHost
                                          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                          +" alt = 'Get Adobe Flash player' /></a>" );
                                    </script>
                                 </td>
                              </tr>
                           </table>
                        </tr>
                     </table>
                  </p>
               </p>
            <!--<![endif]-->
         
            <p style = "margin:100px;">
               <table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
                  <tr><td class = "pluginHeader">Flash Player Required</td></tr>
                  <tr><td class = "pluginText">The Adobe Flash Player version
                     10.2.0 or greater is required.</td></tr>
                  <tr>
                     <td class = "pluginInstallText" align = "left">
                        <table border = "0" width = "100%">
                           <tr class = "pluginInstallText" >
                              <td>Click here to download and install Adobe Flash 
                                 Player:</td>
                              <td> </td>
                              <td align = "right">
                                 <script type = "text/javascript">
                                    var pageHost
                                       = ((document.location.protocol == "https:") ? "https://" : "http://");
                                    document.write("<a target = '_blank'"
                                       +" href = 'http://get.adobe.com/flashplayer/'><"
                                       +"img style = 'border-style: none' table table-bordered = '"
                                       +pageHost
                                       +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                       +" alt = 'Get Adobe Flash player' /></a>" );
                                 </script>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </p>
         <!--[if !IE]>-->
         </object>
         <!--<![endif]-->
         </object>
      </noscript>
   </body>
</html>

第 4 步 - 创建内部 CSS 文件

在 table tablebordered/com/tutorialspoint 文件夹中为 HelloWorld.mxml 创建 CSS 文件 Style.css。Flex 为其 UI 控件提供了类似的 CSS 样式，因为 HTML UI 控件也有 CSS 样式。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading {
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

步骤 5 – 修改入门级类

Flash Builder 将创建一个默认的 mxml 文件 table tablebordered/com.tutorialspoint/HelloWorld.mxml，该文件具有应用程序的根标记 <application> 容器。让我们修改此文件以显示"Hello,World!" −

<?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
   width = "100%" height = "100%"
      minWidth = "500" minHeight = "500"
      initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

您可以在同一个源目录中创建更多 mxml 或 actionscript 文件，以定义新应用程序或定义辅助例程。

步骤 6 – 构建应用程序

Flash Builder 默认选中 自动构建。只需检查 问题 视图是否有任何错误。完成更改后，您将不会看到任何错误。

步骤 7 – 运行应用程序

现在单击 运行应用程序菜单并选择 HelloWorld 应用程序来运行该应用程序。

如果一切正常，您必须看到浏览器弹出、应用程序启动并运行。如果您的应用程序一切正常，它将产生以下结果:[在线试用]

因为您正在 Flash Player 中运行应用程序，所以需要为您的浏览器安装 Flash Player 插件。只需按照屏幕上的说明安装插件即可。如果您已经为浏览器设置了 Flash Player 插件，那么您应该能够看到以下输出 −

恭喜!您已使用 Flex 实现了第一个应用程序。

Flex - 部署应用程序

本教程将向您解释如何创建应用程序 war 文件以及如何将其部署到 Apache Tomcat Web 服务器根目录中。

如果您理解了这个简单示例，那么您也将能够按照相同的步骤部署复杂的 Flex 应用程序。

让我们按照以下步骤创建 Flex 应用程序 −

按照下面给出的步骤创建 Flex 应用程序的发布版本，然后将其部署到 tomcat 服务器 −

第一步是使用 Flash Builder IDE 创建发布版本。使用选项 文件 > 导出 > Flash Builder > 启动发布版本向导发布构建。

使用向导窗口选择项目为 HelloWorld，如下所示

保留其他默认值，然后单击"完成"按钮。现在，Flash Builder 将创建一个包含项目发布版本的 bin-release 文件夹。

现在我们的发布版本已准备就绪，让我们按照以下步骤部署 Flex 应用程序 −

以下是修改后的 mxml 文件 table table-bordered/com.tutorialspoint/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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，则将产生以下结果:[ 在线试用 ]

创建 WAR 文件

现在我们的应用程序运行良好，我们准备将其导出为 war 文件。请按照以下步骤 −

• 进入项目的 bin-release 目录 C:\workspace\HelloWorld\binrelease

• 选择所有文件 & bin-release 目录中的可用文件夹。

• 将所有选定的文件和文件夹压缩到名为 HelloWorld.zip 的文件中。

• 将 HelloWorld.zip 重命名为 HelloWorld.war。

部署 WAR 文件

停止 tomcat 服务器。

• 将 HelloWorld.war 文件复制到 tomcat 安装目录 > webapps 文件夹。

• 启动 tomcat 服务器。

• 查看 webapps 目录，应该有一个已创建的文件夹 HelloWorld。

• 现在 HelloWorld.war 已成功部署在 Tomcat Webserver 根目录中。

运行应用程序

在 Web 浏览器中输入 URL −

http://localhost:8080/HelloWorld/HelloWorld.html 以启动应用程序。

服务器名称 (localhost) 和端口 (8080) 可能因您的 tomcat 配置而异。

Flex - 生命周期阶段

Flex 应用程序的生命周期

尽管您可以在不了解应用程序生命周期阶段的情况下构建 Flex 应用程序，但了解基本机制(即事情发生的顺序)还是有好处的。它将帮助您配置诸如在运行时加载其他 Flex 应用程序之类的功能，以及管理在运行时加载和卸载类库和资产的过程。

充分了解 Flex 应用程序生命周期将使您能够构建更好的应用程序并对其进行优化，因为您将知道在哪里以最佳方式运行代码。例如，如果您需要确保某些代码在预加载器期间运行，则需要知道将该事件的代码放在哪里。

当我们在浏览器中加载 flex 应用程序时，在 flex 应用程序的生命周期中会发生以下事件。

以下是有关不同 Flex 生命周期事件的简要说明。

Flex 生命周期示例

让我们按照以下步骤通过创建测试应用程序 − 来了解 Flex 应用程序的测试生命周期

以下是修改后的 mxml 文件 src/com.tutorialspoint/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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initialize = "reportEvent(event)"
   preinitialize = "reportEvent(event)"
   creationComplete = "reportEvent(event)"
   applicationComplete = "reportEvent(event)">	
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
   
         [Bindable]
         private var report:String = "";

         private function reportEvent(event:FlexEvent):void {
            report += "
" + (event.type + " event occured at: " 
            + getTimer() + " ms" + "
");
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label textAlign = "center" width="100%" id = "lblHeader"
         fontSize = "40" color = "0x777777" styleName = "heading" 
         text = "Life Cycle Events Demonstration" />
         <s:TextArea id = "reportText" text = "{report}" editable = "false" 
         width = "300" height = "200">				
         </s:TextArea>			
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - 使用 CSS 进行样式设置

Flex 支持使用 CSS 语法和样式将其应用于其 UI 控件，其方式与将 CSS 应用于 HTML 组件的方式相同。

方法 # 1:使用外部样式表文件

您可以引用应用程序类路径中可用的样式表。例如，考虑 com/tutorialspoint/client 文件夹 中的 Style.css 文件，其中也包含 HelloWorld.mxml 文件。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

然后可以通过以下代码片段引用 css 文件

<fx:Style source = "/com/tutorialspoint/client/Style.css" />

使用 styleName 属性将样式分配给 UI 组件

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>		  

方法 # 2:在 UI 容器组件中使用样式

您可以使用 <fx:Style> 标签在 UI 容器组件中定义样式

Class Level Selector

<fx:Style>
   @namespace s "library://ns.adobe.com/flex/spark";
   @namespace mx "library://ns.adobe.com/flex/mx";

   /* class level selector  */
   .errorLabel {
      color: red;
   }		
</fx:Style>

使用 styleName 属性为 UI 组件分配样式。

<s:Label id = "errorMsg" text = "这是一条错误消息" styleName = "errorLabel" />

Id 级别选择器

使用 id 选择器为 UI 组件设置样式。

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "这是一条正常消息" />

类型级别选择器

在一个 GO 中设置一种 UI 组件的样式。

<fx:Style> 
   /* style applied on all buttons  */ 
   s|Button {  
      fontSize: 15; 
      color: #9933FF; 
   } 
</fx:Style>

<s:Button label = "Click Me!" id = "btnClickMe"
   click = "btnClickMe_clickHandler(event)" />

带有 CSS 的 Flex 样式示例

让我们按照以下步骤通过创建测试应用程序来检查 Flex 应用程序的 CSS 样式 −

以下是修改后的 CSS 文件 src/com.tutorialspoint/Style.css 的内容。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

以下是修改后的 mxml 文件 src/com.tutorialspoint/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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initialize = "application_initializeHandler(event)">
   
   <!--Add reference to style sheet -->
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />

   <!--Using styles within mxml file -->
   <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      /* class level selector  */
      .errorLabel {
         color: red;
      }

      /* id level selector  */
      #msgLabel {
         color: gray;
      }

      /* style applied on all buttons  */
      s|Button {
         fontSize: 15;
         color: #9933FF;
      }
   </fx:Style>

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "CSS Demonstrating Application";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "560" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label width = "100%" id = "lblHeader" fontSize = "40"
            color = "0x777777" styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)"  />
         <s:Label id = "errorMsg"
            text = "This is an error message" styleName = "errorLabel" />
         <s:Label id = "msgLabel" text = "This is a normal message" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

完成所有更改后，让我们以正常模式编译并运行应用程序，就像在Flex - 创建应用程序一章中所做的那样。如果您的应用程序一切正常，这将产生以下结果:[在线试用]

Flex - Style with Skin

什么是换肤?

• Flex 中的换肤是完全自定义 UI 组件外观的过程。

• 换肤可以定义组件的文本、图像、滤镜、过渡和状态。

• 换肤可以作为单独的 mxml 或 ActionScript 组件创建。

• 使用换肤，我们可以控制 UI 组件的所有视觉方面。

• 换肤的过程定义皮肤的方法对所有 UI 组件都一样。

步骤 1 – 创建皮肤

使用选项 File > New > MXML Skin 启动创建 MXML 皮肤向导。

输入包为 com.tutorialspoint.skin，命名为 GradientBackgroundSkin，并选择主机组件为现有的 flex BorderContainer 控件spark.component.BorderContainer。

现在您已经为 BorderContainer 创建了皮肤。修改 mxml 皮肤文件 src/com.tutorialspoint/skin/GradientBackgroundSkin.mxml 的内容。

按如下方式更新填充层 −

<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
   <s:fill>
      <s:LinearGradient rotation = "90">
         <s:GradientEntry color = "0x888888" ratio = "0.2" />
         <s:GradientEntry color = "0x111111" ratio = "1" />
      </s:LinearGradient>
   </s:fill>
</s:Rect>	

步骤 2:应用皮肤

您可以通过两种方式在组件上应用皮肤 −

在 MXML 脚本中应用皮肤(静态)

使用其 skinClass 属性将 GradientBackgroundSkin 应用于 ID 为 mainContainer 的 BorderContainer。

<s:BorderContainer width = "560" height = "500" id = "mainContainer" 
   styleName = "container">
   <s:VGroup width = "100%" height = "100%" gap = "50" 
      horizontalAlign = "center" verticalAlign = "middle" 
      skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">

在 ActionScript 中应用皮肤(动态)

使用 skinClass 属性将 GradientBackgroundSkin 应用于 ID 为 mainContainer 的 BorderContainer。

protected function gradientBackground_clickHandler(event:MouseEvent):void {
    mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

带皮肤的 Flex 样式示例

让我们按照以下步骤通过创建测试应用程序来查看 Flex 应用程序中皮肤的实际操作 −

以下是 GradientBackgroundSkin.mxml 文件 src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml 的内容。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx">
   
   <!-- host component -->
   <fx:Metadata>
      [HostComponent("spark.components.BorderContainer")]
   </fx:Metadata> 

   <!-- states -->
   <s:states>
      <s:State name = "disabled" />
      <s:State name = "disabled" />
      <s:State name = "normal" />
   </s:states>

   <!-- SkinParts
   name = contentGroup, type = spark.components.Group, required = false
   -->
   
   <!-- fill -->
   <s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x111111" ratio = "0.2" />
            <s:GradientEntry color = "0x888888" ratio = "1" />
         </s:LinearGradient>
      </s:fill>
   </s:Rect>	
   
   <!-- must specify this for the host component --> 
   <s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>

以下是修改后的 HelloWorld.mxml filesrc/com/tutorialspoint/client/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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initialize = "application_initializeHandler(event)">

   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import com.tutorialspoint.skin.GradientBackgroundSkin;
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import spark.skins.spark.BorderContainerSkin;			

         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }

         protected function gradientBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", GradientBackgroundSkin );
         }

         protected function standardBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", BorderContainerSkin );
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <s:RadioButtonGroup id = "selectorGroup" />
   </fx:Declarations>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      skinClass = "spark.skins.spark.BorderContainerSkin" 
      horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "green" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Standard Background" 
            click = "standardBackground_clickHandler(event)" selected = "true" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Gradient Background" 
            click = "gradientBackground_clickHandler(event)" />			
      </s:VGroup>			
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - 数据绑定

什么是数据绑定?

数据绑定是将一个对象的数据绑定到另一个对象的过程。它需要一个源属性、一个目标属性和一个触发事件，该事件指示何时将数据从源复制到目标。

Flex 提供了以下三种数据绑定方法

• MXML 脚本中的花括号语法 ({})
• MXML 中的<fx:binding> 标签
• ActionScript 中的 BindingUtils

数据绑定 – 在 MXML 中使用花括号

以下示例演示如何使用花括号指定源到目标的数据绑定。

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

数据绑定 – 在 MXML 中使用 <fx:Binding> 标签

以下示例演示如何使用 标签指定源与目标之间的数据绑定。

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

数据绑定 – 在 ActionScript 中使用 BindingUtils

以下示例演示如何使用 BindingUtils 指定源与目标之间的数据绑定。

<fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;
      import mx.events.FlexEvent;

      protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }      
   ]]>
</fx:Script>

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" 
   preinitialize = "txtInput2_preinitializeHandler(event)" />

Flex 数据绑定示例

让我们按照下面给出的步骤，通过创建一个测试应用程序来查看 Flex 应用程序中皮肤的实际效果 −

以下是修改后的 HelloWorld.mxml 文件src/com/tutorialspoint/client/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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.binding.utils.BindingUtils;   
         import mx.events.FlexEvent;

         protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
            BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
         }
      ]]>
   </fx:Script>
   
   <fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
   <s:BorderContainer width = "500" height = "550" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Data Binding Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />
         <s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput1" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #2 (Using &lt;fx:Binding&gt;)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput3" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:Label id = "txtInput4" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #3 (Using BindingUtils)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput5" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput enabled = "false" id = "txtInput6" 
                  preinitialize = "txtInput6_preinitializeHandler(event)" />
            </s:HGroup>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - 基本控件

每个用户界面都会考虑以下三个主要方面 −

• UI 元素 − 这些是用户最终看到并与之交互的核心视觉元素。 Flex 提供了大量广泛使用和常见的元素，从基本元素到复杂元素，我们将在本教程中介绍这些元素。

• 布局 − 它们定义 UI 元素在屏幕上的组织方式，并为 GUI(图形用户界面)提供最终的外观和感觉。此部分将在布局章节中介绍。

• 行为 − 当用户与 UI 元素交互时，会发生这些事件。此部分将在事件处理章节中介绍。

Flex UI 元素

Flex UI 库在定义明确的类层次结构中提供类，以创建复杂的基于 Web 的用户界面。此组件层次结构中的所有类均从 EventDispatcher 基类派生，如下所示 −

每个基本 UI 控件都从 UI Component 类继承属性，而后者又从 EventDispatcher 和其他顶级类继承属性。

基本控件

以下是几个重要的基本控件 −

Flex - 表单控件

表单控件允许用户输入数据并为他们提供与应用程序的交互功能。每个表单 UI 控件都从 UIComponent 类继承属性，而 UIComponent 类又从 EventDispatcher 和其他顶级类继承属性。

Form 表单控件

以下是一些重要的表单控件 −

Flex - 复杂控件

复杂控件为用户提供了高级功能，使他们能够更轻松地处理大量数据，并为他们提供与应用程序的交互能力。每个复杂的 UI 控件都会从 UIComponent 类继承属性，而 UIComponent 类又会从 EventDispatcher 和其他顶级类继承属性。

复杂控件

以下是一些重要的复杂控件 −

Flex - 布局面板

布局面板控件可供用户组织页面上的 UI 控件。每个布局控件都从 UIComponent 类继承属性，而 UIComponent 类又从 EventDispatcher 和其他顶级类继承属性。

布局面板

以下是一些重要的布局面板 −

Flex - 视觉效果

我们可以使用效果的概念向 flex 应用程序添加行为。例如，当文本框获得焦点时，我们可以使其文本变得更粗，并使其尺寸略大。

每个效果都从 Effect 类继承属性，而 Effect 类又从 EventDispatcher 和其他顶级类继承属性。

基本效果

以下是一些重要的基本视觉效果 −

Flex - 事件处理

Flex 使用事件概念根据应用程序内的状态或用户交互将数据从一个对象传递到另一个对象。

ActionScript 有一个通用的 Event 类，它定义了处理事件所需的大部分功能。每次在 Flex 应用程序中发生事件时，都会从 Event 类层次结构中创建三种类型的对象。

Event 具有以下三个关键属性

事件流阶段

事件经过三个阶段寻找事件处理程序。

考虑以下应用程序代码 −

<?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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
   
   <s:Panel>
      <s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
   </s:Panel>   
</s:Application>

当用户单击按钮时，他或她也单击了面板和应用程序。

事件经历三个阶段来寻找事件处理程序分配。

让我们按照以下步骤在 Flex 应用程序中测试事件处理 −

以下是修改后的 mxml 文件 src/com.tutorialspoint/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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         protected function reportEvent(event:MouseEvent):void {
            var target:String = event.target.id;
            var currentTarget:String = event.target.id;
            var eventPhase: String;

            if(event.target is Button) {
               var button:Button = event.target as Button;
               target = button.label + " Button";
            } else if(event.target is HGroup) {
               var hGroup:HGroup = event.target as HGroup;
               target = hGroup.id + " HGroup";
            } else if(event.target is Panel) {
               var panel:Panel = event.target as Panel;
               target = panel.id + " Panel";
            }

            if(event.currentTarget is Button) {
               var button1:Button = event.currentTarget as Button;
               currentTarget = button1.label + " Button";
            } else if(event.currentTarget is HGroup) {
               var hGroup1:HGroup = event.currentTarget as HGroup;
               currentTarget = hGroup1.id + " HGroup";
            } else if(event.currentTarget is Panel) {
               var panel1:Panel = event.currentTarget as Panel;
               currentTarget = panel1.id + " Panel";
            }

            var eventPhaseInt:uint = event.eventPhase;

            if(eventPhaseInt == EventPhase.AT_TARGET) {
               eventPhase = "Target";
            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
               eventPhase = "Bubbling";
            } else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
               eventPhase = "Capturing";
            }
            
            reports.text += " Target: " + target + "
 currentTarget: " +
               currentTarget + "
 Phase: " + eventPhase + "
----------
";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Event Handling Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel id = "parentPanel" title = "Main Parent"
            click = "reportEvent(event)" width = "500"
            height = "100" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />
            </s:layout>
            
            <s:HGroup id = "mainHGroup" click = "reportEvent(event)">
               <s:Button label = "Click Me" click = "reportEvent(event)" />
            </s:HGroup>
         </s:Panel>

         <s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
            <mx:Text id = "reports" />
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - 自定义控件

Flex 提供了两种创建自定义组件的方法。

• 使用 ActionScript
• 使用 MXML

使用 ActionScript

您可以通过扩展现有组件来创建组件。要使用 Flash Builder 创建组件，请单击文件 > 新建 > ActionScript 类。

输入如下所示的详细信息 −

Flash Builder 将创建以下 CustomButton.as 文件。

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

使用 MXML

您可以通过扩展现有组件来创建组件。要使用 Flash Builder 创建组件，请单击文件 > 新建 > MXML 组件。

输入如下所示的详细信息。

Flash Builder 将创建以下 CustomLogin.mxml 文件。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   width = "400" height = "300">
</s:Group>

让我们按照以下步骤在 Flex 应用程序中测试自定义控件 −

以下是修改后的 mxml 文件 src/com.tutorialspoint/client/CustomLogin.mxml 的内容。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" width = "400" height = "300">
   
   <s:Form>
      <s:FormItem label = "UserName:">
         <s:TextInput width = "200" />
      </s:FormItem>
      
      <s:FormItem label = "Password:">
         <s:TextInput width = "200" displayAsPassword = "true" />
      </s:FormItem>
      
      <s:FormItem>
         <s:Button label = "Login" />
      </s:FormItem>		
   </s:Form>
</s:Group>

以下是修改后的 mxml 文件 src/com.tutorialspoint/client/CustomButton.as 的内容。

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      
      public function CustomButton() {
         super();
         this.setStyle("color","green");
         this.label = "Submit";
      }
   }
}

以下是修改后的 mxml 文件 src/com.tutorialspoint/client/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" 
   xmlns:client = "com.tutorialspoint.client.*"
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
        import mx.events.FlexEvent;

        protected function application_initializeHandler(event:FlexEvent):void {
           //create a new custom button
           var customButton: CustomButton = new CustomButton();
           asPanel.addElement(customButton);
        }

      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Custom Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel title = "Using MXML Component" width = "400" height = "200">
            <client:CustomLogin>			
            </client:CustomLogin>		
         </s:Panel>
         
         <s:Panel  title = "Using AS Component" width = "400" height = "100">
            <s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10" 
               horizontalAlign = "center" verticalAlign = "middle">
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - RPC 服务

Flex 提供 RPC 服务，以向客户端提供服务器端数据。 Flex 对服务器端数据提供了相当多的控制。

• 使用 Flex RPC 服务，我们可以定义要在服务器端执行的用户操作。

• Flex RPC 服务可以与任何服务器端技术集成。

• Flex RPC 服务之一为通过网络传输压缩二进制数据提供内置支持，速度非常快。

Flex 提供以下三种类型的 RPC 服务

我们将详细讨论 HTTP 服务。我们将使用放置在服务器上的 XML 源文件，并通过 HTTP 服务在客户端访问它。

Items.xml

<items>
   <item name = "Book" description = "History of France"></item>
   <item name = "Pen" description = "Parker Pen"></item>
   <item name = "Pencil" description = "Stationary"></item>
<items>

HTTPService 声明

现在声明一个 HTTPService 并向其传递上述文件的 URL

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

RPC 调用

调用 itemRequest.send() 方法并将 itemRequest webservice 的 lastResult 对象的值绑定到 Flex UI 组件。

...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
   dataProvider = "{itemRequest.lastResult.items.item}">
   <mx:columns>
      <mx:DataGridColumn headerText = "Name" dataField = "name" />
      <mx:DataGridColumn headerText = "Description" dataField = "description" />
   </mx:columns>
</mx:DataGrid>

RPC 服务调用示例

现在，让我们按照以下步骤在 Flex 应用程序中测试 RPC 服务 −

以下是修改后的 mxml 文件 src/com.tutorialspoint/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 = "500" minHeight = "500" creationComplete = "init(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;

         protected function init(event:FlexEvent):void {
            itemRequest.send();				
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <mx:HTTPService id = "itemRequest" 
         url = "http://www.tutorialspoint.com/flex/Items.xml" />
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "RPC Service Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "parentPanel" title = "Using RPC Services"  
            width = "500" height = "200" >
            <s:layout>
               <s:VerticalLayout  gap = "10" 
                  verticalAlign = "middle" horizontalAlign = "center" />
            </s:layout>						
            
            <mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
               dataProvider = "{itemRequest.lastResult.items.item}">
               
               <mx:columns>
                  <mx:DataGridColumn headerText = "Name" dataField = "name" />
                  <mx:DataGridColumn headerText = "Description" 
                     dataField = "description" />
               </mx:columns>
            </mx:DataGrid>
         </s:Panel>	
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - FlexUnit 集成

Flash Builder 4 为 Flex 开发周期中的 FlexUnit 集成提供了出色的内置支持。

创建测试用例类

您可以使用 Flash Builder 创建测试类向导创建测试用例类。正如您将在本文中看到的那样，使用 Flash Builder 运行测试用例轻而易举。

要使用 Flash Builder 创建测试用例类，请单击文件 > 新建 > 测试用例类。输入如下所示的详细信息。

Flash Builder 将创建以下 TestClass1.as 文件。

package com.tutorialspoint.client {
   public class TestClass1 {		
      [Before]
      public function setUp():void {}

      [After]
      public function tearDown():void {}

      [BeforeClass]
      public static function setUpBeforeClass():void {}

      [AfterClass]
      public static function tearDownAfterClass():void {}	
   }
}

FlexUnit 集成示例

现在，让我们按照以下步骤在 Flex 应用程序中测试 FlexUnit 集成 −

以下是修改后的文件 src/com.tutorialspoint/client/TestClass1.as 的内容。

package com.tutorialspoint.client {
   import org.flexunit.asserts.assertEquals;

   public class TestClass1 {		
      private var counter: int = 1;

      [Before]
      public function setUp():void {
         //this code will run before every test case execution
      }

      [After]
      public function tearDown():void {
         //this code will run after every test case execution
      }

      [BeforeClass]
      public static function setUpBeforeClass():void {
         //this code will run once when test cases start execution
      }

      [AfterClass]
      public static function tearDownAfterClass():void {
         //this code will run once when test cases ends execution
      }      

      [Test]  
      public function testCounter():void { 
         assertEquals(counter, 1);
      }
   }
}

以下是修改后的 mxml 文件 src/com.tutorialspoint/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 = "500" minHeight = "500">
</s:Application>

完成所有更改后，让我们以正常模式进行编译，就像我们在 Flex - 创建应用程序 一章中所做的那样。

运行测试用例

现在在包资源管理器中右键单击 TestClass1，然后选择 Run As > FlexUnit Tests。您将在 Flash Builder 测试窗口中看到以下输出。

Flash Builder 还在浏览器中显示测试结果。

Flex - 调试应用程序

Flex 提供了出色的 flex 代码调试功能，Flash Builder 4 具有出色的内置调试器和调试透视图支持。

• 在调试模式下，Flex 应用程序在 Flash Builder 4 内置的 Flash Player 调试器版本上运行，该版本支持调试功能。

• 因此，开发人员可以在 Flash Builder 中获得一个简单且内置的调试配置

在本文中，我们将演示调试的使用方法使用 Flash Builder 的 Flex 客户端代码。我们将执行以下任务

• 在代码中设置断点并在断点资源管理器中查看它们。
• 在调试期间逐行执行代码。
• 查看变量的值。
• 检查所有变量的值。
• 检查表达式的值。
• 显示挂起线程的堆栈框架。

调试示例

以下是修改后的 mxml 文件 src/com.tutorialspoint/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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }
      ]]>
   </fx:Script>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

一旦您准备好完成所有更改，让我们以正常模式进行编译，就像在Flex - 创建应用程序一章中所做的那样。

步骤 1 - 放置断点

在 HelloWorld.mxml 的应用程序初始化处理程序的第一行放置一个断点

步骤 2 - 调试应用程序

现在单击 调试应用程序菜单并选择 HelloWorld 应用程序来调试应用程序。

如果一切正常，应用程序将在浏览器中启动，您将在 Flash Builder 控制台中看到以下调试日志。

[SWF] \HelloWorld\bin-debug\HelloWorld.swf 
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1 
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2 
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3 
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4 
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5 
- 318,334 bytes after decompression

一旦应用程序启动，您将看到焦点位于 Flash Builder 断点上，因为我们已将断点放置在 application_initialize Handler 方法的第一行上。

您可以查看暂停线程的堆栈跟踪。

您可以查看表达式的值。

您可以查看放置的断点列表。

现在继续按 F6，直到到达 application_initializeHandler() 方法的最后一行。作为功能键的参考，F6 逐行检查代码，F5 进一步进入内部，F8 将恢复应用程序。现在您可以看到 application_initializeHandler() 方法的所有变量的值列表。

现在您可以看到 flex 代码可以像 Java 应用程序一样进行调试。将断点放置在任何行并使用 flex 的调试功能。

Flex - 国际化

Flex 提供了两种国际化 Flex 应用程序的方法，我们将演示在项目中最常用的编译时国际化用法。

Flex 应用程序国际化的工作流程

步骤 1 – 创建文件夹结构

在 Flex 项目的 src 文件夹下创建一个语言环境文件夹。这将是应用程序将支持的语言环境的所有属性文件的父目录。在语言环境文件夹中，创建子文件夹，每个应用程序要支持的语言环境都有一个子文件夹。命名语言环境的惯例是

{language}_{country code}

例如，en_US 代表美国英语。语言环境 de_DE 代表德语。示例应用程序将支持两种常用语言:英语和德语。

步骤 2 – 创建属性文件

创建包含应用程序要使用的消息的属性文件。在我们的示例中，我们在 src > locale > en_US 文件夹下创建了一个 HelloWorldMessages.properties 文件。

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

创建包含特定于语言环境的翻译值的属性文件。在我们的示例中，我们在 src > locale > de_DE 文件夹下创建了一个 HelloWorldMessages.properties 文件。此文件包含德语翻译。 _de 指定德语区域设置，我们将在应用程序中支持德语。

如果您使用 Flash Builder 创建属性文件，则将文件的编码更改为 UTF-8。选择文件，然后右键单击以打开其属性窗口。选择文本文件编码为其他 UTF-8。应用并保存更改。

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

步骤 3 – 指定编译器选项

• 右键单击您的项目并选择"属性"。

• 选择 Flex 编译器，并将以下内容添加到"附加编译器参数"设置中 −

-locale en_US de_DE

• 右键单击您的项目并选择"属性"。

• 选择 Flex 构建路径，并将以下内容添加到"源路径"设置中 −

src\locale\{locale}

内部化示例

现在让我们按照以下步骤在 Flex 应用程序中测试内部化技术 −

以下是修改后的 mxml 文件 src/com.tutorialspoint/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 = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"English", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function clickMe_clickHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString('HelloWorldMessages'
               ,'greeting',inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalAlign = "center" verticalAlign = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString('HelloWorldMessages','clickMe')}" 
               click = "clickMe_clickHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们以正常模式编译并运行应用程序，就像在Flex - 创建应用程序一章中所做的那样。如果您的应用程序一切正常，它将产生以下结果:[在线试用]

使用语言下拉菜单更改语言并查看结果。

Flex - 打印支持

Flex 提供了一个特殊的类 FlexPrintJob 来打印 flex 对象。

• FlexPrintJob 可用于打印一个或多个 Flex 对象，例如 Form 或 VBox 容器。

• FlexPrintJob 打印该对象及其包含的所有对象包含。

• 对象可以是显示界面的全部或部分。

• 对象可以是专门为打印格式化数据的组件。

• FlexPrintJob 类允许您缩放输出以适合页面。

• FlexPrintJob 类自动使用多页来打印不适合单页的对象。

• FlexPrintJob 类使操作系统显示打印对话框。没有用户操作，您无法打印。

准备和发送打印作业

通过准备和发送打印作业来打印输出。让我们创建 FlexPrintJob 类的一个实例

var printJob:FlexPrintJob = new FlexPrintJob();

启动打印作业

printJob.start();

Flex 将使操作系统显示"打印"对话框。将一个或多个对象添加到打印作业并指定如何缩放它们

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);

每个对象都从新页面开始。将打印作业发送到打印机

printJob.send();

打印示例

以下是修改后的 mxml 文件 src/com.tutorialspoint/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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import mx.printing.FlexPrintJob;
         import mx.printing.FlexPrintJobScaleType;
         
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            
            // 创建 FlexPrintJob 类的实例。
            var printJob:FlexPrintJob = new FlexPrintJob();
            
            // 启动打印作业。
            if (printJob.start() != true) return;
            
            // 添加要打印的对象。不要缩放它。
            printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
            
            // 将作业发送到打印机。
            printJob.send();
        }

        protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
        }
     ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         
         <mx:DataGrid id = "myDataGrid" width = "300">
            <mx:dataProvider>
               <fx:Object Product = "Flex" Code = "1000" />
               <fx:Object Product = "GWT" Code = "2000" />
               <fx:Object Product = "JAVA" Code = "3000" />
               <fx:Object Product = "JUnit" Code = "4000" />
            </mx:dataProvider>
         </mx:DataGrid>
         
         <s:Button label = "Print Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" 
            styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在 Flex - 创建应用程序 一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

单击"打印我"按钮，您可以看到下面显示的数据网格的打印输出。

---