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 应用程序可以使用 REST、SOAP、JSON、JMS 和 AMF 等行业标准与 Java、Spring、Hibernate、PHP、Ruby、.NET、Adobe ColdFusion 和 SAP 等所有主要的服务器端技术进行交互。

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

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

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

Flex 的缺点

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

• Flex 基于 ActionScript 和 XML。学习这两者对于使用 Flex 是必须的。

Flex - 环境设置

本教程将指导您如何准备开发环境以开始使用 Adobe Flex 框架。本教程还将在您设置 Flex 框架之前，教您如何在您的机器上设置 JDK 和 Adobe 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 - 设置 Adobe Flash Builder 4.5

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

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

当您在 Windows 机器上执行以下命令时，Flash Builder 将启动，或者您可以简单地双击 FlashBuilder.exe。

%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。我们在示例中使用的是与 Adobe Flash Builder 4.5 捆绑在一起的 FLEX SDK 4.5。

步骤 4 – 设置 Apache Tomcat

您可以从 https://tomcat.net.cn/ 下载最新版本的 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 
or 
C:\apache-tomcat-6.0.33\bin\startup.bat 

可以通过在 UNIX（Solaris、Linux 等）机器上执行以下命令来启动 Tomcat -

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

成功启动后，通过访问 **https://127.0.0.1:8080/** 可以使用 Tomcat 中包含的默认 Web 应用程序。如果一切正常，则应显示以下结果 -

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

可以通过在 Windows 机器上执行以下命令来停止 Tomcat -

%CATALINA_HOME%\bin\shutdown
Or
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)
• 服务器端代码

典型的 Flex 应用程序（如 HelloWord）的不同部分的示例位置如下所示 -

应用程序构建过程

首先，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（负责在 HelloWorld.html 中动态加载 swf 文件的 JavaScript 代码）复制到目标文件夹 bin-debug 中。

• 将框架库以名为 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编译器将其转换为Flash Player将在浏览器中执行的SWF文件。

一个示例HelloWorld入口类如下：

<?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（在Adobe Flash Player中运行）**。但是，如果未选择此选项，则保留其他默认值，然后单击“完成”按钮。项目成功创建后，您的项目资源管理器中将包含以下内容：

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

步骤2 - 创建外部CSS文件

在**html-template**文件夹中为包装器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 - 修改包装器HTML页面模板

修改**html-template**文件夹中的包装器HTML页面模板**index.template.html**。Flash Builder将创建一个默认的包装器HTML页面模板_html-template/index.template.html_，该模板将编译为HelloWorld.html。

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

让我们修改此文件以在未安装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 table-bordered/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 table-bordered/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\bin-release

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

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

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

部署WAR文件

停止Tomcat服务器。

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

• 启动Tomcat服务器。

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

• 现在HelloWorld.war已成功部署到Tomcat Web服务器根目录。

运行应用程序

在Web浏览器中输入URL：

**https://127.0.0.1:8080/HelloWorld/HelloWorld.html**启动应用程序。

服务器名称（localhost）和端口（8080）可能因您的Tomcat配置而异。

Flex - 生命周期阶段

Flex应用程序的生命周期

虽然您可以构建Flex应用程序而无需了解应用程序的生命周期阶段，但了解基本机制（事件发生的顺序）仍然很有好处。这将帮助您配置诸如在运行时加载其他Flex应用程序以及管理在运行时加载和卸载类库和资源的过程等功能。

深入理解 Flex 应用程序的生命周期能够帮助您构建更好的应用程序并对其进行优化，因为您将知道在何处以最佳方式运行代码。例如，如果您需要确保某些代码在预加载器中运行，则需要知道将代码放置在该事件的何处。

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

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

Flex 生命周期示例

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

以下是修改后的 mxml 文件 src/com.tutorialspoint/HelloWorld.mxml 的内容。（此处应插入 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 += "\n" + (event.type + " event occured at: " 
            + getTimer() + " ms" + "\n");
         }
      ]]>
   </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 容器组件中定义样式。（此处应插入代码片段）

类级别选择器

<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 = "This is an error message" styleName = "errorLabel" />

ID 级别选择器

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

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

<s:Label id = "msgLabel" text = "This is a normal message" /> 

类型级别选择器

