zoukankan      html  css  js  c++  java
  • 了解Flex SDK系列教程(1.Ant和FlexTask)

    声明:本文为RIAMeeting原创文章,您可以自由转载,但请务必说明文章来源并保留原文链接,谢谢!

    最近Flex/AS开发者的大事,莫过于Adobe发布了Flash Builder 4.5 (包含Flex SDK 4.5,点击这里查看新闻报道) 和 Adobe CS5.5(下载地址请登录Adobe官网,这里是相关学习资料)。新版IDE的重点是针对移动应用开发的支持(Android,iOS等等),不过,这些不是文本要探讨的内容。让我们从Flex SDK着手,了解一些Flex的内在机制和对企业级开发的支持,这也有助于我们更好的理解Flex这门技术。

    获取Flex SDK

    首先,从哪里可以获取Flex SDK?最简单最直接的方式,就是安装Flash Builder(以下简称FB),当您安装完毕,可以打开FB的安装位置,目录sdks下面,就是目前比较常用的Flex SDK版本。具体位置因您的安装选择而异,比如笔者的路径是:D:Program Files (x86)AdobeAdobe Flash Builder 4.5sdks。因为笔者安装的是FB 4.5,所以目录中实际上包含了两个版本的SDK:3.6和4.5,如图所示:

    如果您安装的是FB4.0,则看到的最新SDK版本应该是4.0或4.1。而那个比较老的3.6版本,主要是为了兼容之前的Flex3项目(如果您有比较老版本的项目,而且不打算做代码变更,那么3.6这个版本的SDK是必须的)。本文的探讨将以最新的SDK,也就是4.5为准。

    打开SDK 4.5这个目录,让我们看看SDK中都包含了哪些内容:

    1. ant 包含Flex对Ant的支持库,JAR和Java源码都有,方便我们基于Ant完成对项目的构建
    2. asdoc 基于ASDOC我们可以很方便的生成代码说明文档,这个目录则包含了对ASDOC的模板支持(调用asdoc的时候,所依赖的HTML模板文件就存放在这个目录),以及一个用于Ant构建的示意XML配置文件,仔细浏览这个目录下的文件,就可以对ASDOC有更好的了解。
    3. bin 按照惯例,我们基本也能猜出这个目录下是什么,没错,就是Flex SDK中包含的工具集(编译工具,库打包工具,文档生成工具,以及优化工具等等,这些可都是Flex开发所必须的利器),这些工具的具体用法,我们会在后面的文章中介绍。建议您将这个路径配置到系统用户的PATH中,方便通过命令行调用相应的工具。
    4. frameworks 这个也是重中之重,包含了Flex框架的核心源码(您应该也已经了解到,Flex是基于AS3的一个框架,其底层代码均是由AS3编写的(注:不包含工具集,工具是Java编写)),当您在Flex编程中有疑惑,看一眼源码或许会让您茅塞顿开。
    5. include 包含了一个用于编写ActionScript扩展的C++头文件:FlashRuntimeExtensions.h,如果您基于AIR做一些嵌入式应用(比如一个电视机),需要实现换台等功能,那就要用C++实现一些ActionScript的扩展。
    6. install 包含了用于移动开发的Android USB驱动程序
    7. lib 开发和编译Flex应用所依赖的类库,打开这个目录您就能发现很多的JAR文件,比如mxmlc.jar,另外您可能已经注意到还有mxmlc_zh_CN.jar,显然这些库大都实现了本地化,方便我们的开发和调试。
    8. runtimes 包含运行时支持,但没有Flash Player,只有AIR,包括AIR for Android的APK文件
    9. samples 一些实例文件,包括用于AIR在线无缝安装的badge,和一些Flex主题。
    10. templates 包含一些模板文件,比如用于AIR应用描述的XML约束定义文档,swfobject的示例代码等等

    因为Flex框架是开源的,所以我们也可以不安装Flash Builder,直接下载Flex的SDK。官方网站是:

    http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

    里面会有Flex SDK各个时期的版本,如无特殊需求,下载最新的正式版本即可。

    这里插播一段,Flex各个组成部分之间的开源关系(一些朋友可能会对这个方面有疑问)

    1. Flex框架:开源,包含Flex的类库(UI库,工具库等,基于AS3),和语言(MXML和Action Script3)
    2. Flex SDK:包含开源的Flex框架和工具(编译工具,优化工具等等,这些工具免费使用,但不开源)
    3. Flash Builder:商业IDE,包含Flex SDK,和提高开发者生产力的工具支持

    基于字母排序,我们就从Ant着手,来了解Flex SDK。

    Flex对Ant的支持

    Ant的全称是Apache Ant,是Apache基金会的一个子项目。它的设计目标是用于完成Java开发中的自动构建。如果您是Java开发者,那么Ant对于您并不陌生,实际上Ant在Java社区中得到了极为广泛的应用。如果您并不是从Java开发转向到Flex开发,还没有过多接触过Ant,那么没关系,Ant的概念和要解决的问题一定会让您激动的热泪盈眶(有点夸张,呵呵),因为开发领域很多概念都是相似的,Java开发中遇到的问题,我们Flex开发者也会遇到很多,比如自动构建,在一个有着N多模块,N处源码,构建过程复杂的Flex项目开发中,依赖人力手工构建项目非常不现实(机械重复且枯燥无味的过程,相信哪位开发人员都会避之唯恐不及,而且对于人力是非常大的浪费),而通过使用Ant,我们可以将这些工作交给机器来做,机器最适合干的就是这些程序固定,顺次执行的工作,而且不辞辛苦,又快又好:)

    如果你想先详细了解一下Ant,请访问Baidu文库中对Ant的定义。这里不再过多介绍。

    下面我们来着重了解一下Flex对Ant的支持情况。打开Flex SDK下的Ant目录,会看到下面的文件结构:

    lib中包含了Flex对Ant的任务支持库:flexTasks.jar,src目录中包含了flexTasks的Java源码,build.xml则是用于构建flexTasks本身的配置文件(如果您修改了flexTask的Java源码,可以用这个配置文件,重新编译,并打包到flexTasks.jar)。

    README.txt这个文件则简单描述了如何使用flexTask,笔者已经将它翻译为中文,即README_CN.txt,您可以从本文的页面底部的下载区下载这个文件。

    打开MxmlcTask.java,我们可以看到,这就是对mxmlc工具的任务封装,方便我们在Ant中基于配置文件来调用mxmlc实现对Flex项目的编译。

    下面我们通过一个简单的演示,来了解使用Ant编译项目的过程:

    1. 安装

    当然,首先您得安装Ant,并完成必要的配置(添加路径到系统用户Path)。下载地址 | 安装教程

    安装完毕后,打开CMD窗口,运行ant -version,如果能看到正确的输入信息,就代表Ant配置成功了。

    然后,将flexTasks.jar这个文件放到您的Ant安装目录中的lib目录中。虽然也可以采取将JAR文件的地址作为一个参数传递给Ant的方法,但为了方便起见,推荐直接拷贝flexTasks.jar的方式。

    另外,注意您想使用的构建工具(比如mxmlc或asc)必须包含在您的PATH设置里。将sdk/bin这个目录也配置到Path中,您的Path设置应该类似于下面的:

    1. C:Program Files (x86)Javajdk1.6.0_25in;D:Program FilesAdobeAdobe Flash Builder 4.5sdks4.5.0in;C:antin
    复制代码

    请输入下面的命令到CMD窗口:mxmlc -version,如果有正确的输出,代表Flex SDK的路径配置成功。

    2. 测试

    首先到您的磁盘便于寻找的位置,创建一个测试目录,比如命名为ant_test,里面创建2个目录:src和bin。src用于放置Flex源码,bin用于放置输出的SWF文件。然后创建一个MXML文件(随便一个文本编辑工具就可以),命名(比如Main.mxml),放到src下面。代码如下,非常简单,显示一个按钮:

    普通浏览复制代码
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    3.                xmlns:s="library://ns.adobe.com/flex/spark" 
    4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    5.     <s:Button x="52" y="25" label="按钮"/>
    6. </s:Application>

    然后为了检测ASDoc的生成效果,您可以在src目录中随意添加一个ActionScript的类,写一些基于ASDoc规则的注释,比如:

    普通浏览复制代码
    1. package
    2. {
    3.     import flash.display.Sprite;
    4.     
    5.     /**
    6.      * Test Class
    7.      * <p>Hi Neo,come here <strong>hello</strong></p>
    8.      * @author NeoGuo
    9.      * 
    10.      */    
    11.     public class TestClass extends Sprite
    12.     {
    13.         
    14.         /**
    15.          * UBB Code
    16.          */        
    17.         public var ubb:String;
    18.         private var _bbb:String;
    19.         
    20.         public function TestClass(bbb:String="1")
    21.         {
    22.             super();
    23.             this._bbb = bbb;
    24.         }
    25.  
    26.  
    27.         public function get bbb():String
    28.         {
    29.             return _bbb;
    30.         }
    31.  
    32.         public function set bbb(value:String):void
    33.         {
    34.             this._bbb = value;
    35.         }
    36.  
    37.     }
    38. }

    然后创建build.properties,按照惯例,这是用Ant的变量配置文件(注意放在src的上一层,即ant_test目录下),然后写入以下的配置参数:

    1. # 设置到您的Flex SDK的所在路径
    2. FLEX_HOME=D:/Program Files (x86)/Adobe/Adobe Flash Builder 4.5/sdks/4.5.0
    3. # 定位到您的项目源码的位置
    4. # {$basedir} 是Ant默认支持的变量
    5. SOURCE_DIR =${basedir}/src
    6. # 定位到您的Lib路径,如果存在的话
    7. LIBS_DIR =${basedir}/libs
    8. # 设定SWF的输出位置
    9. OUTPUT_DIR = ${basedir}/bin
    10. SDK_VERSION = 4.5.0.20967
    11. LOCALE = en_US
    复制代码

    然后开始编写build.xml,如下所示,我在主要部分均做了注解:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <project name="test-flex" default="build">
    3. <!--引用属性配置文件-->
    4. <property file="build.properties" />
    5. <!--定义任务的库引用路径,比如下面第25行我们用到了mxmlc,必须让Ant知道去哪里寻找这个任务的定义,包括类名称和classpath。这里我们配置了4个,实际上用到了3个,即调用mxmlc完成编译,调用html-wrapper对SWF进行HTML包裹,调用asdoc生成代码文档。compc是用来编译库(SWC)文件,这里我们没有用到。 -->
    6. <taskdef name="mxmlc" classname="flex.ant.MxmlcTask" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar"/>
    7. <taskdef name="compc" classname="flex.ant.CompcTask" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar"/>
    8. <taskdef name="html-wrapper" classname="flex.ant.HtmlWrapperTask" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar"/>
    9. <taskdef name="asdoc" classname="flex.ant.AsDocTask" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar"/>
    10. <!--完成当前构建任务所需的4个调用,首先是清理,如果bin下面有文件,删除掉;然后是编译,HTML包裹,和ASDoc文档生成-->
    11. <target name="build">
    12. <antcall target="clean"/>
    13. <antcall target="compile"/>
    14. <antcall target="wrapper"/>
    15. <antcall target="asdoc"/>
    16. </target>
    17. <!--执行清理-->
    18. <target name="clean">
    19. <delete includeemptydirs="true">
    20. <fileset dir="${OUTPUT_DIR}" includes="**/*"/>
    21. </delete>
    22. </target>
    23. <!--执行编译,注意debug参数,默认是false,如果您需要开启Debug功能,可以将它设置为true(会增大文件体积)-->
    24. <target name="compile">
    25. <mxmlc
    26. file="${SOURCE_DIR}/Main.mxml"
    27. output="${OUTPUT_DIR}/Main.swf"
    28. locale="${LOCALE}"
    29. static-rsls="false"
    30. accessible="true"
    31. debug="false"
    32. >
    33. <!--加载Flex配置文件,如果您有特殊需求(比如要保留自定义的Metadata标签,则可以设置自己定义的Flex配置文件)-->
    34. <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
    35. <!--设置源码位置-->
    36. <source-path path-element="${SOURCE_DIR}"/>
    37. <!--下面是对运行时共享库RSL的配置,不是必须,如果您不采用RSL机制,可以删除下面的定义;如果您没用到一些RSL,可以删除,只保留核心的framework, spark等引用-->
    38. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/framework.swc">
    39. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/framework_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    40. <url rsl-url="framework_${SDK_VERSION}.swz" policy-file-url=""/>
    41. </runtime-shared-library-path>
    42. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/textLayout.swc">
    43. <url rsl-url="http://fpdownload.adobe.com/pub/swz/tlf/2.0.0.232/textLayout_2.0.0.232.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    44. <url rsl-url="textLayout_2.0.0.232.swz" policy-file-url=""/>
    45. </runtime-shared-library-path>
    46. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/mx/mx.swc">
    47. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/mx_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    48. <url rsl-url="mx_${SDK_VERSION}.swz" policy-file-url=""/>
    49. </runtime-shared-library-path>
    50. <library-path file="${FLEX_HOME}/frameworks/libs/flash-integration.swc" append="true"/>
    51. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/rpc.swc">
    52. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/rpc_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    53. <url rsl-url="rpc_${SDK_VERSION}.swz" policy-file-url=""/>
    54. </runtime-shared-library-path>
    55. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/charts.swc">
    56. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/charts_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    57. <url rsl-url="charts_${SDK_VERSION}.swz" policy-file-url=""/>
    58. </runtime-shared-library-path>
    59. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/spark.swc">
    60. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/spark_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    61. <url rsl-url="spark_${SDK_VERSION}.swz" policy-file-url=""/>
    62. </runtime-shared-library-path>
    63. <library-path file="${FLEX_HOME}/frameworks/libs/authoringsupport.swc" append="true"/>
    64. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/advancedgrids.swc">
    65. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/advancedgrids_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    66. <url rsl-url="advancedgrids_${SDK_VERSION}.swz" policy-file-url=""/>
    67. </runtime-shared-library-path>
    68. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/sparkskins.swc">
    69. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/sparkskins_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    70. <url rsl-url="sparkskins_${SDK_VERSION}.swz" policy-file-url=""/>
    71. </runtime-shared-library-path>
    72. <runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/spark_dmv.swc">
    73. <url rsl-url="http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/spark_dmv_${SDK_VERSION}.swz" policy-file-url="http://fpdownload.adobe.com/pub/swz/crossdomain.xml"/>
    74. <url rsl-url="spark_dmv_${SDK_VERSION}.swz" policy-file-url=""/>
    75. </runtime-shared-library-path>
    76. <library-path file="${FLEX_HOME}/frameworks/locale/${LOCALE}" append="true"/>
    77. <library-path file="${LIBS_DIR}" append="true"/>
    78. <!--因为Flash Player内置的库,不需要打包到SWF,所以对playerglobal采取了排除方式-->
    79. <external-library-path file="${FLEX_HOME}/frameworks/libs/player/10.2/playerglobal.swc" append="true"/>
    80. <library-path file="${FLEX_HOME}/frameworks/libs/flash-integration.swc" append="true"/>
    81. <library-path file="${FLEX_HOME}/frameworks/libs/authoringsupport.swc" append="true"/>
    82. <!--引用本地化的库支持-->
    83. <library-path dir="${FLEX_HOME}/frameworks/locale/${LOCALE}" includes="*" append="true"/>
    84. <!--当前项目的库引用位置-->
    85. <library-path dir="${LIBS_DIR}" includes="*" append="true"/>
    86. </mxmlc>
    87. <!--如果基于RSL,为了保证用户在第一次使用RSL的时候,且链接不到Adobe服务器的情况下,保证应用可以正常运行,需要将这些Adobe签名的RSL移动到项目的部署目录下面。具体说明请参阅RSL的相关文章。-->
    88. <copy file="${FLEX_HOME}/frameworks/rsls/spark_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/spark_${SDK_VERSION}.swz"/>
    89. <copy file="${FLEX_HOME}/frameworks/rsls/charts_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/charts_${SDK_VERSION}.swz"/>
    90. <copy file="${FLEX_HOME}/frameworks/rsls/sparkskins_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/sparkskins_${SDK_VERSION}.swz"/>
    91. <copy file="${FLEX_HOME}/frameworks/rsls/framework_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/framework_${SDK_VERSION}.swz"/>
    92. <copy file="${FLEX_HOME}/frameworks/rsls/mx_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/mx_${SDK_VERSION}.swz"/>
    93. <copy file="${FLEX_HOME}/frameworks/rsls/textLayout_2.0.0.232.swz" tofile="${OUTPUT_DIR}/textLayout_2.0.0.232.swz"/>
    94. <copy file="${FLEX_HOME}/frameworks/rsls/spark_dmv_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/spark_dmv_${SDK_VERSION}.swz"/>
    95. <copy file="${FLEX_HOME}/frameworks/rsls/advancedgrids_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/advancedgrids_${SDK_VERSION}.swz"/>
    96. <copy file="${FLEX_HOME}/frameworks/rsls/rpc_${SDK_VERSION}.swz" tofile="${OUTPUT_DIR}/rpc_${SDK_VERSION}.swz"/>
    97. </target>
    98. <!--执行对SWF进行HTML包裹,可以传递一些参数-->
    99. <target name="wrapper">
    100. <html-wrapper
    101. output="${OUTPUT_DIR}"
    102. file="Main.html"
    103. swf="Main"
    104. history="true"
    105. express-install="true"
    106. version-detection="true"
    107. version-major="10"
    108. version-minor="2"
    109. version-revision="0"
    110. height="100%"
    111. width="100%"
    112. title="Main"
    113. bgcolor="white"
    114. />
    115. </target>
    116. <!--执行ASDoc文档生成-->
    117. <target name="asdoc">
    118. <asdoc output="${OUTPUT_DIR}/asdoc" lenient="true" failonerror="false">
    119. <doc-sources path-element="${SOURCE_DIR}"/>
    120. <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
    121. </asdoc>
    122. </target>
    123. </project>
    复制代码

    然后就可以执行Ant了,如果您是Win7系统,在ant_test目录上按住Shift点右键,选择"在此处打开命令窗口",然后输出ant,回车,就可以看到整个执行过程

    等待编译完成,您可以查看bin目录下,生成了SWF文件,HTML文件,以及ASDoc文档等等。特别是ASDoc,对于团队协作的项目开发很有意义。

    附件中的TestAnt.zip就是本次演示的打包下载。

    Flash Builder对于Ant的支持

    之前的Flash Builder,做了很多精简,移除了Eclipse的Java开发插件,Ant也没有保留,所以如果您使用的是Flash Builder4,是不能直接使用Ant的,需要下载Ant的插件(参阅这篇教程)。这样还是给开发者造成了很多不便的。所以,在Flash Builder 4.5这个版本里面,已经内置了Ant的开发插件。如果您已经安装了Flash Builder 4.5,请打开,随便某个项目上点击右键,属性,构建器,然后在打开的窗口中点击右侧的新建按钮,可以看到Ant Builder的选项。

    默认情况下,项目只有一个Flex构建器(因为笔者安装了SourceMate插件,所以多了一个SourceMate构建器)。基于Ant,您可以很方便的为项目添加其它的构建器,满足多样化的需求,比如您需要拷贝其它一些项目的模块放置到您的项目进行联合测试,而您又不想每次都手工操作,那么可以通过这个面板,创建一个新的Ant Builder,指定一下构建所需的build.xml文件(具体语句不再阐述,请参阅Ant的相关文档)即可。

    SourceMate 3对于Ant的支持:

    SourceMate是个Eclipse的商业插件,用于增强Flash Builder的功能,笔者从2.0开始使用,感觉很好,现在最新版本是3.0,针对Flash Builder 4.5做了一些功能变更(原有的一些代码修复等功能因为Flash Builder 4.5本身进行了增强,SourceMate删除了与Flash Builder 4.5重复的功能,而在其它方面做了加强)。插件地址:

    http://updates.elementriver.com/sourcemate/v3/

    SourceMate对Ant有一个很不错的功能,可以根据当前项目的配置,自动帮我们生成Ant构建文件(build.xml),这可以帮我们省不少事。该功能集成在SourceMate菜单中,如图所示:

    点击"Generate Ant Build file",就可以生成build.xml,然后您可以根据自己的需要,稍加修改,即可用于项目的自动构建。

  • 相关阅读:
    ES6知识点整理之----解构赋值----对象
    ES6知识点整理之----解构赋值----数组
    ES6知识点整理之----声明变量总结与global
    ES6知识点整理之----const
    ES6知识点整理之----块级作用域
    ES6知识点整理之----let
    ES6知识点整理之----历史及简介
    推荐大家使用的CSS书写规范、顺序
    meta标签补充属性(viewport)
    meta标签属性总结
  • 原文地址:https://www.cnblogs.com/chenhongyu/p/3282823.html
Copyright © 2011-2022 走看看