什么是Flex？

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

• Flex提供由Flex类库(ActionScript类)，Flex编译器，调试器，MXML和ActionScript编程语言组成的FLEX SDK以及其他实用程序，以构建富有表现力和交互性的富互联网应用程序(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的Flex应用程序可以访问设备功能，如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必须工作的。

本教程将指导您如何准备开发环境以开始使用Adobe Flex Framework工作。 本教程还将教您如何在设置Flex框架之前在您的机器上安装JDK和Adobe Flash Builder:

系统要求

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

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

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

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

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

步骤2 - 安装Java开发工具包(JDK):

如果没有安装Java，那么您可以从Oracle的Java站点安装Java软件开发工具包(SDK):<a rel="“nofollow" href"=""> downloads / index.html“target ="_ blank“> Java SE下载。 您将在下载的文件中找到安装JDK的说明，按照给定的说明安装和配置设置。 最后设置PATH和JAVA_HOME环境变量来引用包含java和javac的目录，通常分别是java_install_dir / bin和java_install_dir。

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

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

步骤3 - 设置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession IDE试用版编写的。 所以我建议您应该有最新版本的Adobe Flash Builder在您的操作系统上安装在您的机器上。

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

Flash Builder可以通过在Windows机器上执行以下命令来启动，也可以直接双击FlashBuilder.exe

 %C:flash-builderFlashBuilder.exe

可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动Flash Builder:

$/usr/local/flash-builder/FlashBuilder

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

成功启动后，如果一切都很好，那么它应该显示以下结果:

Adobe Flash Builder预先配置了FLEX SDK。 我们在我们的示例中使用了FLEX SDK 4.5，这些示例随Adobe Flash Builder 4.5一起提供。

步骤4:设置Apache Tomcat:

您可以从 http://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%instartup.bat  or  C:apache-tomcat-6.0.33instartup.bat

Tomcat可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动:

$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%inshutdownorC:apache-tomcat-5.5.29inshutdown

通过在Unix(Solaris，Linux等)机器上执行以下命令，可以停止Tomcat:

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

在开始使用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代码负责在目标文件夹中的HelloWorld.html中动态加载swf文件，bin-debug

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

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

应用程序启动过程

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

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

Flex框架库

以下是几个重要框架库的简要细节。

在flex库中使用.swc表示法表示

客户端代码

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

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

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

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

• 使用< mx:Script>添加脚本块 标签。

• 包括外部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创建Hello World应用程序。

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

步骤1 - 创建项目

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

如果未选择，请选择应用程序类型 Web(在Adobe 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 - 修改包装HTML页面模板

在 html-template 文件夹中修改封装HTML页面模板 index.template.html 。 Flash Builder将创建一个默认的Wrapper HTML网页模板 html-template / index.template.html ，它将被编译为HelloWorld.html。 此文件包含Flash Builder在编译过程中替换的占位符，例如Flash Player版本，应用程序名称等。

让我们修改此文件以显示自定义消息，如果没有安装flash插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head><title>${title}</title><meta name="google" value="notranslate" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="styles.css" type="text/css"></link>       <link rel="stylesheet" type="text/css" href="history/history.css" /><script type="text/javascript" table table-bordered="history/history.js"></script><script type="text/javascript" table table-bordered="swfobject.js"></script><script type="text/javascript">   // For version detection, set to min. required Flash Player version,   //or 0 (or 0.0.0), for no version detection.    var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";   // To use express install, set to playerProductInstall.swf,    //otherwise the empty string.    var xiSwfUrlStr = "${expressInstallSwf}";   var flashvars = {};   var params = {};   params.quality = "high";   params.bgcolor = "${bgcolor}";   params.allowscriptaccess = "sameDomain";   params.allowfullscreen = "true";   var attributes = {};   attributes.id = "${application}";   attributes.name = "${application}";   attributes.align = "middle";   swfobject.embedSWF(   "${swf}.swf", "flashContent",    "${width}", "${height}",    swfVersionStr, xiSwfUrlStr,    flashvars, params, attributes);   // JavaScript enabled so display the flashContent div in case    //it is not replaced with a swf object.   swfobject.createCSS("#flashContent", "display:block;text-align:left;");</script></head><body>        <div id="flashContent">   <p style="margin:100px;">   <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          =((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </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>         </td>	      </tr>   </table>                   </p>                </p>   <!--<![endif]-->     <p style="margin:100px;">      <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          = ((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </tr>   </table>                   </p>             <!--[if !IE]>-->   </object>   <!--<![endif]-->   </object></noscript>     </body></html>

步骤4 - 创建内部CSS文件

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

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

步骤5 - 修改入口级类

Flash Builder将创建一个默认的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根标签< application> 容器的应用程序。 让我们修改这个文件显示“Hello，World！":

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[       import mx.controls.Alert;       import mx.events.FlexEvent;       protected function btnClickMe_clickHandler(event:MouseEvent):void       {          Alert.show("Hello World!");				       }       protected function application_initializeHandler(event:FlexEvent):void       {          lblHeader.text = "My Hello World Application";				       }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

步骤6 - 构建应用程序

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

步骤7 - 运行应用程序

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

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

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

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

本教程将解释如何创建应用程序 war 文件以及如何在Apache Tomcat Websever根目录中部署它。 如果您理解了这个简单的示例，那么您也将能够按照相同的步骤部署复杂的Flex应用程序。

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

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

第一步是使用Flash Builder IDE创建发布版本。 使用选项File > Export > Flash Builder > Release Build

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

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

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

以下是修改的mxml文件的内容 table table-bordered / com.tutorialspoint / HelloWorld.mxml 。

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         import mx.controls.Alert;         import mx.events.FlexEvent;         protected function btnClickMe_clickHandler(event:MouseEvent):void         {            Alert.show("Hello World!");				         }         protected function application_initializeHandler(event:FlexEvent):void         {            lblHeader.text = "My Hello World Application";				         }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

创建WAR文件

现在我们的applictaion工作正常，我们准备将其导出为一个战争文件。 请按照以下步骤操作:

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

• 选择所有文件＆amp; bin-release目录中的文件夹。

• 压缩所有选定的文件＆amp; 文件夹中名为 HelloWorld.zip 的文件夹。

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

部署WAR文件

• 停止tomcat服务器。

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

• 启动tomcat服务器。

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

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

运行应用程序

在网络浏览器中输入网址: http:// localhost:8080 / HelloWorld / HelloWorld.html 以启动应用程序

服务器名称(localhost)和端口(8080)可能会根据您的tomcat配置不同。

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

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

您可以参考应用程序的类路径中提供的样式表。 例如，将Style.css文件与HelloWorld.mxml文件拷贝到com / tutorialspoint / client文件夹。

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

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

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

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

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

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

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

类级别选择器

<fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";/* class level selector  */.errorLabel {   color: red;}		</fx:Style>

使用styleName属性将样式指定给UI组件。

<s:Label id="errorMsg" text="This is an error message" styleName="errorLabel"/>

Id级别选择器

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

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

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

类型级别选择器

在一个样式中样式一种类型的UI组件。

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

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

Flex样式与CSS示例

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

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

/* CSS 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 - 创建应用程序中一样 章节。
  如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

什么是Skinning？

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

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

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

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

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

步骤1:创建皮肤

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

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

现在你已经为BorderContainer创建了一个外观。 修改mxml皮肤文件 src / com.tutorialspoint / skin / GradientBackgroundSkin.mxml 的内容。 更新填充图层如下:

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

步骤2:涂抹皮肤

您可以使用两种方式在组件上应用皮肤

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

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

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

在ActionScript中应用皮肤(动态)

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

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

Flex样式与皮肤示例

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

以下是 GradientBackgroundSkin.mxml 文件 src / com / tutorialspoint / skin / GradientBackgroundSkin.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 文件 src / com / tutorialspoint / client / HelloWorld.mxml 的内容。

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%" minWidth="500" minHeight="500"   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提供了三种方式来执行数据绑定

• MXML脚本中的大括号语法({})

• < fx:binding> 标签

• ActionScript中的BindingUtils

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

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

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

数据绑定 - 使用< fx:Binding> 标签

以下示例演示使用< fx:Binding> 标记以指定源到目标的数据绑定。

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

数据绑定 - 在ActionScript中使用BindingUtils

以下示例演示使用BindingUtils指定源到目标的数据绑定。

<fx:Script>   <![CDATA[      import mx.binding.utils.BindingUtils;      import mx.events.FlexEvent;      protected function txtInput2_preinitializeHandler(event:FlexEvent):void      {         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");      }      ]]></fx:Script><s:TextInput id="txtInput1"/><s:TextInput id="txtInput2" preinitialize="txtInput2_preinitializeHandler(event)"/>

Flex数据绑定示例

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

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%" minWidth="500" minHeight="500"   >   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>   <![CDATA[      import mx.binding.utils.BindingUtils;         import mx.events.FlexEvent;      protected function txtInput6_preinitializeHandler(event:FlexEvent):void      {         BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");      }      ]]>   </fx:Script>   <fx:Binding source="txtInput3.text" destination="txtInput4.text" />   <s:BorderContainer width="500" height="550" id="mainContainer"    styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"       verticalAlign="middle">         <s:Label id="lblHeader" text="Data Binding Demonstration"         fontSize="40" color="0x777777" styleName="heading"/>         <s:Panel title="Example #1 (Using Curly Braces,{})" width="400"          height="100" >            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>            </s:layout>            <s:HGroup >               <s:Label text = "Type here: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput1"/>	            </s:HGroup>            <s:HGroup >               <s:Label text = "Copied text: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput2" text = "{txtInput1.text}"/>            </s:HGroup>						         </s:Panel>         <s:Panel title="Example #2 (Using &lt;fx:Binding&gt;)" width="400"          height="100" >            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>            </s:layout>            <s:HGroup >               <s:Label text = "Type here: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput3"/>	            </s:HGroup>            <s:HGroup >               <s:Label text = "Copied text: " width="100" paddingTop="6"/>               <s:Label id="txtInput4"/>            </s:HGroup>						         </s:Panel>         <s:Panel title="Example #3 (Using BindingUtils)" width="400"             height="100" > <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>            </s:layout>            <s:HGroup >               <s:Label text = "Type here: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput5"/>	            </s:HGroup>            <s:HGroup >               <s:Label text = "Copied text: " width="100" paddingTop="6"/>               <s:TextInput enabled="false" id="txtInput6"                preinitialize="txtInput6_preinitializeHandler(event)"/>            </s:HGroup>						         </s:Panel>      </s:VGroup>	    </s:BorderContainer>	</s:Application>

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

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

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

• 布局:它们定义UI元素应如何在屏幕上组织，并为GUI(图形用户界面)提供最终的外观和感觉。 这部分将在布局章节中讨论。

• 行为:这些是用户与UI元素交互时发生的事件。 这部分将在事件处理章节中讨论。

Flex UI元素:

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

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

基本控制

以下是几个重要的基本控制:

编译并运行应用程序，以确保业务逻辑按照要求工作。...

表单控件

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

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

复杂控制

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

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

布局面板

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

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

每个Effect都从Effect类继承属性，它继承了EventDispatcher和其他顶级类的属性。

基本效果

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

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

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

事件具有以下三个关键属性

事件流阶段

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

考虑以下应用程序代码

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500" >   <s:Panel>      <s:Button id="clickMeButton" label="Click Me!" click="doAction( );"/>   </s:Panel>   </s:Application>

当用户单击按钮时，他或她也单击了面板和应用程序。事件通过三个阶段寻找事件处理程序分配。

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

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%" minWidth="500" minHeight="500"   >   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         protected function reportEvent(event:MouseEvent):void         {            var target:String = event.target.id;            var currentTarget:String = event.target.id;            var eventPhase: String;            if(event.target is Button){               var button:Button = event.target as Button;               target = button.label + " Button";            } else if(event.target is HGroup){               var hGroup:HGroup = event.target as HGroup;               target = hGroup.id + " HGroup";            }else if(event.target is Panel){               var panel:Panel = event.target as Panel;               target = panel.id + " Panel";            }            if(event.currentTarget is Button){               var button1:Button = event.currentTarget as Button;               currentTarget = button1.label + " Button";            }else if(event.currentTarget is HGroup){               var hGroup1:HGroup = event.currentTarget as HGroup;               currentTarget = hGroup1.id + " HGroup";            }else if(event.currentTarget is Panel){               var panel1:Panel = event.currentTarget as Panel;               currentTarget = panel1.id + " Panel";            }            var eventPhaseInt:uint = event.eventPhase;            if(eventPhaseInt == EventPhase.AT_TARGET){                     eventPhase = "Target";            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE){               eventPhase = "Bubbling";            }else if(eventPhaseInt == EventPhase.CAPTURING_PHASE){               eventPhase = "Capturing";            }                        reports.text += " Target: " + target + "
 currentTarget: " +            currentTarget + "
 Phase: " + eventPhase + "
----------
";				         }      ]]>   </fx:Script>   <s:BorderContainer width="630" height="480" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="10"          horizontalAlign="center" verticalAlign="middle">         <s:Label id="lblHeader" text="Event Handling Demonstration"             fontSize="40" color="0x777777" styleName="heading"/>         <s:Panel id="parentPanel" title="Main Parent"             click="reportEvent(event)" width="500"             height="100" includeInLayout="true" visible="true">            <s:layout>               <s:VerticalLayout  gap="10"                   verticalAlign="middle" horizontalAlign="center"/>            </s:layout>						            <s:HGroup id="mainHGroup" click="reportEvent(event)">               <s:Button label="Click Me"                   click="reportEvent(event)"/>            </s:HGroup>						         </s:Panel>	         <s:Panel id="reportPanel"             title="Events" width="500" height="230">            <mx:Text id="reports" />				         </s:Panel>      </s:VGroup>	    </s:BorderContainer>	</s:Application>

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

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

• 使用ActionScript

• 使用MXML

使用ActionScript

您可以通过扩展现有组件来创建组件。 要使用Flash Builder创建组件，请单击 File > New >ActionScript Class。 输入详细信息，如下所示。

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

package com.tutorialspoint.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应用程序中测试自定义控件:

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

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

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

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

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

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

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

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

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

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

• Flex RPC服务之一提供对通过线传输的压缩二进制数据的内置支持，并且速度非常快。

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

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

Items.xml

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

HTTPService声明

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

<fx:Declarations>   <mx:HTTPService id="itemRequest"    url="//www.51coolma.cn/flex/Items.xml" /></fx:Declarations>

RPC调用

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

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

RPC服务调用示例

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

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

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

Flash Builder 4在Flex开发周期中对FlexUnit集成的优秀内置支持。

创建测试用例类

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

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

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

package com.tutorialspoint.client{   public class TestClass1   {		      [Before]      public function setUp():void {}      [After]      public function tearDown():void {}      [BeforeClass]      public static function setUpBeforeClass():void {}      [AfterClass]      public static function tearDownAfterClass():void {}	   }}

FlexUnit集成示例

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

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

package com.tutorialspoint.client{   import org.flexunit.asserts.assertEquals;   public class TestClass1   {		      private var counter: int = 1;      [Before]      public function setUp():void      {         //this code will run before every test case execution      }      [After]      public function tearDown():void      {         //this code will run after every test case execution      }      [BeforeClass]      public static function setUpBeforeClass():void      {         //this code will run once when test cases start execution      }      [AfterClass]      public static function tearDownAfterClass():void      {         //this code will run once when test cases ends execution      }            [Test]        public function testCounter():void {          assertEquals(counter, 1);      }   }}

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

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

准备好所有更改后，请按照 Flex - 创建应用一章中的常规模式进行编译。

运行测试用例

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

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

Flex提供了卓越的调试灵活代码的能力，并且Flash Builder 4具有优秀的内置调试器和调试透视支持。

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

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

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

• 在代码中设置断点，并在BreakPoint Explorer中查看它们。

• 在调试期间逐行逐行。

• 查看变量的值。

• 检查所有变量的值。

• 检查表达式的值。

• 显示挂起线程的堆栈帧。

调试示例

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[       import mx.controls.Alert;       import mx.events.FlexEvent;       protected function btnClickMe_clickHandler(event:MouseEvent):void       {          Alert.show("Hello World!");				       }       protected function application_initializeHandler(event:FlexEvent):void       {          lblHeader.text = "My Hello World Application";				       }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

准备好所有更改后，请按照 Flex - 创建应用一章中的常规模式进行编译。

步骤1 - 放置断点

在HelloWorld.mxml的application_initializeHandler的第一行放置一个断点

步骤2 - 调试应用程序

现在点击<img class="“inline" src"="" attachments="" tuploads="" flex="" debug_icon.jpg="">调试应用程序菜单并选择 HelloWorld 应用程序来调试应用程序。

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

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

应用程序启动后，您将看到对Flash Builder断点的关注，因为我们已将断点放在application_initializeHandler方法的第一行。

你可以看到被挂起的线程的stacktrace。

您可以查看表达式的值。

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

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

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

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

步骤1:创建文件夹结构

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

{language}_{country code}

例如，en_US表示美国的英语。 区域设置de_DE表示德语。 示例应用程序将支持两种常用语言:英语和德语

步骤2:创建属性文件

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

enterName=Enter your nameclickMe=Click MeapplicationTitle=Application Internationalization Demonstrationgreeting=Hello {0}

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

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

enterName=Geben Sie Ihren NamenclickMe=Klick michapplicationTitle=Anwendung Internationalisierung Demonstrationgreeting=Hallo {0}

步骤3:指定编译器选项

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

• 选择Flex编译器，并将以下内容添加到“其他编译器参数"设置中:

-locale en_US de_DE

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

• 选择Flex构建路径，然后将以下内容添加到源路径设置:

srclocale{locale}

内部化示例

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

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

<?xml version="1.0" encoding="utf-8"?>   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"    minWidth="500" minHeight="500">   <fx:Metadata>      [ResourceBundle("HelloWorldMessages")]   </fx:Metadata>    <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         import mx.controls.Alert;         [Bindable]         private var locales:Array = [{label:"English", locale:"en_US"},            {label:"German", locale:"de_DE"}];         private function comboChangeHandler():void         {           resourceManager.localeChain = [localeComboBox.selectedItem.locale];         }         protected function clickMe_clickHandler(event:MouseEvent):void         {            var name:String = txtName.text;            var inputArray:Array = new Array();            inputArray.push(name);            Alert.show(resourceManager.getString('HelloWorldMessages'            ,'greeting',inputArray));         }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" 	  horizontalAlign="center" verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40"             color="0x777777"             text ="{resourceManager.getString('HelloWorldMessages'            ,'applicationTitle')}"            styleName="heading" width="90%" height="150"/>         <s:Panel width="300" height="150">            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10" />            </s:layout>            <s:HGroup >               <s:Label                text="{resourceManager.getString('HelloWorldMessages'               ,'enterName')}"                paddingTop="2"/>			               <s:TextInput id="txtName"/>            </s:HGroup>            <s:Button             label="{resourceManager.getString('HelloWorldMessages','clickMe')}"             click="clickMe_clickHandler(event)" right="10" />	         </s:Panel>         <mx:ComboBox id="localeComboBox"          dataProvider="{locales}" change="comboChangeHandler()"/>      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

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

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

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

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

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

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

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

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

• FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作，则无法打印。

准备并发送打印作业

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

var printJob:FlexPrintJob = new FlexPrintJob();

开始打印作业

printJob.start(); 

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

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

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

printJob.send(); 

打印示例

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>     <![CDATA[        import mx.controls.Alert;        import mx.events.FlexEvent;        import mx.printing.FlexPrintJob;        import mx.printing.FlexPrintJobScaleType;        protected function btnClickMe_clickHandler(event:MouseEvent):void        {            // 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 - 创建应用程序中一样 章节。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

点击打印我按钮，您可以看到数据网格的打印输出如下所示。

Flex - 概述

什么是Flex？

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

• Flex提供由Flex类库(ActionScript类)，Flex编译器，调试器，MXML和ActionScript编程语言组成的FLEX SDK以及其他实用程序，以构建富有表现力和交互性的富互联网应用程序(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的Flex应用程序可以访问设备功能，如GPS，摄像头，本地数据库，图形加速度计。

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

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

• Flex应用程序与平台无关。 UI可以是平台本地的或者可以在每个平台上相同。

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

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

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

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

Flex的缺点

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

• Flex是基于actionscript和XML的。 学习这两个是Flex必须工作的。

Flex - 环境设置

本教程将指导您如何准备开发环境以开始使用Adobe Flex Framework工作。 本教程还将教您如何在设置Flex框架之前在您的机器上安装JDK和Adobe Flash Builder:

系统要求

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

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

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

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

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

步骤2 - 安装Java开发工具包(JDK):

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

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

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

步骤3 - 设置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession IDE试用版编写的。 所以我建议您应该有最新版本的Adobe Flash Builder在您的操作系统上安装在您的机器上。

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

Flash Builder可以通过在Windows机器上执行以下命令来启动，也可以直接双击FlashBuilder.exe

 %C:flash-builderFlashBuilder.exe

可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动Flash Builder:

$/usr/local/flash-builder/FlashBuilder

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

成功启动后，如果一切都很好，那么它应该显示以下结果:

Adobe Flash Builder预先配置了FLEX SDK。 我们在我们的示例中使用了FLEX SDK 4.5，这些示例随Adobe Flash Builder 4.5一起提供。

步骤4:设置Apache Tomcat:

您可以从http://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%instartup.bat  or  C:apache-tomcat-6.0.33instartup.bat

Tomcat可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动:

$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%inshutdownorC:apache-tomcat-5.5.29inshutdown

通过在Unix(Solaris，Linux等)机器上执行以下命令，可以停止Tomcat:

$CATALINA_HOME/bin/shutdown.shor/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代码负责在目标文件夹中的HelloWorld.html中动态加载swf文件，bin-debug

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

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

应用程序启动过程

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

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

Flex框架库

以下是几个重要框架库的简要细节。

在flex库中使用.swc表示法表示

客户端代码

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

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

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

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

• 使用< mx:Script>添加脚本块 标签。

• 包括外部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创建Hello World应用程序。

Flex - 创建应用程序

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

步骤1 - 创建项目

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

如果未选择，请选择应用程序类型 Web(在Adobe 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 - 修改包装HTML页面模板

在 html-template 文件夹中修改封装HTML页面模板 index.template.html 。 Flash Builder将创建一个默认的Wrapper HTML网页模板 html-template / index.template.html ，它将被编译为HelloWorld.html。 此文件包含Flash Builder在编译过程中替换的占位符，例如Flash Player版本，应用程序名称等。

让我们修改此文件以显示自定义消息，如果没有安装flash插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head><title>${title}</title><meta name="google" value="notranslate" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="styles.css" type="text/css"></link>       <link rel="stylesheet" type="text/css" href="history/history.css" /><script type="text/javascript" table table-bordered="history/history.js"></script><script type="text/javascript" table table-bordered="swfobject.js"></script><script type="text/javascript">   // For version detection, set to min. required Flash Player version,   //or 0 (or 0.0.0), for no version detection.    var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";   // To use express install, set to playerProductInstall.swf,    //otherwise the empty string.    var xiSwfUrlStr = "${expressInstallSwf}";   var flashvars = {};   var params = {};   params.quality = "high";   params.bgcolor = "${bgcolor}";   params.allowscriptaccess = "sameDomain";   params.allowfullscreen = "true";   var attributes = {};   attributes.id = "${application}";   attributes.name = "${application}";   attributes.align = "middle";   swfobject.embedSWF(   "${swf}.swf", "flashContent",    "${width}", "${height}",    swfVersionStr, xiSwfUrlStr,    flashvars, params, attributes);   // JavaScript enabled so display the flashContent div in case    //it is not replaced with a swf object.   swfobject.createCSS("#flashContent", "display:block;text-align:left;");</script></head><body>        <div id="flashContent">   <p style="margin:100px;">   <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          =((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </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>         </td>	      </tr>   </table>                   </p>                </p>   <!--<![endif]-->     <p style="margin:100px;">      <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          = ((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </tr>   </table>                   </p>             <!--[if !IE]>-->   </object>   <!--<![endif]-->   </object></noscript>     </body></html>

步骤4 - 创建内部CSS文件

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

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

步骤5 - 修改入口级类

Flash Builder将创建一个默认的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根标签< application> 容器的应用程序。 让我们修改这个文件显示“Hello，World！":

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[       import mx.controls.Alert;       import mx.events.FlexEvent;       protected function btnClickMe_clickHandler(event:MouseEvent):void       {          Alert.show("Hello World!");				       }       protected function application_initializeHandler(event:FlexEvent):void       {          lblHeader.text = "My Hello World Application";				       }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

步骤6 - 构建应用程序

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

步骤7 - 运行应用程序

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

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

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

应用程序启动后，您将看到对Flash Builder断点的关注，因为我们已将断点放在application_initializeHandler方法的第一行。

你可以看到被挂起的线程的stacktrace。

您可以查看表达式的值。

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

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

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

Flex - 国际化

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

步骤1:创建文件夹结构

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

{language}_{country code}

例如，en_US表示美国的英语。 区域设置de_DE表示德语。 示例应用程序将支持两种常用语言:英语和德语

步骤2:创建属性文件

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

enterName=Enter your nameclickMe=Click MeapplicationTitle=Application Internationalization Demonstrationgreeting=Hello {0}

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

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

enterName=Geben Sie Ihren NamenclickMe=Klick michapplicationTitle=Anwendung Internationalisierung Demonstrationgreeting=Hallo {0}

步骤3:指定编译器选项

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

• 选择Flex编译器，并将以下内容添加到“其他编译器参数"设置中:

-locale en_US de_DE

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

• 选择Flex构建路径，然后将以下内容添加到源路径设置:

srclocale{locale}

内部化示例

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

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

<?xml version="1.0" encoding="utf-8"?>   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"    minWidth="500" minHeight="500">   <fx:Metadata>      [ResourceBundle("HelloWorldMessages")]   </fx:Metadata>    <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         import mx.controls.Alert;         [Bindable]         private var locales:Array = [{label:"English", locale:"en_US"},            {label:"German", locale:"de_DE"}];         private function comboChangeHandler():void         {           resourceManager.localeChain = [localeComboBox.selectedItem.locale];         }         protected function clickMe_clickHandler(event:MouseEvent):void         {            var name:String = txtName.text;            var inputArray:Array = new Array();            inputArray.push(name);            Alert.show(resourceManager.getString('HelloWorldMessages'            ,'greeting',inputArray));         }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" 	  horizontalAlign="center" verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40"             color="0x777777"             text ="{resourceManager.getString('HelloWorldMessages'            ,'applicationTitle')}"            styleName="heading" width="90%" height="150"/>         <s:Panel width="300" height="150">            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10" />            </s:layout>            <s:HGroup >               <s:Label                text="{resourceManager.getString('HelloWorldMessages'               ,'enterName')}"                paddingTop="2"/>			               <s:TextInput id="txtName"/>            </s:HGroup>            <s:Button             label="{resourceManager.getString('HelloWorldMessages','clickMe')}"             click="clickMe_clickHandler(event)" right="10" />	         </s:Panel>         <mx:ComboBox id="localeComboBox"          dataProvider="{locales}" change="comboChangeHandler()"/>      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

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

Flex - 打印支持

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

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

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

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

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

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

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

• FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作，则无法打印。

准备并发送打印作业

FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作，则无法打印。...

var printJob:FlexPrintJob = new FlexPrintJob();

开始打印作业

printJob.start(); 

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

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

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

printJob.send(); 

打印示例

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>     <![CDATA[        import mx.controls.Alert;        import mx.events.FlexEvent;        import mx.printing.FlexPrintJob;        import mx.printing.FlexPrintJobScaleType;        protected function btnClickMe_clickHandler(event:MouseEvent):void        {            // 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 - 创建应用程序中一样 章节。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

点击打印我按钮，您可以看到数据网格的打印输出如下所示。

以下资源包含有关Flex的其他信息，请使用它们获取有关此主题的更深入的知识。

Flex 相关链接

• Adobe Flex - Adobe官方网站提供有关Flex的完整详细信息。

• Flex开发人员中心 - 开始学习使用Flash Builder的这些资源 。

• Adobe Flex Framework Technologies - 获取Adobe Flex框架的最新更新。

• Adobe Flex Cookbook - 查找和共享Adobe Flex代码配方

什么是Flex？

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

• Flex提供由Flex类库(ActionScript类)，Flex编译器，调试器，MXML和ActionScript编程语言组成的FLEX SDK以及其他实用程序，以构建富有表现力和交互性的富互联网应用程序(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的Flex应用程序可以访问设备功能，如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必须工作的。

本教程将指导您如何准备开发环境以开始使用Adobe Flex Framework工作。 本教程还将教您如何在设置Flex框架之前在您的机器上安装JDK和Adobe Flash Builder:

系统要求

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

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

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

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

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

步骤2 - 安装Java开发工具包(JDK):

如果没有安装Java，那么您可以从Oracle的Java站点安装Java软件开发工具包(SDK):<a rel="“nofollow" href"=""> downloads / index.html“target ="_ blank“> Java SE下载。 您将在下载的文件中找到安装JDK的说明，按照给定的说明安装和配置设置。 最后设置PATH和JAVA_HOME环境变量来引用包含java和javac的目录，通常分别是java_install_dir / bin和java_install_dir。

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

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

步骤3 - 设置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession IDE试用版编写的。 所以我建议您应该有最新版本的Adobe Flash Builder在您的操作系统上安装在您的机器上。

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

Flash Builder可以通过在Windows机器上执行以下命令来启动，也可以直接双击FlashBuilder.exe

 %C:flash-builderFlashBuilder.exe

可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动Flash Builder:

$/usr/local/flash-builder/FlashBuilder

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

成功启动后，如果一切都很好，那么它应该显示以下结果:

Adobe Flash Builder预先配置了FLEX SDK。 我们在我们的示例中使用了FLEX SDK 4.5，这些示例随Adobe Flash Builder 4.5一起提供。

步骤4:设置Apache Tomcat:

您可以从 http://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%instartup.bat  or  C:apache-tomcat-6.0.33instartup.bat

Tomcat可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动:

$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%inshutdownorC:apache-tomcat-5.5.29inshutdown

通过在Unix(Solaris，Linux等)机器上执行以下命令，可以停止Tomcat:

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

在开始使用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代码负责在目标文件夹中的HelloWorld.html中动态加载swf文件，bin-debug

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

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

应用程序启动过程

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

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

Flex框架库

以下是几个重要框架库的简要细节。

在flex库中使用.swc表示法表示

客户端代码

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

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

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

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

• 使用< mx:Script>添加脚本块 标签。

• 包括外部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创建Hello World应用程序。

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

步骤1 - 创建项目

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

如果未选择，请选择应用程序类型 Web(在Adobe 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 - 修改包装HTML页面模板

在 html-template 文件夹中修改封装HTML页面模板 index.template.html 。 Flash Builder将创建一个默认的Wrapper HTML网页模板 html-template / index.template.html ，它将被编译为HelloWorld.html。 此文件包含Flash Builder在编译过程中替换的占位符，例如Flash Player版本，应用程序名称等。

让我们修改此文件以显示自定义消息，如果没有安装flash插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head><title>${title}</title><meta name="google" value="notranslate" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="styles.css" type="text/css"></link>       <link rel="stylesheet" type="text/css" href="history/history.css" /><script type="text/javascript" table table-bordered="history/history.js"></script><script type="text/javascript" table table-bordered="swfobject.js"></script><script type="text/javascript">   // For version detection, set to min. required Flash Player version,   //or 0 (or 0.0.0), for no version detection.    var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";   // To use express install, set to playerProductInstall.swf,    //otherwise the empty string.    var xiSwfUrlStr = "${expressInstallSwf}";   var flashvars = {};   var params = {};   params.quality = "high";   params.bgcolor = "${bgcolor}";   params.allowscriptaccess = "sameDomain";   params.allowfullscreen = "true";   var attributes = {};   attributes.id = "${application}";   attributes.name = "${application}";   attributes.align = "middle";   swfobject.embedSWF(   "${swf}.swf", "flashContent",    "${width}", "${height}",    swfVersionStr, xiSwfUrlStr,    flashvars, params, attributes);   // JavaScript enabled so display the flashContent div in case    //it is not replaced with a swf object.   swfobject.createCSS("#flashContent", "display:block;text-align:left;");</script></head><body>        <div id="flashContent">   <p style="margin:100px;">   <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          =((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </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>         </td>	      </tr>   </table>                   </p>                </p>   <!--<![endif]-->     <p style="margin:100px;">      <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          = ((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </tr>   </table>                   </p>             <!--[if !IE]>-->   </object>   <!--<![endif]-->   </object></noscript>     </body></html>

步骤4 - 创建内部CSS文件

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

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

步骤5 - 修改入口级类

Flash Builder将创建一个默认的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根标签< application> 容器的应用程序。 让我们修改这个文件显示“Hello，World！":

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[       import mx.controls.Alert;       import mx.events.FlexEvent;       protected function btnClickMe_clickHandler(event:MouseEvent):void       {          Alert.show("Hello World!");				       }       protected function application_initializeHandler(event:FlexEvent):void       {          lblHeader.text = "My Hello World Application";				       }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

步骤6 - 构建应用程序

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

步骤7 - 运行应用程序

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

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

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

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

本教程将解释如何创建应用程序 war 文件以及如何在Apache Tomcat Websever根目录中部署它。 如果您理解了这个简单的示例，那么您也将能够按照相同的步骤部署复杂的Flex应用程序。

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

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

第一步是使用Flash Builder IDE创建发布版本。 使用选项File > Export > Flash Builder > Release Build

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

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

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

以下是修改的mxml文件的内容 table table-bordered / com.tutorialspoint / HelloWorld.mxml 。

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         import mx.controls.Alert;         import mx.events.FlexEvent;         protected function btnClickMe_clickHandler(event:MouseEvent):void         {            Alert.show("Hello World!");				         }         protected function application_initializeHandler(event:FlexEvent):void         {            lblHeader.text = "My Hello World Application";				         }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

创建WAR文件

现在我们的applictaion工作正常，我们准备将其导出为一个战争文件。 请按照以下步骤操作:

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

• 选择所有文件＆amp; bin-release目录中的文件夹。

• 压缩所有选定的文件＆amp; 文件夹中名为 HelloWorld.zip 的文件夹。

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

部署WAR文件

• 停止tomcat服务器。

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

• 启动tomcat服务器。

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

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

运行应用程序

在网络浏览器中输入网址: http:// localhost:8080 / HelloWorld / HelloWorld.html 以启动应用程序

服务器名称(localhost)和端口(8080)可能会根据您的tomcat配置不同。

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

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

您可以参考应用程序的类路径中提供的样式表。 例如，将Style.css文件与HelloWorld.mxml文件拷贝到com / tutorialspoint / client文件夹。

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

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

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

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

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

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

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

类级别选择器

<fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";/* class level selector  */.errorLabel {   color: red;}		</fx:Style>

使用styleName属性将样式指定给UI组件。

<s:Label id="errorMsg" text="This is an error message" styleName="errorLabel"/>

Id级别选择器

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

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

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

类型级别选择器

在一个样式中样式一种类型的UI组件。

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

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

Flex样式与CSS示例

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

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

/* CSS 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 - 创建应用程序中一样 章节。
  如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

什么是Skinning？

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

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

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

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

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

步骤1:创建皮肤

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

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

现在你已经为BorderContainer创建了一个外观。 修改mxml皮肤文件 src / com.tutorialspoint / skin / GradientBackgroundSkin.mxml 的内容。 更新填充图层如下:

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

步骤2:涂抹皮肤

您可以使用两种方式在组件上应用皮肤

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

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

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

在ActionScript中应用皮肤(动态)

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

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

Flex样式与皮肤示例

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

以下是 GradientBackgroundSkin.mxml 文件 src / com / tutorialspoint / skin / GradientBackgroundSkin.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 文件 src / com / tutorialspoint / client / HelloWorld.mxml 的内容。

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%" minWidth="500" minHeight="500"   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提供了三种方式来执行数据绑定

• MXML脚本中的大括号语法({})

• < fx:binding> 标签

• ActionScript中的BindingUtils

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

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

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

数据绑定 - 使用< fx:Binding> 标签

以下示例演示使用< fx:Binding> 标记以指定源到目标的数据绑定。

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

数据绑定 - 在ActionScript中使用BindingUtils

以下示例演示使用BindingUtils指定源到目标的数据绑定。

<fx:Script>   <![CDATA[      import mx.binding.utils.BindingUtils;      import mx.events.FlexEvent;      protected function txtInput2_preinitializeHandler(event:FlexEvent):void      {         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");      }      ]]></fx:Script><s:TextInput id="txtInput1"/><s:TextInput id="txtInput2" preinitialize="txtInput2_preinitializeHandler(event)"/>

Flex数据绑定示例

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

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%" minWidth="500" minHeight="500"   >   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>   <![CDATA[      import mx.binding.utils.BindingUtils;         import mx.events.FlexEvent;      protected function txtInput6_preinitializeHandler(event:FlexEvent):void      {         BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");      }      ]]>   </fx:Script>   <fx:Binding source="txtInput3.text" destination="txtInput4.text" />   <s:BorderContainer width="500" height="550" id="mainContainer"    styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"       verticalAlign="middle">         <s:Label id="lblHeader" text="Data Binding Demonstration"         fontSize="40" color="0x777777" styleName="heading"/>         <s:Panel title="Example #1 (Using Curly Braces,{})" width="400"          height="100" >            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>            </s:layout>            <s:HGroup >               <s:Label text = "Type here: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput1"/>	            </s:HGroup>            <s:HGroup >               <s:Label text = "Copied text: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput2" text = "{txtInput1.text}"/>            </s:HGroup>						         </s:Panel>         <s:Panel title="Example #2 (Using &lt;fx:Binding&gt;)" width="400"          height="100" >            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>            </s:layout>            <s:HGroup >               <s:Label text = "Type here: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput3"/>	            </s:HGroup>            <s:HGroup >               <s:Label text = "Copied text: " width="100" paddingTop="6"/>               <s:Label id="txtInput4"/>            </s:HGroup>						         </s:Panel>         <s:Panel title="Example #3 (Using BindingUtils)" width="400"             height="100" > <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>            </s:layout>            <s:HGroup >               <s:Label text = "Type here: " width="100" paddingTop="6"/>               <s:TextInput id="txtInput5"/>	            </s:HGroup>            <s:HGroup >               <s:Label text = "Copied text: " width="100" paddingTop="6"/>               <s:TextInput enabled="false" id="txtInput6"                preinitialize="txtInput6_preinitializeHandler(event)"/>            </s:HGroup>						         </s:Panel>      </s:VGroup>	    </s:BorderContainer>	</s:Application>

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

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

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

• 布局:它们定义UI元素应如何在屏幕上组织，并为GUI(图形用户界面)提供最终的外观和感觉。 这部分将在布局章节中讨论。

• 行为:这些是用户与UI元素交互时发生的事件。 这部分将在事件处理章节中讨论。

Flex UI元素:

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

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

基本控制

以下是几个重要的基本控制:

编译并运行应用程序，以确保业务逻辑按照要求工作。...

表单控件

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

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

复杂控制

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

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

布局面板

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

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

每个Effect都从Effect类继承属性，它继承了EventDispatcher和其他顶级类的属性。

基本效果

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

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

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

事件具有以下三个关键属性

事件流阶段

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

考虑以下应用程序代码

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500" >   <s:Panel>      <s:Button id="clickMeButton" label="Click Me!" click="doAction( );"/>   </s:Panel>   </s:Application>

当用户单击按钮时，他或她也单击了面板和应用程序。事件通过三个阶段寻找事件处理程序分配。

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

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%" minWidth="500" minHeight="500"   >   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         protected function reportEvent(event:MouseEvent):void         {            var target:String = event.target.id;            var currentTarget:String = event.target.id;            var eventPhase: String;            if(event.target is Button){               var button:Button = event.target as Button;               target = button.label + " Button";            } else if(event.target is HGroup){               var hGroup:HGroup = event.target as HGroup;               target = hGroup.id + " HGroup";            }else if(event.target is Panel){               var panel:Panel = event.target as Panel;               target = panel.id + " Panel";            }            if(event.currentTarget is Button){               var button1:Button = event.currentTarget as Button;               currentTarget = button1.label + " Button";            }else if(event.currentTarget is HGroup){               var hGroup1:HGroup = event.currentTarget as HGroup;               currentTarget = hGroup1.id + " HGroup";            }else if(event.currentTarget is Panel){               var panel1:Panel = event.currentTarget as Panel;               currentTarget = panel1.id + " Panel";            }            var eventPhaseInt:uint = event.eventPhase;            if(eventPhaseInt == EventPhase.AT_TARGET){                     eventPhase = "Target";            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE){               eventPhase = "Bubbling";            }else if(eventPhaseInt == EventPhase.CAPTURING_PHASE){               eventPhase = "Capturing";            }                        reports.text += " Target: " + target + "
 currentTarget: " +            currentTarget + "
 Phase: " + eventPhase + "
----------
";				         }      ]]>   </fx:Script>   <s:BorderContainer width="630" height="480" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="10"          horizontalAlign="center" verticalAlign="middle">         <s:Label id="lblHeader" text="Event Handling Demonstration"             fontSize="40" color="0x777777" styleName="heading"/>         <s:Panel id="parentPanel" title="Main Parent"             click="reportEvent(event)" width="500"             height="100" includeInLayout="true" visible="true">            <s:layout>               <s:VerticalLayout  gap="10"                   verticalAlign="middle" horizontalAlign="center"/>            </s:layout>						            <s:HGroup id="mainHGroup" click="reportEvent(event)">               <s:Button label="Click Me"                   click="reportEvent(event)"/>            </s:HGroup>						         </s:Panel>	         <s:Panel id="reportPanel"             title="Events" width="500" height="230">            <mx:Text id="reports" />				         </s:Panel>      </s:VGroup>	    </s:BorderContainer>	</s:Application>

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

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

• 使用ActionScript

• 使用MXML

使用ActionScript

您可以通过扩展现有组件来创建组件。 要使用Flash Builder创建组件，请单击 File > New >ActionScript Class。 输入详细信息，如下所示。

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

package com.tutorialspoint.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应用程序中测试自定义控件:

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

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

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

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

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

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

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

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

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

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

• Flex RPC服务之一提供对通过线传输的压缩二进制数据的内置支持，并且速度非常快。

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

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

Items.xml

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

HTTPService声明

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

<fx:Declarations>   <mx:HTTPService id="itemRequest"    url="//www.51coolma.cn/flex/Items.xml" /></fx:Declarations>

RPC调用

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

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

RPC服务调用示例

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

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

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

Flash Builder 4在Flex开发周期中对FlexUnit集成的优秀内置支持。

创建测试用例类

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

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

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

package com.tutorialspoint.client{   public class TestClass1   {		      [Before]      public function setUp():void {}      [After]      public function tearDown():void {}      [BeforeClass]      public static function setUpBeforeClass():void {}      [AfterClass]      public static function tearDownAfterClass():void {}	   }}

FlexUnit集成示例

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

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

package com.tutorialspoint.client{   import org.flexunit.asserts.assertEquals;   public class TestClass1   {		      private var counter: int = 1;      [Before]      public function setUp():void      {         //this code will run before every test case execution      }      [After]      public function tearDown():void      {         //this code will run after every test case execution      }      [BeforeClass]      public static function setUpBeforeClass():void      {         //this code will run once when test cases start execution      }      [AfterClass]      public static function tearDownAfterClass():void      {         //this code will run once when test cases ends execution      }            [Test]        public function testCounter():void {          assertEquals(counter, 1);      }   }}

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

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

准备好所有更改后，请按照 Flex - 创建应用一章中的常规模式进行编译。

运行测试用例

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

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

Flex提供了卓越的调试灵活代码的能力，并且Flash Builder 4具有优秀的内置调试器和调试透视支持。

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

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

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

• 在代码中设置断点，并在BreakPoint Explorer中查看它们。

• 在调试期间逐行逐行。

• 查看变量的值。

• 检查所有变量的值。

• 检查表达式的值。

• 显示挂起线程的堆栈帧。

调试示例

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[       import mx.controls.Alert;       import mx.events.FlexEvent;       protected function btnClickMe_clickHandler(event:MouseEvent):void       {          Alert.show("Hello World!");				       }       protected function application_initializeHandler(event:FlexEvent):void       {          lblHeader.text = "My Hello World Application";				       }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

准备好所有更改后，请按照 Flex - 创建应用一章中的常规模式进行编译。

步骤1 - 放置断点

在HelloWorld.mxml的application_initializeHandler的第一行放置一个断点

步骤2 - 调试应用程序

现在点击<img class="“inline" src"="" attachments="" tuploads="" flex="" debug_icon.jpg="">调试应用程序菜单并选择 HelloWorld 应用程序来调试应用程序。

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

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

应用程序启动后，您将看到对Flash Builder断点的关注，因为我们已将断点放在application_initializeHandler方法的第一行。

你可以看到被挂起的线程的stacktrace。

您可以查看表达式的值。

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

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

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

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

步骤1:创建文件夹结构

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

{language}_{country code}

例如，en_US表示美国的英语。 区域设置de_DE表示德语。 示例应用程序将支持两种常用语言:英语和德语

步骤2:创建属性文件

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

enterName=Enter your nameclickMe=Click MeapplicationTitle=Application Internationalization Demonstrationgreeting=Hello {0}

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

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

enterName=Geben Sie Ihren NamenclickMe=Klick michapplicationTitle=Anwendung Internationalisierung Demonstrationgreeting=Hallo {0}

步骤3:指定编译器选项

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

• 选择Flex编译器，并将以下内容添加到“其他编译器参数"设置中:

-locale en_US de_DE

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

• 选择Flex构建路径，然后将以下内容添加到源路径设置:

srclocale{locale}

内部化示例

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

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

<?xml version="1.0" encoding="utf-8"?>   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"    minWidth="500" minHeight="500">   <fx:Metadata>      [ResourceBundle("HelloWorldMessages")]   </fx:Metadata>    <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         import mx.controls.Alert;         [Bindable]         private var locales:Array = [{label:"English", locale:"en_US"},            {label:"German", locale:"de_DE"}];         private function comboChangeHandler():void         {           resourceManager.localeChain = [localeComboBox.selectedItem.locale];         }         protected function clickMe_clickHandler(event:MouseEvent):void         {            var name:String = txtName.text;            var inputArray:Array = new Array();            inputArray.push(name);            Alert.show(resourceManager.getString('HelloWorldMessages'            ,'greeting',inputArray));         }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" 	  horizontalAlign="center" verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40"             color="0x777777"             text ="{resourceManager.getString('HelloWorldMessages'            ,'applicationTitle')}"            styleName="heading" width="90%" height="150"/>         <s:Panel width="300" height="150">            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10" />            </s:layout>            <s:HGroup >               <s:Label                text="{resourceManager.getString('HelloWorldMessages'               ,'enterName')}"                paddingTop="2"/>			               <s:TextInput id="txtName"/>            </s:HGroup>            <s:Button             label="{resourceManager.getString('HelloWorldMessages','clickMe')}"             click="clickMe_clickHandler(event)" right="10" />	         </s:Panel>         <mx:ComboBox id="localeComboBox"          dataProvider="{locales}" change="comboChangeHandler()"/>      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

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

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

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

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

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

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

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

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

• FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作，则无法打印。

准备并发送打印作业

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

var printJob:FlexPrintJob = new FlexPrintJob();

开始打印作业

printJob.start(); 

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

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

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

printJob.send(); 

打印示例

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>     <![CDATA[        import mx.controls.Alert;        import mx.events.FlexEvent;        import mx.printing.FlexPrintJob;        import mx.printing.FlexPrintJobScaleType;        protected function btnClickMe_clickHandler(event:MouseEvent):void        {            // 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 - 创建应用程序中一样 章节。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

点击打印我按钮，您可以看到数据网格的打印输出如下所示。

Flex - 概述

什么是Flex？

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

• Flex提供由Flex类库(ActionScript类)，Flex编译器，调试器，MXML和ActionScript编程语言组成的FLEX SDK以及其他实用程序，以构建富有表现力和交互性的富互联网应用程序(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的Flex应用程序可以访问设备功能，如GPS，摄像头，本地数据库，图形加速度计。

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

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

• Flex应用程序与平台无关。 UI可以是平台本地的或者可以在每个平台上相同。

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

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

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

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

Flex的缺点

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

• Flex是基于actionscript和XML的。 学习这两个是Flex必须工作的。

Flex - 环境设置

本教程将指导您如何准备开发环境以开始使用Adobe Flex Framework工作。 本教程还将教您如何在设置Flex框架之前在您的机器上安装JDK和Adobe Flash Builder:

系统要求

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

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

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

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

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

步骤2 - 安装Java开发工具包(JDK):

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

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

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

步骤3 - 设置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession IDE试用版编写的。 所以我建议您应该有最新版本的Adobe Flash Builder在您的操作系统上安装在您的机器上。

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

Flash Builder可以通过在Windows机器上执行以下命令来启动，也可以直接双击FlashBuilder.exe

 %C:flash-builderFlashBuilder.exe

可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动Flash Builder:

$/usr/local/flash-builder/FlashBuilder

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

成功启动后，如果一切都很好，那么它应该显示以下结果:

Adobe Flash Builder预先配置了FLEX SDK。 我们在我们的示例中使用了FLEX SDK 4.5，这些示例随Adobe Flash Builder 4.5一起提供。

步骤4:设置Apache Tomcat:

您可以从http://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%instartup.bat  or  C:apache-tomcat-6.0.33instartup.bat

Tomcat可以通过在Unix(Solaris，Linux等)机器上执行以下命令来启动:

$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%inshutdownorC:apache-tomcat-5.5.29inshutdown

通过在Unix(Solaris，Linux等)机器上执行以下命令，可以停止Tomcat:

$CATALINA_HOME/bin/shutdown.shor/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代码负责在目标文件夹中的HelloWorld.html中动态加载swf文件，bin-debug

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

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

应用程序启动过程

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

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

Flex框架库

以下是几个重要框架库的简要细节。

在flex库中使用.swc表示法表示

客户端代码

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

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

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

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

• 使用< mx:Script>添加脚本块 标签。

• 包括外部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创建Hello World应用程序。

Flex - 创建应用程序

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

步骤1 - 创建项目

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

如果未选择，请选择应用程序类型 Web(在Adobe 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 - 修改包装HTML页面模板

在 html-template 文件夹中修改封装HTML页面模板 index.template.html 。 Flash Builder将创建一个默认的Wrapper HTML网页模板 html-template / index.template.html ，它将被编译为HelloWorld.html。 此文件包含Flash Builder在编译过程中替换的占位符，例如Flash Player版本，应用程序名称等。

让我们修改此文件以显示自定义消息，如果没有安装flash插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head><title>${title}</title><meta name="google" value="notranslate" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="styles.css" type="text/css"></link>       <link rel="stylesheet" type="text/css" href="history/history.css" /><script type="text/javascript" table table-bordered="history/history.js"></script><script type="text/javascript" table table-bordered="swfobject.js"></script><script type="text/javascript">   // For version detection, set to min. required Flash Player version,   //or 0 (or 0.0.0), for no version detection.    var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";   // To use express install, set to playerProductInstall.swf,    //otherwise the empty string.    var xiSwfUrlStr = "${expressInstallSwf}";   var flashvars = {};   var params = {};   params.quality = "high";   params.bgcolor = "${bgcolor}";   params.allowscriptaccess = "sameDomain";   params.allowfullscreen = "true";   var attributes = {};   attributes.id = "${application}";   attributes.name = "${application}";   attributes.align = "middle";   swfobject.embedSWF(   "${swf}.swf", "flashContent",    "${width}", "${height}",    swfVersionStr, xiSwfUrlStr,    flashvars, params, attributes);   // JavaScript enabled so display the flashContent div in case    //it is not replaced with a swf object.   swfobject.createCSS("#flashContent", "display:block;text-align:left;");</script></head><body>        <div id="flashContent">   <p style="margin:100px;">   <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          =((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </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>         </td>	      </tr>   </table>                   </p>                </p>   <!--<![endif]-->     <p style="margin:100px;">      <table  width="700" cellpadding="10" cellspacing="2" border="0">      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	      <tr><td class="pluginText">The Adobe Flash Player version       10.2.0 or greater is required.</td></tr>			      <tr><td class = "pluginInstallText" align="left">         <table border="0" width="100%">         <tr class = "pluginInstallText" >									         <td>Click here to download and install Adobe Flash Player:</td>													         <td> </td>         <td align="right">	<script type="text/javascript">          var pageHost          = ((document.location.protocol == "https:") ? "https://" : "http://");          document.write("<a target='_blank'"         +" href='http://get.adobe.com/flashplayer/'><"         +"img style='border-style: none' table table-bordered='"          +pageHost          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"         +" alt='Get Adobe Flash player' /></a>" );          </script>          </td>         </tr>         </table>         </td>	      </tr>   </table>                   </p>             <!--[if !IE]>-->   </object>   <!--<![endif]-->   </object></noscript>     </body></html>

步骤4 - 创建内部CSS文件

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

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

步骤5 - 修改入口级类

Flash Builder将创建一个默认的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根标签< application> 容器的应用程序。 让我们修改这个文件显示“Hello，World！":

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[       import mx.controls.Alert;       import mx.events.FlexEvent;       protected function btnClickMe_clickHandler(event:MouseEvent):void       {          Alert.show("Hello World!");				       }       protected function application_initializeHandler(event:FlexEvent):void       {          lblHeader.text = "My Hello World Application";				       }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"          verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40" color="0x777777"             styleName="heading"/>         <s:Button label="Click Me!" id="btnClickMe"             click="btnClickMe_clickHandler(event)" styleName="button" />      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

步骤6 - 构建应用程序

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

步骤7 - 运行应用程序

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

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

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

应用程序启动后，您将看到对Flash Builder断点的关注，因为我们已将断点放在application_initializeHandler方法的第一行。

你可以看到被挂起的线程的stacktrace。

您可以查看表达式的值。

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

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

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

Flex - 国际化

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

步骤1:创建文件夹结构

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

{language}_{country code}

例如，en_US表示美国的英语。 区域设置de_DE表示德语。 示例应用程序将支持两种常用语言:英语和德语

步骤2:创建属性文件

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

enterName=Enter your nameclickMe=Click MeapplicationTitle=Application Internationalization Demonstrationgreeting=Hello {0}

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

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

enterName=Geben Sie Ihren NamenclickMe=Klick michapplicationTitle=Anwendung Internationalisierung Demonstrationgreeting=Hallo {0}

步骤3:指定编译器选项

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

• 选择Flex编译器，并将以下内容添加到“其他编译器参数"设置中:

-locale en_US de_DE

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

• 选择Flex构建路径，然后将以下内容添加到源路径设置:

srclocale{locale}

内部化示例

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

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

<?xml version="1.0" encoding="utf-8"?>   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"    minWidth="500" minHeight="500">   <fx:Metadata>      [ResourceBundle("HelloWorldMessages")]   </fx:Metadata>    <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>      <![CDATA[         import mx.controls.Alert;         [Bindable]         private var locales:Array = [{label:"English", locale:"en_US"},            {label:"German", locale:"de_DE"}];         private function comboChangeHandler():void         {           resourceManager.localeChain = [localeComboBox.selectedItem.locale];         }         protected function clickMe_clickHandler(event:MouseEvent):void         {            var name:String = txtName.text;            var inputArray:Array = new Array();            inputArray.push(name);            Alert.show(resourceManager.getString('HelloWorldMessages'            ,'greeting',inputArray));         }      ]]>   </fx:Script>   <s:BorderContainer width="500" height="500" id="mainContainer"       styleName="container">      <s:VGroup width="100%" height="100%" gap="50" 	  horizontalAlign="center" verticalAlign="middle">         <s:Label id="lblHeader" fontSize="40"             color="0x777777"             text ="{resourceManager.getString('HelloWorldMessages'            ,'applicationTitle')}"            styleName="heading" width="90%" height="150"/>         <s:Panel width="300" height="150">            <s:layout>               <s:VerticalLayout paddingTop="10" paddingLeft="10" />            </s:layout>            <s:HGroup >               <s:Label                text="{resourceManager.getString('HelloWorldMessages'               ,'enterName')}"                paddingTop="2"/>			               <s:TextInput id="txtName"/>            </s:HGroup>            <s:Button             label="{resourceManager.getString('HelloWorldMessages','clickMe')}"             click="clickMe_clickHandler(event)" right="10" />	         </s:Panel>         <mx:ComboBox id="localeComboBox"          dataProvider="{locales}" change="comboChangeHandler()"/>      </s:VGroup>	   </s:BorderContainer>	</s:Application>

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

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

Flex - 打印支持

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

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

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

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

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

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

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

• FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作，则无法打印。

准备并发送打印作业

FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作，则无法打印。...

var printJob:FlexPrintJob = new FlexPrintJob();

开始打印作业

printJob.start(); 

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

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

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

printJob.send(); 

打印示例

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

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="100%" height="100%"   minWidth="500" minHeight="500"    initialize="application_initializeHandler(event)">   <fx:Style source="/com/tutorialspoint/client/Style.css"/>   <fx:Script>     <![CDATA[        import mx.controls.Alert;        import mx.events.FlexEvent;        import mx.printing.FlexPrintJob;        import mx.printing.FlexPrintJobScaleType;        protected function btnClickMe_clickHandler(event:MouseEvent):void        {            // 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 - 创建应用程序中一样 章节。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

点击打印我按钮，您可以看到数据网格的打印输出如下所示。

以下资源包含有关Flex的其他信息，请使用它们获取有关此主题的更深入的知识。

Flex 相关链接

• Adobe Flex - Adobe官方网站提供有关Flex的完整详细信息。

• Flex开发人员中心 - 开始学习使用Flash Builder的这些资源 。

• Adobe Flex Framework Technologies - 获取Adobe Flex框架的最新更新。

• Adobe Flex Cookbook - 查找和共享Adobe Flex代码配方