1. WIKI教程
2. 学习Adobe Flex
3. Flex - 快速指南

Flex - 快速指南

Flex - Overview

什么是Flex？

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

Flex提供FLEX SDK，包括Flex类库（ActionScript类），Flex编译器，调试器，MXML和ActionScript编程语言以及用于构建富有表现力和交互式的富Internet应用程序（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 - Environment Setup

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

系统需求 (System Requirement)

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

JDK	1.4或以上。
记忆	没有最低要求。
磁盘空间	没有最低要求。
操作系统	没有最低要求。

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

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

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

OS	任务	命令
Windows	打开命令控制台	c:\> java -version
Linux	打开命令终端	$ java -version
Mac	开放式终端	机器:~joseph $ java -version

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

OS	生成输出
Windows	java版“1.6.0_21” Java（TM）SE运行时环境（版本1.6.0_21-b07） Java HotSpot（TM）客户端VM（版本17.0-b17，混合模式，共享）
Linux	java版“1.6.0_21” Java（TM）SE运行时环境（版本1.6.0_21-b07） Java HotSpot（TM）客户端VM（版本17.0-b17，混合模式，共享）
Mac	java版“1.6.0_21” Java（TM）SE运行时环境（版本1.6.0_21-b07） Java HotSpot（TM）64位服务器VM（内置17.0-b17，混合模式，共享）

第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的基本目录位置。 例如 -

OS	output
Windows	将环境变量JAVA_HOME设置为C:\Program Files\Java\jdk1.6.0_21
Linux	export JAVA_HOME =/usr/local/java-current
Mac	export JAVA_HOME =/Library/Java/Home

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

OS	output
Windows	将字符串;％JAVA_HOME％\ bin附加到系统变量Path的末尾。
Linux	export PATH = $ PATH:$ JAVA_HOME/bin/
Mac	不需要

第3步 - 设置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession 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机器上执行以下命令时，或者只需双击FlashBuilder.exe时，Flash Builder就会启动

%C:\flash-builder\FlashBuilder.exe

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

$/usr/local/flash-builder/FlashBuilder

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

成功启动后，如果一切正常，那么它应该显示以下结果 -

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

第4步 - 设置Apache Tomcat

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

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

%CATALINA_HOME%\bin\startup.bat 
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

成功启动后，Tomcat附带的默认Web应用程序将通过访问http://localhost:8080/ 。 如果一切正常，那么它应该显示以下结果 -

有关配置和运行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 - Applications

在我们开始使用Flash Builder创建实际的“HelloWorld”应用程序之前，让我们看看Flex应用程序的实际部分是什么 -

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

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

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

名称	地点
项目根目录	HelloWorld/
Flex框架库	构建路径
公共资源	html-template
客户端代码	table table-bordered/com/iowiki/client
服务器端代码	table table-bordered/com/iowiki/server

应用程序构建过程

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

使用Flash构建器构建代码时，Flash构建器将执行以下任务 -

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

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

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

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

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

• 在目标文件夹中复制其他flex模块（.swf文件，如sparkskins_xxx.swf，textLayout_xxx.swf）。

应用程序启动过程

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

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

Flex框架库

以下是几个重要框架库的简要细节。 请注意，Flex库使用.swc表示法表示

S.No	节点和描述
1	playerglobal.swc 此库特定于计算机上安装的FlashPlayer，并包含Flash播放器支持的本机方法。
2	textlayout.swc 此库支持与文本布局相关的功能。
3	framework.swc 这是flex框架库包含Flex的核心功能。
4	mx.swc 该库存储mx UI控件的定义。
5	charts.swc 该库支持图表控件。
6	spark.swc 该库存储spark UI控件的定义。
7	sparkskins.swc 此库支持spark UI控件的外观。

Client-side Code

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

S.No	类型和描述
1	MXML MXML是一种XML标记语言，我们将用它来布置用户界面组件。 MXML在构建过程中编译为ActionScript。
2	ActionScript ActionScript是一种面向对象的过程编程语言，基于ECMAScript（ECMA-262）第4版草案语言规范。

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

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

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

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

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