一次性设置一种类型的 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)" />

Flex 样式与 CSS 示例

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

以下是修改后的 CSS 文件 src/com.tutorialspoint/Style.css 的内容。（此处应插入 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 的内容。（此处应插入 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 - 使用皮肤样式

什么是皮肤？

• 在 Flex 中，皮肤是一个完全自定义 UI 组件外观和感觉的过程。

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

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

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

• 定义皮肤的过程对于所有 UI 组件都是相同的。

步骤 1 – 创建皮肤

使用选项 文件 > 新建 > MXML 皮肤 启动创建 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 脚本中的花括号语法 ({})
• <fx:binding> 标签在 MXML 中
• 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 类的属性，而 UI Component 类又继承自 EventDispatcher 和其他顶级类的属性。

基本控件

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

Flex - 表单控件

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

表单控件

以下是几个重要的表单控件：

Flex - 复杂控件

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

复杂控件 (Complex Controls)

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

Flex - 布局面板

布局面板控件允许用户组织页面上的 UI 控件。每个布局控件都继承自 UIComponent 类，而 UIComponent 类又继承自 EventDispatcher 类和其他顶级类。

布局面板 (Layout Panels)

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

Flex - 视觉效果

我们可以使用 Effects 的概念向 Flex 应用程序添加行为。例如，当文本框获得焦点时，我们可以使其文本变粗，并使其大小略微增大。

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

基本效果 (Basic Effects)

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

Flex - 事件处理

Flex 使用事件的概念来传递数据，具体取决于应用程序中的状态或用户交互。

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

Event 具有以下三个关键属性：

事件流阶段 (Event Flow Phases)

事件会经过三个阶段来查找事件处理程序。

冒泡阶段与捕获阶段相反，从目标组件的父级向上回溯结构。

<?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>

考虑以下应用程序代码：

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

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

以下是修改后的 mxml 文件 src/com.tutorialspoint/HelloWorld.mxml 的内容。（此处应插入 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 + "\n currentTarget: " +
               currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
         }
      ]]>
   </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 - 创建应用程序章节中的说明，在com.tutorialspoint.client包下创建一个名为HelloWorld的项目。

Flex - 自定义控件

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

• Flex 提供两种创建自定义组件的方法。
• 使用 ActionScript

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

使用 MXML

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

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

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

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

使用 ActionScript

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

您可以通过扩展现有组件来创建组件。要使用 Flash Builder 创建组件，请单击文件 > 新建 > 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>

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

如上所述创建CustomLogin.mxml和CustomButton.as组件。修改这些文件，如以下所述。保持其余文件不变。

<?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/CustomLogin.mxml的内容。

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/CustomButton.as的内容。

<?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>

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

Flex - RPC 服务

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

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

• 使用 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>

HTTP 服务声明

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

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "https://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 的内容。（此处应插入 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 = "https://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 对 FlexUnit 集成在 Flex 开发周期中提供了极好的内置支持。

创建测试用例类

您可以使用 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 集成：

以下是修改后的 as 文件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 的内容。（此处应插入 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，然后选择以...运行 > FlexUnit 测试。您将在 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 的内容。（此处应插入 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 处理程序方法的第一行放置了断点。

您可以看到挂起线程的堆栈跟踪。

您可以看到表达式的值。

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

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

现在您可以看到 Flex 代码的调试方式与 Java 应用程序的调试方式相同。将断点放在任何一行，并使用 Flex 的调试功能。

Flex - 国际化

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

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

步骤 1 – 创建文件夹结构

在 Flex 项目的 src 文件夹下创建一个 locale 文件夹。这将是应用程序将支持的所有语言环境的属性文件的父目录。在 locale 文件夹内，为应用程序将支持的每个语言环境创建一个子文件夹。语言环境的命名约定是：

{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 的内容。（此处应插入 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 对象，例如表单或 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 的内容。（此处应插入 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 {
            
            // Create an instance of the FlexPrintJob class.
            var printJob:FlexPrintJob = new FlexPrintJob();
         
            // Start the print job.
            if (printJob.start() != true) return;

            // Add the object to print. Do not scale it.
            printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);

            // Send the job to the printer.
            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 - 创建应用程序章节中那样以普通模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果：[在线试用]

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