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 应用程序通常基于 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 基于 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 Professional 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

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

$/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 环境变量。

Tomcat可以通过在Windows机器上执行以下命令来启动，也可以直接双击startup.bat

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

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

$CATALINA_HOME/bin/startup.sh 
Or 
/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
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，这是一个 JavaScript 代码，负责在目标文件夹 bin-debug 的 HelloWorld.html 中动态加载 swf 文件

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

• 复制目标文件夹中的其他 Flex 模块（.swf 文件，例如 Sparkkins_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 文件夹下的 Host HTML 页面、CSS 或图像。它包含以下文件 -

HelloWorld.mxml

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

示例 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 项目。使用选项File > New > Flex Project启动项目向导。现在使用向导窗口将您的项目命名为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 控件提供了与 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 文件表 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 创建发布版本。使用选项File > Export > Flash Builder > Release Build启动发布构建向导。

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

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

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

以下是修改后的 mxml 文件表 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 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 += "\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" /> 

类型级别选择器

在一个 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)" />

Flex 样式与 CSS 示例

让我们按照步骤通过创建一个测试应用程序来检查 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 - 与皮肤风格

什么是剥皮？

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

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

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

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

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

第 1 步 – 创建皮肤

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

输入 Package 为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 文件的内容rc/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 - 数据绑定

什么是数据绑定？

数据绑定是一个将一个对象的数据绑定到另一个对象的过程。它需要一个源属性、一个目标属性和一个触发事件