• 使用。添加脚本块

• 包括外部ActionScript文件。

• 导入ActionScript类。

• 创建ActionScript组件。

公共资源

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

S.No	文件名称和描述
1	index.template.html 主持HTML页面，带占位符。 Flash Builder使用此模板使用HelloWorld.swf文件构建实际页面HelloWorld.html。
2	playerProductInstall.swf 这是一个用于在快速模式下安装Flash Player的Flash实用程序。
3	swfobject.js 这是负责检查已安装的Flash播放器版本以及在HelloWorld.html页面中加载HelloWorld.swf的JavaScript。
4	html-template/history 此文件夹包含用于应用程序历史记录管理的资源。

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>

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

S.No	节点和描述
1	Application 定义始终是Flex应用程序的根标记的Application容器。
2	Script 包含ActionScript语言中的业务逻辑。
3	VGroup 定义垂直分组容器，该容器可以垂直方式包含Flex UI控件。
4	Label 表示Label控件，一个显示文本的非常简单的用户界面组件。
5	Button 表示一个Button控件，可以单击该控件执行某些操作。

Server-side code

这是应用程序的服务器端部分，它是非常可选的。 如果您没有在应用程序中进行任何后端处理，那么您不需要此部分，但如果后端需要一些处理并且您的客户端应用程序与服务器交互，那么您将不得不开发这些组件。

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

Flex - Create Application

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

第1步 - 创建项目

第一步是使用Flash Builder IDE创建一个简单的Flex项目。 使用File 》 New 》 Flex Project选项启动项目向导。 现在使用向导窗口将项目命名为HelloWorld ，如下所示 -

选择应用程序类型Web (runs in Adobe Flash Player) 。 但是，如果未选中此选项，则保留其他默认值，然后单击“完成”按钮。 成功创建项目后，您将在Project Explorer中拥有以下内容 -

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

夹	地点
桌子边界	源代码（mxml/as classes）文件。 我们创建了com/iowiki/client文件夹结构，其中包含负责客户端UI显示的客户端特定java类。
bin-debug	这是输出部分，它代表实际可部署的Web应用程序。 History文件夹包含Flex应用程序历史记录管理的支持文件。 framework_xxx.swf，flex应用程序应该使用flex框架文件。 HelloWorld.html，用于flex应用程序的包装器/主机HTML文件。 HelloWorld.swf，我们基于flex的应用程序。 playerProductInstall.swf，flash player express installer。 spark_xxx.swf，用于支持spark组件的库。 swfobject.js，JavaScript负责在HelloWorld.html中加载HelloWorld.swf。 它检查flash player版本并将初始化参数传递给HelloWorld.swf文件。 textLayout_xxx.swf，用于文本组件支持的库。
html-template	这表示可配置的Web应用程序。 Flash Builder将文件从html-template编译为bin-debug文件夹。 History文件夹包含Flex应用程序历史记录管理的支持文件。 index.template.html，包装器/主机HTML文件，用于具有Flash Builder特定配置占位符的Flex应用程序。 在构建期间，在bin-debug文件夹中获取编译到HelloWorld.html。 playerProductInstall.swf，flash player express installer在构建期间被复制到bin-debug文件夹。 swfobject.js，JavaScript负责在HelloWorld.html中加载HelloWorld.swf。 它检查flash player版本并将初始化参数传递给HelloWorld.swf文件，在构建期间将其复制到bindebug文件夹。

第2步 - 创建外部CSS文件

在html-template文件夹styles.css为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步 - 修改包装器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/iowiki文件夹中为HelloWorld.mxml创建一个CSS文件Style.css 。 Flex为其UI控件提供类似的CSS样式，因为HTML UI控件有css样式。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}
.button {
   fontWeight: bold;			
}
.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

第5步 - 修改入门级别

Flash Builder将创建一个默认的mxml文件table tablebordered/com.iowiki/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/iowiki/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已Build Automatically 。 如果有任何错误，请查看Problems视图。 完成更改后，您将看不到任何错误。

