flex快速入门必读.doc

Flex快速入门介绍一、Flex简介：Flex是一个针对企业级富互联网应用的表示层解决方案，是一种应用程序框架。Flex系列产品包括编译工具和IDE，通过编写MXML和ActionScript代码，用编译器来生成swf文件，使用浏览器的Flash Player插件就可以进行观看。MXML代码与jsp很像，主要是用于布局和显示，ActionScript代码和javascript很像，语法也有很多相似之处。总的来说，使用java的程序员很容易入手学习flex。二、Flex与ActionScript基础：一个Flex应用程序有ActionScript和MXML两种语言代码组成。从3.0开始ActionScript已经从基于原型脚本语言进化到完全面向对象的。MXML则是一种标记语言，非常类似于大家所熟悉的超文本标记语言(HTML)，扩展标记语言(XML)。如何把MXML和ActionScript相互关联起来呢？对于编译器来说，解析这两种语法后最终被翻译成同一个对象，比如：和Var btn:Button = new Button();btn.label = MyButton;btn.height = 100;产生的是同一个对象，两者的主要不同是，ActionScript创建的对象(上面第二个例子)除了Button就没有别的了，而MXML中创建的对象将Button添加到包含MXML代码的任何组件上。Flex框架根据MXML中的对象描述来调用构造函数，然后将其添加到父对象上或设置其为父对象的某个属性。MXML文件中可用标签包含ActionScript，不过ActionScript文件是不能包含在MXML里的。你可以这样理解：MXML是描述应用程序外观及其组件，而ActionScript则描述如何处理应用程序的事件和自定义逻辑，虽然这么说不完全确切，但可以让你明白这两者之间的大致关系。在某些方面，比如循环，函数定义，条件语句等等都必须通过ActionScript实现，除了最简单程序可能不需要ActionScript外，绝大多数都是需要MXML和ActionScript来相互协作。开发Flex应用程序，通常会采用如下的步骤进行：1. 在一个文本编辑器或集成开发环境（IDE）中，如Adobe Flex Builder中插入MXML根标签。2. 添加一个或更多容器。3. 在容器中添加控件，如输入栏、按钮和输出栏。4. 定义一种数据模型。5. 添加一个web服务器，HTTP服务器，或向远程Java对象发送请求。6. 为数据输入添加验证。7. 为组件添加脚本。8. 将应用程序编译成SWF文件。三、创建一个Flex应用程序：创建一个项目 在Flex Builder中创建一个Flex应用程序之前，你必须首先要创建一个项目。当创建好项目文件时，主MXML程序文件就已经准备好。然后你就可以在项目中添加各种资源，如MXML组件文件、ActionScript文件等等。其主要操作步骤有：1. 启动Flex Builder并从主菜单中选择 文件 新建 Flex 项目，出现新项目向导/新建Flex项目。2. 在打开的屏幕中，选择基础数据选项/Basic data option并点下一步/Next。接下来会询问你指定保存项目文件的目录。3. 在项目名称栏中输入myFirstFlexProject。在项目内容区域，确保使用默认目录选项/取消选定。选择自己要存储的目录。Flex Builder将在该目录下创建myFirstFlexProject文件夹。4. 点击完成。Flex Builder创建好新的项目并在导航视图中进行显示。新建项目向导将自动生成项目配置文件，存放被编译SWF文件的输出目录，以及主程序文件myFirstFlexProject.mxml。创建并运行应用程序1. 如果myFirstFlexProject.mxml文件没有被打开，请在导航视图中找到并双击来打开它。2. 切换到MXML编辑器。Flex Builder将在myFirstFlexProject.mxml文件中插入随后代码： 3. 在组标签之间输入随后的代码来添加一个面板容器。 面板容器是Flex布局的基本部件。4. 在组标签之间输入随后的代码来添加一个Label控件。5. 保存文件每当你保存文件时，Flex Builder就会自动地构造应用程序。构造完成后，请点击运行/Run按钮来执行程序。一个浏览器打开并运行应用程序，如下图所示：获取并显示数据为了在应用程序中使用数据，Adobe Flex包括了与HTTP servers，web services或remote object services（Java objects）进行交互的组件，这些组件被称之为远程过程调用（RPC）服务组件。 与Adobe ColdFusion，PHP或类似的服务器技术不同，Flex应用程序并不直接连接数据库。举个例子，你可以在一个Flex文件中插入HTTP service来实现与ColdFusion文件的交互，以获取MySQL数据库中的数据，转换成XML，然后返馈给Flex应用程序。 在本节中，你将学习创建一个简单的blog阅读器。你使用了被称之为HTTPService的RPC service组件从RSS中获取数据，然后将数据绑定到Label、DataGrid、TextArea和LinkButton控件上。 为了完成这个项目，执行的步骤如下：1. 设置项目2. 检查要访问的远程数据源出于安全的原因，在客户端计算机上Flash Player中运行的应用程序，只有在满足如下条件之一的情况下，才能访问远程的数据：1. 应用程序的SWF文件与远程数据源位于同一个域中。2. 使用代理，同时SWF文件与代理位于同一个服务器中。3. 在数据源的宿主web服务器上安装crossdomain.xml（跨域策略）文件。如下例子使用的是第三种方法。1. 修改myFirstFlexProject.mxml文件，删除根标签下的其他代码。在MXML编辑器的设计模式下，从组件视图中拖拉出一个面板容器，并设置它的相应属性值：Title: Blog Reader Width: 475 Height: 400 X: 10 Y: 102. 在设计模式下，从组件视图中拖拉出如下组件到面板容器里：DataGrid TextArea LinkButton3. 使用鼠标将控件布置成垂直排列的、左对齐的列。4. 选择DataGrid控件并设置相应属性：Id: dgPosts X: 20 Y: 20 Width: 4005. 选择TextArea控件并设置相应属性：X: 20 Y: 175 Width: 4006. 选择LinkButton控件并设置相应属性：Label: Read Full Post X: 20 Y: 225 7. 点击工具条上的Source button切换成编辑器源代码模式，会看到如下代码： 8. 运行结果如下所示：9. 插入HTTPService组件首先，在源代码模式下，在标签中输入标签： url属性指明了被请求文件所在的位置。在本例中，该URL一直是有效的，但是你仍然需要确定它是否已经发生改变。useProxy属性表明你并不打算在服务器上使用代理。其次，在标签后，添加creationComplete属性（粗体显示）： 你的应用程序每次启动时，HTTPService组件的send（）方法将被调用。该方法向指定的URL发出HTTP GET或POST请求，并得到HTTP回应。在本例中，RSS feed将返回XML数据。 然后，在标签中，将title属性的值用随后的表达式替换：title=feedRequest.lastResult.rss.channel.title 当HTTPService组件返回XML时，在名叫lastResult的ActionScript对象中进行剖析。lastResult对象的结构反映了XML文档的结构。 以上添加后，代码如下： 10. 组装DataGrid控件在应用程序中，使用DataGrid控件显示新近贴子的标题。(1)在源代码模式下，在标签中输入随后的dataProvider属性： 名称为item的XML结点为DataGrid控件提供数据。在XML中这个结点是重复的，所以它在DataGrid中也是重复的。(2)在第一个标签里，键入如随后所示的headerText和dataField属性值： DataGrid控件的第一列用来显示标题。实现它是通过确定包含标题数据的XML中的字段，然后输入这个字段作为dataField的属性值。在dataProvider属性（item）中指定的XML结点，名为title的子结点中包含了所需的信息。(3)在第二个标签中，输入如随后所示的headerText，dataField和width属性值： DataGrid中的第二列用来显示日期。在本例中，包含数据的字段被称之为pubDate。(4)删除第三个标签，因为我们在这里并不需要第三列。标签看起来就象这样： (5)保存文件，编译后运行,就会看到列表中显示所给url的数据。11. 显示所选的项 当用户在DataGrid控件中进行选择时，你希望应用程序在TextArea控件中只显示贴子的头几行内容。在XML供给器的项结点中，这个信息被包含在一个称之为description的字段里。首先，在源代码模式中，在标签中输入如随后所示的htmlText属性： 对于在DataGrid组件中所选择的每个项（名称为dgPosts），description字段的数值被使用作为htmlText的属性，该属性使你可以显示HTML格式的文本。然后，保存文件，编译后运行。点击DataGrid控件中的分列，每个贴子的头几行内容将出现在TextArea控件中。12. 创建一个动态连接 首先，在源代码模式里，在标签中输入如随后所示的click属性： DataGrid控件中被选项的连接字段的值，dgPosts.selectedItem.link由navigateToURL（）方法的参数所指定，每当用户点击LinkButton控件时被调用。navigateToURL（）方法在一个新打开的浏览器窗口中，加载从指定URL传来的文档。然后，保存文件，编译后运行。四、Flex性能优化基本原则1. 从外部加载媒体（Media）Heider提到了一个常用的Flex最佳实践限制嵌入到应用/SWF文件中的媒体的数量，如图像、影片及mp3等资源都可以从外部的SWF文件加载。Flex框架可以直接将图片、mp3及字体等资源编译到SWF中。当你想让最终用户获得全部资源时，这种方式确实能派上用场，但是这会导致你的应用长时间停留在“Loading”阶段。2. 在嵌入式字体中限制字符集Heider建议在嵌入式字体中限制字符集以降低SWF文件的总下载时间：当你在Flex中嵌入一种字体时，你就会获得该字体的全部字符的支持。尽管这可能是你想要的，但你确信你需要全部字符么？例如，在一个只面向英文的应用中，你确信你真的想花时间下载中文字符数据么？3. 缓存框架Heider回顾了Flex 3 support for runtime-shared-libraries （RSL）这篇文章：从Flex 3开始，你可以将Adobe签 名的框架RSLs缓存到Flash Player的cache中。这有两个好处。首先，缓存在Flash Player cache中的签名的框架RSLs可由所有配置好的Flex应用共享。换句话说，如果某人的应用已经下载了500k的签名的框架RSL，并且该RSL仍旧 在Flash Player cache中，那么你的应用就可以使用缓存下来的RSL。其次，即使某人清空了其浏览器缓存，对Flash Player cache也没有任何影响。4. 考虑模块化Heider谈到了将Flex应用划分成模块的好处：减少字体加载时间的另一种方式就是将你的Flex应用划分成模块。使用模块的一个好处在于当加载和卸载模块时你能完全操控它。之所以要划分成模块的最后一个原因是他们更快，而且我能即时加载它们。换句话说，在启动时唯一需要加载的模块就是 Step1.swf模块。因此，在使用模块的情况下，最终用户节省了启动时间，但是当他从一个模块切换到另一个模块时却需要花更多时间，因为每个模块都需 要以JIT形式加载。在我的应用中，只有当用户首次在steps 1-5之间切换时需要花更多时间。5. 推迟实例化Heider围绕着Flex组件的“creationPolicy”属性及何时实例化应用的不同部分给出了很多建议。如果你想减少从数据下载到用户真正可以使用的总时间，当务之急就是推迟实例化。这项技术背后的理念就是直到应用真正使用的时候才在内存中创建对象。尽管推迟实例化技术会在应用的整个使用过程中导致少许通常不那么明显的延迟，但与长时间的启动延迟相比，它还是可接受的。推迟实例化的另一个好处在于内存使用的优化。以上原则来自Jun Heider在OReilly的InsideRIA站点上发表了一篇精彩的文章，该文章就如何加快Flex应用的启动速度提 出了很多建议，以帮助用户减少看见讨厌的“Loading”对话框的出现时间。他深入探讨了问题的不同方面，并对每种技术的优势和劣势进行了评判。Flex性能优化小细节1. 创建对象时用 var obj:Object = ; 要比 var obj:Object=new Object();好；创建数组用var arr:Array = ; 要比 var arr:Array = new Array(); 要好；使用循环for (var i:int=0, len=arr.length; ilen; i+) 要比 for (var i:int=0; i 两者的面积总和！5以空间换时间听起来挺虚，实则很简单，说白了就是以内存换CPU，例如将不变动的值进行保存，免去下次需要此数据的时候进行再次计算，虽然原理很简单，但是有的时候却很容易疏忽掉，而这个往往就造成你的算法效率低下的问题。6记得销毁你的对象对于非常驻的对象使用完之后记得消除其引用，防止出现内存溢出的问题，往往要做到这一点需要有一个良好的编程习惯。7清除冗余的代码有些代码可能你的程序一辈子也不会执行到，请把这些没有用的代码或者对象清理掉，否则内存会被偷偷的蚕食掉。8小心使用useBitmapCache = true，一般情况下除非你确定这个显示对象不可能发生变化那么用用也无妨，不过我更推荐自己手动的用BitmapData将该对象Draw一遍，然后让这个对象彻底消失。否则每次的变动都是巨大的性能消耗。内存释放优化原则1. 被删除对象在外部的所有引用一定要被删除干净才能被系统当成垃圾回收处理掉；2. 父对象内部的子对象被外部其他对象引用了，会导致此子对象不会被删除，子对象不会被删除又会导致了父对象不会被删除；3. 如果一个对象中引用了外部对象，当自己被删除或者不需要使用此引用对象时，一定要记得把此对象的引用设置为null;4. 本对象删除不了的原因不一定是自己被引用了，也有可能是自己的孩子被外部引用了，孩子删不掉导致父亲也删不掉；5. 除了引用需要删除外，系统组件或者全局工具、管理类如果提供了卸载方法的就一定要调用删除内部对象，否则有可能会造成内存泄露和性能损失；6. 父对象立刻被删除了不代表子对象就会被删除或立刻被删除，可能会在后期被系统自动删除或第二次移除操作时被删除；7. 如果父对象remove了子对象后没有清除对子对象的引用，子对象一样是不能被删除的，父对象也不能被删除；8. 注册的事件如果没有被移除不影响自定义的强行回收机制，但有可能会影响正常的回收机制，所以最好是做到注册的事件*都要记得移除干净。9. 父对象被删除了不代表其余子对象都删除了，找到一种状态的泄露代码不等于其他状态就没有泄露了，要各模块各状态逐个进行测试分析，直到测试任何状态下都能删除整个对象为止。内存泄露举例：1. 引用泄露：对子对象的引用，外部对本对象或子对象的引用都需要置n