第7步 - 运行应用程序

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

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

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

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

Flex - Deploy Application

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

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

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

步	描述
1	在packagecom下创建一个名为HelloWorld的项目。 iowiki.client如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

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

第一步是使用Flash Builder IDE创建发布版本。 使用File 》 Export 》 Flash Builder 》 Release Build选项启动发布版本向导。

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

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

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

步	描述
1	以HelloWorld.war文件的形式压缩应用程序的bin-release文件夹的内容，并将其部署在Apache Tomcat Webserver中。
2	使用适当的URL启动Web应用程序，如下面的最后一步所述。

以下是修改后的mxml文件table table-bordered/com.iowiki/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/iowiki/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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，那么它将产生以下结果:[ 在线试用 ]

创建WAR文件

现在我们的应用程序工作正常，我们准备将其导出为war文件。 请按照以下步骤操作 -

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

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

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

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

部署WAR文件

停止tomcat服务器。

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

• 启动tomcat服务器。

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

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

运行应用程序

在Web浏览器中输入URL -

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

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

Flex - Life Cycle Phases

Flex应用程序的生命周期

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

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

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

以下是有关不同Flex生命周期事件的简要详细信息。

S.No	活动和描述
1	preInitialize:mx.core.UIComponent.preinitialize 事件类型:mx.events.FlexEvent.PREINITIALIZE 在组件初始化序列的开始处调度此事件。 调度此事件时，组件处于非常原始状态。 许多组件（如Button控件）创建内部子组件以实现功能。 例如，Button控件创建一个内部UI TextField组件来表示其标签文本。 当Flex调度pre-initialize事件时，尚未创建组件的子项，包括所有内部子项。
2	initialize:mx.core.UIComponent.initialize 事件类型:mx.events.FlexEvent.INITIALIZE 在预初始化阶段之后调度此事件。 Flex框架在此阶段初始化此组件的内部结构。 将组件添加到父组件时，将自动触发此事件。 您通常不需要调用initialize（）。
3	creationComplete:mx.core.UIComponent.creationComplete 事件类型:mx.events.FlexEvent.CREATION_COMPLETE 当组件完成构造，属性处理，测量，布局和绘图时，将调度此事件。 此时，根据其可见属性，即使已绘制组件，该组件也不可见。
4	applicationComplete:spark.components.Application.applicationComplete 事件类型:mx.events.FlexEvent.APPLICATION_COMPLETE 在应用程序初始化，由LayoutManager处理并附加到显示列表后调度。 这是应用程序创建生命周期的最后一个事件，表示应用程序已完全加载。

Flex生命周期示例

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

步	描述
1	在packagecom下创建一个名为HelloWorld的项目。 iowiki.client如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的mxml文件src/com.iowiki/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/iowiki/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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - Style with CSS

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

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

您可以参考应用程序类路径中可用的样式表。 例如，考虑一下Hello com/iowiki/client folder World.mxml文件所在的com/iowiki/client folder中的Style.css文件。

/* 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/iowiki/client/Style.css" />

使用styleName属性为UI组件指定样式

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

方式＃2:在Ui容器组件中使用样式

您可以使用标记在UI容器组件中定义样式

class选择器

<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)" />

使用CSS示例的Flex样式

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

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改Style.css, HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的CSS文件src/com.iowiki/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.iowiki/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/iowiki/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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，这将产生以下结果:[ 在线试用 ]

Flex - Style with Skin

什么是剥皮？

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

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

• 可以将外观创建为单独的mxml或ActionScript组件。

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

• 对于所有UI组件，定义外观的过程是相同的。

第1步 - 创建一个皮肤

使用File 》 New 》 MXML Skin选项启动“创建MXML外观”向导。

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

现在你已经为BorderContainer创建了一个皮肤。 修改mxml皮肤文件src/com.iowiki/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.iowiki.skin.GradientBackgroundSkin">

在ActionScript中应用皮肤（动态）

使用skinClass属性将GradientBackgroundSkin应用于具有id mainContainer的BorderContainer。

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

Flex样式与皮肤示例

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

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	如上所述，在com.iowiki.skin包下创建外观GradientBackgroundSkin.mxml 。 保持其余文件不变。
3	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
4	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是GradientBackgroundSkin.mxml文件的内容src/com/iowiki/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/iowiki/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/iowiki/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import com.iowiki.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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - Data Binding

什么是数据绑定？

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

Flex提供了三种方法来执行数据绑定，如下所示

• MXML脚本中的卷曲大括号语法（{}）
• MXML中的标记
• BindingUtils in ActionScript

数据绑定 - 在MXML中使用卷曲括号

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

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

数据绑定 - 在MXML中使用标记

以下示例演示了如何使用 用于指定源到目标的数据绑定的标记。

<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应用程序中的皮肤操作 -

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的HelloWorld.mxml文件src/com/iowiki/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/iowiki/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 <fx:Binding>)" 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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - Basic Controls

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

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

• Layouts - 它们定义了如何在屏幕上组织UI元素，并为GUI（图形用户界面）提供最终外观。 这一部分将在布局章节中介绍。

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

Flex UI元素

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

每个Basic UI控件都从UI Component类继承属性，而Component Component类继承EventDispatcher和其他顶级类的属性。

S.No	控制和描述
1	Flex EventDispatcher类 EventDispatcher类是可以调度事件的所有类的基类。 EventDispatcher类允许显示列表上的任何对象成为事件目标，因此，使用IEventDispatcher接口的方法。
2	Flex UIComponent UIComponent类是所有可视组件的基类，包括交互式和非交互式。

基本控制

以下是几个重要的Basic Controls -

S.No	控制和描述
1	Label Label是一个低级UIComponent，可以呈现一行或多行统一格式的文本。
2	Text Text控件允许您在应用程序中显示HTML内容和普通文本。
3	Image Image控件允许您在运行时导入JPEG，PNG，GIF和SWF文件。
4	LinkButton LinkBut​​ton控件是一个无边框Button控件，当用户将鼠标移到其上时，其内容会突出显示。

Flex - Form Controls

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

S.No	控制和描述
1	Flex EventDispatcher类 EventDispatcher类是可以调度事件的所有类的基类。 EventDispatcher类允许显示列表上的任何对象成为事件目标，因此，使用IEventDispatcher接口的方法。
2	Flex UIComponent UIComponent类是所有可视组件的基类，包括交互式和非交互式。

表格控制

以下是一些重要的表格控件 -

S.No	控制和描述
1	Button Button组件是常用的矩形按钮。
2	ToggleButton ToggleButton组件定义了一个切换按钮。
3	CheckBox CheckBox组件包含一个可选标签和一个可以包含复选标记的小方框。
4	ColorPicker ColorPicker控件为用户提供了一种从样本列表中选择颜色的方法。
5	ComboBox ComboBox控件是DropDownListBase控件的子类。
6	DateChooser DateChooser控件显示月份的名称，年份和每月的日期网格，其中列标记为星期几。
7	RadioButton RadioButton组件允许用户在一组互斥选项中做出单一选择。
8	TextArea TextArea是一个文本输入控件，允许用户输入和编辑多行格式化文本。
9	TextInput TextInput是一个文本输入控件，允许用户输入和编辑一行统一格式的文本。
10	DropDownList DropDownList控件包含一个下拉列表，用户可以从中选择单个值。
11	NumericStepper NumericStepper控件允许您从有序集中选择一个数字。

Flex - Complex Controls

复杂控件为用户提供了以更简单的方式处理大量数据的高级功能，并为他们提供了与应用程序的交互功能。 每个Complex UI控件都从UIComponent类继承属性，而UIComponent类继承EventDispatcher和其他顶级类的属性。

S.No	控制和描述
1	Flex EventDispatcher类 EventDispatcher类是可以调度事件的所有类的基类。 EventDispatcher类允许显示列表上的任何对象成为事件目标，因此，使用IEventDispatcher接口的方法。
2	Flex UIComponent UIComponent类是所有可视组件的基类，包括交互式和非交互式。

复杂控制

以下是几个重要的复杂控制 -

S.No	控制和描述
1	DataGrid DataGrid控件在可滚动网格上方显示一行列标题。
2	AdvancedDataGrid AdvancedDataGrid为标准DataGrid控件添加了一些附加功能，以添加数据可视化功能。
3	Menu Menu控件创建一个可单独选择的弹出菜单。
4	ProgressBar ProgressBar控件提供了一段时间内任务进度的直观表示。
5	RichTextEditor RichTextEditor控件允许用户输入和格式化文本。
6	TileList TileList控件TileList控件显示以tile为单位布置的多个项目。
7	Tree Tree控件允许用户查看排列为可扩展树的分层数据。
8	VideoPlayer VideoPlayer控件是一个可换肤的视频播放器，支持渐进式下载，多比特流式传输和流式视频。
9	Accordian Accordian控件具有一组子MX容器或Spark NavigatorContent容器，但一次只能看到其中一个容器。
10	TabNavigator TabNavigator控件包含一个TabBar容器，用于在其子容器之间导航。
11	ToggleButtonBar ToggleButtonBar控件定义一组水平或垂直按钮，用于维持其选定或取消选择的状态。

Flex - Layout Panels

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

S.No	控制和描述
1	Flex EventDispatcher类 EventDispatcher类是可以调度事件的所有类的基类。 EventDispatcher类允许显示列表上的任何对象成为事件目标，因此，使用IEventDispatcher接口的方法。
2	Flex UIComponent UIComponent类是所有可视组件的基类，包括交互式和非交互式。

布局面板

以下是几个重要的布局面板 -

S.No	面板和描述
1	BorderContainer BorderContainer类提供了一组CSS样式，用于控制容器边框和背景填充的外观。
2	Form Form容器提供对表单布局的控制，根据需要或可选标记表单字段，处理错误消息，以及将表单数据绑定到Flex数据模型以执行数据检查和验证。
3	VGroup VGroup容器是使用VerticalLayout类的Group容器。
4	HGroup HGroup容器是使用Horizo​​ntalLayout类的Group容器。
5	Panel Panel类是一个容器，包含标题栏，标题，边框和子项的内容区域。
6	SkinnableContainer SkinnableContainer类是提供可视内容的可换肤容器的基类。
7	TabBar TabBar显示一组相同的选项卡。
8	TitleWindow TitleWindow扩展了Panel，包括一个关闭按钮和移动区域。

Flex - Visual Effects

我们可以使用Effects的概念为flex应用程序添加行为。 例如，当文本框获得焦点时，我们可以使其文本变得更大胆，并使其大小稍大。

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

S.No	效果和描述
1	弹性效果等级 Effect类是一个抽象基类，它定义了所有Flex效果的基本功能。 此类定义所有效果的基础工厂类。

基本效果

以下是几个重要的基本视觉效果 -

S.No	效果和描述
1	Fade 淡化效果可动画化组件的alpha属性。
2	WipeLeft WipeLeft类定义擦除左边效果。
3	WipeRight WipeRight类定义擦除右侧效果。
4	Move3D Move3D类在x，y和z维度上移动目标对象。
5	Scale3D Scale3D类围绕变换中心以三维方式缩放目标对象。
6	Rotate3D Rotate3D类围绕x，y或z轴以三维方式旋转目标对象。
7	Animate 此Animate效果可在值之间设置任意属性集。 通过设置motionPaths属性指定要设置动画的属性和值。

Flex - Event Handling

Flex使用事件的概念将数据从一个对象传递到另一个对象，具体取决于应用程序中的状态或用户交互。

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

Event具有以下三个关键属性

S.No	财产和描述
1	Type 该type说明刚刚发生了什么样的事件。 这可能是单击，初始化，鼠标悬停，更改等。实际值将由MouseEvent.CLICK等常量表示。
2	Target Event的target属性是对生成事件的组件的对象引用。如果单击id为clickMeButton的Button，则click事件的目标将是clickMeButton
3	CurrentTarget currentTarget属性改变容器层次结构。 它主要涉及事件流程。

事件流程阶段

事件经历了三个阶段，寻找事件处理程序。

S.No	阶段和描述
1	Capture 在捕获阶段，程序将开始从外部（或顶部）父级到最里面的父级查找事件处理程序。 捕获阶段在触发事件的对象的父级停止。
2	Target 在目标阶段，检查触发事件的组件的事件处理程序。
3	Bubble 冒泡阶段是捕获阶段的反向，通过结构返回，从目标组件的父级开始。

请考虑以下应用程序代码 -

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

当用户单击Button时，他或她也单击了Panel和Application。

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

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

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的mxml文件src/com.iowiki/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/iowiki/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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - Custom Controls

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

• 使用ActionScript
• 使用MXML

使用ActionScript

您可以通过扩展现有组件来创建组件。 要使用Flash Builder创建组件，请单击File 》 New 》 ActionScript Class 。

输入详细信息，如下所示 -

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

package com.iowiki.client {
   import spark.components.Button;
   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

使用MXML

您可以通过扩展现有组件来创建组件。 要使用Flash Builder创建组件，请单击File 》 New 》 MXML Component 。

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

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

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

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

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	如上所述，创建CustomLogin.mxml和CustomButton.as组件。 修改这些文件，如下所述。 保持其余文件不变。
4	编译并运行应用程序以确保业务逻辑按照要求运行。

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

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

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

package com.iowiki.client {
   import spark.components.Button;
   public class CustomButton extends Button {
      public function CustomButton() {
         super();
         this.setStyle("color","green");
         this.label = "Submit";
      }
   }
}

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

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   xmlns:client = "com.iowiki.client.*"
   initialize = "application_initializeHandler(event)">
   <fx:Style source = "/com/iowiki/client/Style.css" />
   <fx:Script>
      <![CDATA[
        import mx.events.FlexEvent;
        protected function application_initializeHandler(event:FlexEvent):void {
           //create a new custom button
           var customButton: CustomButton = new CustomButton();
           asPanel.addElement(customButton);
        }
      ]]>
   </fx:Script>
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Custom Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         <s:Panel title = "Using MXML Component" width = "400" height = "200">
            <client:CustomLogin>			
            </client:CustomLogin>		
         </s:Panel>
         <s:Panel  title = "Using AS Component" width = "400" height = "100">
            <s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10" 
               horizontalAlign = "center" verticalAlign = "middle">
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

一旦准备好完成所有更改，让我们像在Flex - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - RPC Services

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

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

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

• 其中一个Flex RPC服务提供内置支持，可以通过线路传输压缩二进制数据，速度非常快。

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

S.No	RPC服务和描述
1	HttpService 标记用于表示MXML文件中的HTTPService对象。 当您调用HTTPService对象的send（）方法时，它会向指定的URL发出HTTP请求，并返回HTTP响应。您还可以使用HTTP HEAD，OPTIONS，TRACE和DELETE方法。
2	WebService 用于访问符合SOAP的Web服务的操作。
3	RemoteObject 标记用于表示MXML文件中的HTTPService对象。 此标记使您可以使用Action Message Format（AMF）编码访问Java对象的方法。

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

Items.xml

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

HTTPService声明

现在声明一个HTTPService并传递上述文件的url

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.iowiki.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服务 -

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的mxml文件src/com.iowiki/HelloWorld.mxml 。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500" creationComplete = "init(event)">
   <fx:Style source = "/com/iowiki/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;
         protected function init(event:FlexEvent):void {
            itemRequest.send();				
         }
      ]]>
   </fx:Script>
   <fx:Declarations>
      <mx:HTTPService id = "itemRequest" 
         url = "http://www.iowiki.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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

Flex - FlexUnit Integration

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

创建一个测试用例类

您可以使用Flash Builder创建测试类向导创建测试用例类。 正如您将在本文中看到的那样，使用Flash Builder运行测试用例非常简单。

要使用Flash Builder创建测试用例类，请单击File 》 New 》 Test Case Class 。 输入详细信息，如下所示。

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

package com.iowiki.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 Integration -

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	如上所述创建TestClass1.as测试用例并按如下所述修改TestClass1.as 。
4	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改为文件src/com.iowiki/client/TestClass1.as 。

package com.iowiki.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.iowiki/HelloWorld.mxml 。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500">
</s:Application>

一旦准备好完成所有更改，让我们像在Flex - Create Application章节中那样在正常模式下编译。

运行测试用例

现在右键单击包浏览器中的TestClass1并选择Run As 》 FlexUnit Tests 。 您将在Flash Builder测试窗口中看到以下输出。

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

Flex - Debug Application

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

• 在调试模式下，Flex Application在Flash Builder 4中内置的Flash Player Debugger版本上运行，该版本支持调试功能。

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

在本文中，我们将演示使用Flash Builder调试Flex Client代码的用法。 我们将完成以下任务

• 在代码中设置断点并在Breakpoint Explorer中查看它们。
• 在调试期间逐行执行代码。
• 查看变量的值。
• 检查所有变量的值。
• 检查表达式的值。
• 显示悬挂线程的堆栈帧。

调试示例

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的mxml文件src/com.iowiki/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/iowiki/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 - Create Application章节中那样在正常模式下编译。

第1步 - 放置断点

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

第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

一旦Application启动，您将看到关注Flash Builder断点，因为我们已将断点放在application_initialize Handler方法的第一行。

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

您可以看到表达式的值。

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

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

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

Flex - Internationalization

Flex提供了两种方式来实现Flex应用程序的国际化。我们将演示使用编译时间国际化是项目中最常用的。

S.No	技术与描述
1	Compile Time Internationalization 这种技术最为普遍，在运行时只需要很少的开销; 是一种非常有效的翻译常量和参数化字符串的技术;最简单的实现。 Compile Time国际化使用标准属性文件来存储已翻译的字符串和参数化消息，这些属性文件直接在应用程序中编译。
2	Run Time Internationalization 这种技术非常灵活，但比静态字符串国际化要慢。 您需要单独编译本地化属性文件，将它们留在应用程序外部，并在运行时加载它们。

国际化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创建属性文件，请将文件的编码更改为Other UTF-8 。选择该文件，然后在其中单击鼠标右键以打开其属性窗口。选择文本文件编码为Other UTF-8 。 应用并保存更改。

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

第3步 - 指定编译器选项

• 右键单击项目，然后选择“属性”。

• 选择Flex Compiler，并将以下内容添加到Additional Compiler Arguments设置中 -

-locale en_US de_DE

• 右键单击项目，然后选择“属性”。

• 选择Flex Build Path，并将以下内容添加到Source Path设置 -

src\locale\{locale}

内化示例

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

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的mxml文件src/com.iowiki/HelloWorld.mxml 。

<?xml version = "1.0" encoding = "utf-8"?>
   <s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500">
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   <fx:Style source = "/com/iowiki/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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

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

Flex - Printing Support

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

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

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

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

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

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

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

• FlexPrintJob类使操作系统显示“打印”对话框。 没有一些用户操作就无法打印。

准备并发送打印作业

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

var printJob:FlexPrintJob = new FlexPrintJob();

开始打印作业

printJob.start(); 

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

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

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

printJob.send(); 

打印示例

步	描述
1	在com.iowiki.client包下创建一个名为HelloWorld的项目，如Flex - Create Application一章中所述。
2	修改HelloWorld.mxml ，如下所述。 保持其余文件不变。
3	编译并运行应用程序以确保业务逻辑按照要求运行。

以下是修改后的mxml文件src/com.iowiki/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/iowiki/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 - Create Application章节中那样在正常模式下编译和运行应用程序 。 如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]

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