Flex 开发入门
Flex 开发入门
级别：初级
刘庆(qlcdl@https://www.sodocs.net/doc/572466498.html,), 软件工程师, IBM 软件开发中心
2009 年1 月07 日
本文介绍Flex 开发的基础知识：包括如何搭建开发环境，如何调试，以及如何建立和部署简单的Flex 项目。通过本文的学习，可以为您将来深入地学习Flex 打下良好的基础。开始之前
Flex 作为富Internet 应用（RIA）时代的新技术代表，自从2007 年Adobe 公司将其开源以来，Flex 就以前所未有的速度在成长。很多公司，包括IBM 都纷纷加入了Flex 开发的阵营当中。很多开发人员也按捺不住Flex 的“诱惑”而准备从事Flex 开发。本文主要讲述Flex 开发的基础知识，主要是关于开发环境的搭建，以及介绍简单的Flex 项目创建、编码、调试以及部署的过程和Flex 编程的基本知识。通过本文的学习，您将会学习如何搭建Flex 基本的开发环境以及开发、调试和部署方面的基础知识。为您以后深入系统的学习Flex 打下良好的基础。
要学习本文，您需要有一定的Web 编程经验和Eclipse FireFox 使用经验。
代码示例和安装要求
本文所有示例均在Windows XP SP3 系统中测试完成。您需要一台能流畅运行Windows XP 系统的机器，除此之外您还需要一些工具才能试用本文中的代码。所有这些工具都可以免费下载（参见参考资源）：
Java SDK 1.5 或更高版本
Tomcat 6.0 或更高版本
Eclipse 3.3 或更高版本
Flex Builder 3.0 或更高版本
FireFox2.0 或更高版本
回页首
安装配置开发环境
接下来我们便迫不及待的开始吧！首先搭建我们的开发环境，为了减少因为环境不一致而引起的问题，建议读者使用与本文相同的软件版本：
下载并安装JDK( 本文使用版本为Sun JDK 6) ；
下载并解压Eclipse( 本文使用版本为Eclipse Ganymede J2EE 版本，含WTP 插件);
下载并安装Flex Builder Eclipse 插件版( 本文使用的Flex Builder 版本为3.0.1);
下载并安装Tomcat( 本文使用版本为Tomcat6.0.18);
下载并安装FireFox( 由于Flex3.0 和一些插件的兼容性问题，本文使用FireFox2.0.0.17) 小提示
Flex Builder 提供两个版本，一个是All in one 的版本，另外一个是Eclipse 的插件版，All in one 的版本内置了一个Eclipse 的基本核心，插件不全。所以我们采用单独下载Eclipse 和安装Flex Builder 插件版的方式。另外在安装过程中不要安装FlashPlayer 到IE 或者FireFox 上。我们在接下来的步骤中将单独安装debug 版本的Flash Player 。
大家知道Flex 代码编译后是一个SWF 文件，运行在Flash Player 中，要想看到SWF 文件在运行时输出的一些调试信息是比较困难的。所以在安装好基本的软件之后，我们要安装一些便于我们调试Flex 的FireFox 插件：
下载并安装debug 版本的FireFox Flash Player 插件( 本文使用的版本为Flash Player10)
打开FireFox，到FireFox 的扩展组件站点上搜索并安装HttpFox，FlashTracer，Cache Status 三个插件，如图1 所示。
图1：开发调试需要的FireFox 插件
小提示
在Debug 版本的Flash player 和FlashTracer 插件完成好之后，我们发现FlashTracer 并不能正常的显示用trace 语句输出的调试信息。为了使其能够工作，还需要先点击图 1 中的FlashTracer 设置按钮来设置日志文件的输出路径。并且输出的日志文件路径对于Windows XP 来说必须是C:\Documents and Settings\Administrator\Application Data\Macromedia\Flash Player\Logs\flashlog.txt 。
在安装了Debug 版本的Flash Player 之后，Flash Tracer 能显示您在程序中用trace() 语句
输出的调试信息，HttpFox 插件不仅能查看HTTP 通信的过程和数据，还能看到哪些内容是从Cache 里面读取的。另外，Cache Status 插件可以让我们方便的管理缓存。在Flex 开发过程中，往往需要先清除掉缓存中的内容，才能看到新改动的效果。
接下来我们打开Flex Builder, 在菜单Window>Preferences>Server>Runtime Environment中设置我们的Tomcat6 以及在菜单Window>Preferences>General>Web Browser中设置浏览器为外部浏览器FireFox，如图 2 和图 3 所示：
图2：配置Tomcat
图3：设置默认浏览器
到此为止，我们的开发环境算是彻底搭建完毕，可以看出这个过程并不算是特别简单。别急，先苦后甜，小憩一下，让我们来享受一下Flex 开发带来的乐趣吧！
回页首
Flex 的Hello World ！
创建项目
打开Flex Builder, 如图4 所示，新建一个Flex 项目：
图4：新建Flex 项目
在图 5 所示设置页面中，我们选择项目类型是Web application，关于AIR 类型应用的基础知识可参考developerWorks 上的另一篇文章《使用Adobe AIR 和Dojo 开发基于Ajax 的Mashup 应用》。Application server type 我们以J2EE 为例，并且不要钩选Use remote object access service, 关于这些高级内容，我们将在后续的文章中陆续讨论。最后我们使用Eclipse Ganymede J2EE 版本内置的WTP(Web Tools Platform) 来创建一个后端使用Java 前端使用Flex 的RIA项目。在默认设置下，src 是Java 代码的源代码文件夹。
图5：设置Flex 项目
在后续的设置页面中，我们配置项目运行时的J2EE server 为我们在安装配置开发环境部分中配置的Tomcat6 如图6 所示：
图6：配置运行时J2EE Server
点击Next，在下一个页面中一切都按照默认设置即可。如图7 所示，Main source folder 是设置默认的flex 代码( 包括mxml 和Action script) 的源文件夹，Main application file 是项目默认的主应用。Out folder URL 是项目运行在我们配置的Tomcat 上时的URL.
图7：其他属性设置
一切完成之后，我们来看看项目的组成结构，如图8 所示：flex_src 中是默认的flex 源码位置，flex_libs 则是存放flex 其他第三方包的默认路径。类似于web 应用的lib 文件夹。src 是java 代码位置。WebContent 文件夹的结构和普通由WTP建立的Web Project 的结构完全相同。在默认的输出路径bin-debug 文件夹中，我们可以看出Flex builder 自动生成的FlexSample.mxml 文件已经被自动编译成FlexSample.swf 文件。
图8：Flex 项目结构
接下来，我们在新创建的项目上增加一点内容并让它运行起来：双击FlexSample.mxml, 在其中添加一个最基本的Flex 组件:Label, 并且在该应用初始化的时候调用init() 方法。我们在init() 方法中用trace() 语句输出调试信息。代码如下清单 1 所示：
清单1：FlexSample.mxml
xmlns:mx="https://www.sodocs.net/doc/572466498.html,/2006/mxml" layout="absolute" initialize="init()"> private function init():void { var i:int = 0; i++; trace("i="+i); } ]]> 运行、调试以及部署 现在，终于到了让我们的项目运行的时候了! 右键点击项目->Run As->Run On Server 如图9 所示：接下来的几个页面选择默认即可，这时大家我们可以看到项目会被部署到我们配置的Tomcat6 上去。并且Flex Builder 会自动打开一个我们刚才配置的外部FireFox 窗口。 图9：运行项目 但可能令您遗憾的是Flex Builder 自动打开的FireFox 窗口打开的URL: http://localhost:8080/FlexSample/ 却什么也没有。别着急，还剩下最后一步： 如图10 所示：右键点击我们要运行的FlexSample.mxml > Run As > Flex Application 图10：运行mxml 如果不出意外的话，您应该会看到下面的界面，Flash Tracer 插件输出了我们用trace() 语句输出的debug 信息，标签的Hello World ！也被显示到了界面上。同样，打开FireFox 的HttpFox 插件，我们也可以看到在运行时FlexSample.swf 被载入。 图11：运行后的界面 如果我们希望像调试Java 代码那样，在运行时观察变量的值怎么办呢？首先我们像在Java 代码中设置断点一样给我们的Action Script 代码增加断点。如图12 所示： 图12：在Action Script 代码中设置断点 然后选择我们的FlexSample.mxml 右键选择调试运行。如图13 所示： 图13：调试方式运行flex 然后我们随提示切换到Flex 的调试视图，就会看到我们可以像Java 调试模式那样轻松的调试Flex 代码。如图14 所示： 图14：Flex Builder 调试视图 利用WTP，我们可以将项目export 成一个标准的war file. 将导出的war 文件放到Tomcat 的webapps 目录或者其他web 服务器的相应目录下就可以当作一个标准的web 应用来部署运行。 到此为止，我们应该庆祝一下我们已经迈入了Flex 的大门了！我们已经编译出了我们自己的swf 文件，并且运行在服务器上了。熟悉了这个开发过程之后，让我们乘胜前进，结合一个小例子学习一下Flex 的编程基础知识吧！ 回页首 Flex 编程基础 面向对象的编程 在上面Hello World 的例子中我们可以看出，就像在HTML 中嵌入JavaScript 那样，我们可以在mxml 里面嵌入Action Script 代码来实现业务逻辑。没错！如果您把Flex 中mxml 和Action Script 的关系理解为Html 和JavaScript 的关系，您会忽然发现您对Flex 变的如此熟悉！ Action Script 语言是面向对象的脚本语言，它连编写方式都和JavaScript 非常的相似。除了可以嵌套在mxml 里面之外，它还可以像JavaScript 写在单独的.js 文件里面那样写在单独的.as 文件里面，然后在mxml 里面引入它。 下面我们新建一个Action Script 的类J2eeServer.as 如清单2 所示： 清单2：J2eeServer.as package com.ibm.flex { import flash.events.EventDispatcher; import mx.rpc.AsyncToken; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; public class J2eeServer extends EventDispatcher { public function J2eeServer() { } public function sendRequest(locale:String):void { var httpObject:HTTPService = new HTTPService(); httpObject.resultFormat = "text"; httpObject.url = "http://localhost:8080/FlexSample/SampleServlet?locale="+locale; var responder:mx.rpc.Responder = new mx.rpc.Responder(onSuccess, onFault); var call:AsyncToken = httpObject.send(); call.addResponder(responder); } private function onSuccess(event:ResultEvent):void { this.dispatchEvent(event); } private function onFault(event:FaultEvent):void { trace("communication failed!"); this.dispatchEvent(event); } } } 在这个类定义里面，熟悉Java 的开发人员可以看出其编码规范和Java 非常类似。在其中我们定义了一个sendRequest() 方法，使用HTTPService 对象发起一个http 的get 请求, 并且对于不同的返回结果我们定义了onSuccess() 和onFault() 两个方法去处理。在这两个结果处理方法中，我们将事件dispatch 出去。 与Servlet 集成 在J2eeServer.as 中，我们通过Action Script 发出http 请求，现在我们定义一个服务器端的servlet 来处理该请求。如清单3 所示： 清单3：SampleServlet.java package com.ibm.sample; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class SampleServlet extends HttpServlet { private static final long serialV ersionUID = 1L; public SampleServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String locale = request.getParameter("locale"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("The locale you selected is " + locale); } } 和普通web 应用一样配置web.xml, 如清单 4 清单4：web.xml xmlns:xsi="https://www.sodocs.net/doc/572466498.html,/2001/XMLSchema-instance" xsi:schemaLocation="https://www.sodocs.net/doc/572466498.html,/xml/ns/j2ee https://www.sodocs.net/doc/572466498.html,/xml/ns/j2ee/web-app_2_4.xsd"> 事件驱动与数据绑定 从J2eeServer.as 中我们依稀可以看出Flex 事件驱动的影子。的确，Flex 的业务流程大多是靠事件来驱动的。某一个方法结束后，dispatch 出去一个事件。事件的监听者监听到这个事件后就会采取相应的动作来处理事件。如清单 5 所示：我们在init() 方法中进行了事件绑定，绑定了两个监听方法successHandler () 和errorHandler () 到J2eeServer 上。当J2eeServer 完成和服务器端servlet 通信dispatch 出相应的事件后，两个监听方法便会监听到相应的事件并进行处理。 Flex 的另外一个重要的特点就是支持数据绑定，在另一篇文章《使用Eclipse 和JavaFX 开发Mashup 应用》中我们曾介绍了JavaFx 的数据绑定特性，同样Flex 也支持数据绑定。 当数据源被绑定到另外一个对象的某属性上时，数据源的数据如果发生变化，开发人员不需要写额外的代码该对象的属性值就可以相应的变化。如清单 5 中所示：如果要进行数据绑定，则要先定义一个可绑定的数据源，例如我们在变量private var serverResponse:String = "" ;的上面设置[Bindable] 属性，表示其为可绑定变量。然后我们在resultLable 中使用花括号{serverResponse} 将变量serverResponse绑定到resultLable 的text 属性上。 清单5：FlexSample.mxml creationComplete="init()"> import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import com.ibm.flex.J2eeServer; import mx.collections.ArrayCollection; private var jserver:J2eeServer = new J2eeServer(); //可绑定变量 [Bindable] private var serverResponse:String = ""; //可绑定变量 [Bindable] private var locales:ArrayCollection = new ArrayCollection( [ {label:"en_us", data:"en_us"}, {label:"zh_cn", data:"zh_cn"}]); private function init():void { //事件绑定 jserver.addEventListener(ResultEvent.RESULT, successHandler); jserver.addEventListener(FaultEvent.FAULT, errorHandler); } private function localeComboxChangeHandler(event:Event):void { jserver.sendRequest(localeCombox.selectedItem.data); } private function successHandler(event:ResultEvent):void { serverResponse = event.result.toString(); trace(event.result); } private function errorHandler(event:FaultEvent):void { serverResponse = event.message.toString(); trace(event.message); } ]]> id="localeCombox" width="160" dataProvider="{locales}" change="localeComboxChangeHandler(event)"/> id="resultLabel" text="The response from server is: {serverResponse}" /> 最终项目的文件结构如图15 所示： 图15：项目文件结构图 运行项目，我们可以看到当我们改变下拉框的值的时候，会触发localeComboxChangeHandler() 函数调用J2eeServer 的sendRequest() 方法将选择的locale 值发送给服务器端的servlet，并且在结果返回后，将从服务器端得到的response 显示在resultLable 上。如图16 所示： 图16：项目运行结果 回页首 结束语 Flex 作为RIA的新技术，对传统web 开发技术有继承也有发展。这篇文作为入门文，主要作用是帮助大家掌握Flex 的开发环境、开发方式、开发调试部署的流程以及Flex 的基本编程知识。但Flex 除了国际化、Unit 测试、Ant 编译等传统问题之外，作为新技术Flex 还有很多不同以往的地方，比如模块开发，RSL(Runtime Shared Libraries), Shared object、和JavaScript 交互以及它的MVC 框架cairngorm，远程调用和消息传递框架BlazeDS 等。所有这些问题都是值得我们进行后续讨论的。 致谢 在本文完成之际，特别感谢IBM 中国软件开发中心IM 开发团队我的同事们在工作和学习中给我的巨大帮助！ 参考资料 学习 “Flex 3 Developer's Guide”：很好的Flex 基础知识入门材料。 “Flex Developer Center”：针对具体开发场景的大量示例代码和文章。 “Flex Ant Tasks”：介绍了如何结合Ant 工具来编译Flex。 “Flex RSL”：对Flex RSL开发的各方面进行详细介绍的官方文档。 “集成Flex 与Ajax 应用程序”（developerWorks，2008 年7 月）：阅读完本文后，您将能够利用通过Flash 资源获得的丰富功能。 “使用Flex SDK 实现一个Facebook 相册”（developerWorks，2008 年12 月）：在本篇教程中，将在Adobe Flex 中开发一个Facebook 应用程序，它可以以幻灯片的形式显示用户的Facebook 相册。 “Fluint 的官方站点”：Fluint 是Flex Unit Test 的框架Flex Unit 的升级版本。“Cairngorm 框架的Adobe 官方站点”：Cairngorm 是Flex 开发最著名和最成熟的一个 MVC 框架。 “BlazeDS 框架的开源站点”：BlazeDS 是Adobe 的一个开源项目。基于服务器的Java 远程调用（remoting）和Web 消息传递（messaging）技术，它能够使得后台的Java 应用程序和运行在浏览器上的Flex 应用程序或AIR 应用程序相互通信。 获得产品和技术 下载JRE 或JDK。 下载Eclipss Ganymede。 下载Flex Builder Eclipse 插件版。 下载Tomcat 6。 下载FireFox 2.0。 下载BDebug 版本的FireFox Flash Player 插件。 本文来自CSDN博客，转载请标明出处：https://www.sodocs.net/doc/572466498.html,/xinmengqc/archive/2010/05/01/5544565.aspx Flex打印问题 使用两个类解决打印问题：FlexPrintJob和PringDataGrid。 ? FlexPrintJob。这个类需要在实例化之后用作要打印对象的容器。 ? PringDataGrid。是DataGrid的一个子类，用来打印必须以网格或表格形式显示的数据，支持多页面打印。 简单的打印实例： < ?xml version="1.0" encoding="utf-8"?> < mx:Application xmlns:mx=https://www.sodocs.net/doc/572466498.html,/2006/mxml layout="absolute"> TWaver Flex数据模型 TWaverFlex的基本数据元素是twaver.IData，基本数据容器定义为twaver.DataBox，基于这两类基本元素，TWaverFlex预定义了一系列业务对象，视图网元和管理容器，例如告警（twaver.IAlarm）和告警容器（twaver.AlarmBox），图层（twaver.ILayer）与图层管理容器（https://www.sodocs.net/doc/572466498.html,yerBox），拓扑网元（twaver.IElement）和拓扑管理容器（twaver.ElementBox）...... 数据元素结构图 数据管理容器结构图 其中拓扑管理容器（twaver.ElementBox）整合了其他几种容器，提供了丰富的拓扑元素（Dummy, Node, Link, Bus, ShapeNode, ShapeLink, Follower, Rack, Shelf, Slot, Card, Port, Grid, Group, SubNetwork......），为网管界面开发提供了强大的设计模型和业务功能的基础支持。 TWaver Flex数据元素 TWaverFlex以twaver.IData为最基本的数据单元，扩展定义了一系列具有图形和业务意义的数据类型，包括IAlarm, ILayer, IElement... twaver.IData IData是TWaverFlex的数据元素基类接口，twaver.Data是对其实现类，定义了id, name, icon, toolTip, parent, children等基本属性，对事件派发做了封装，并支持xml数据的导入导出，为TWaver各平台间数据的可序列化奠定了基础。 Data继承于flash.events.EventDispatcher，这使他具有事件派发和监听的功能，可以通过调用下面的方法派发事件或者添加实现监听器： flash.events.EventDispatcher#public dispatchEvent(event:Event):Boolean flash.events.EventDispatcher#addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void Data还实现了twaver.IData接口，实现了对属性变化事件的派发和监听 function dispatchPropertyChangeEvent(property:String, oldValue:Object, newValue:Object):Boolean; function addPropertyChangeListener(listener:Function, priority:int = 0 , useWeakReference:Boolean = false):void; function removePropertyChangeListener(listener:Function):void; 此外，Data中还定义了其他功能函数 function get childrenCount():int; function get hasChildren():Boolean; function isDescendantOf(data:IData):Boolean; function isParentOf(data:IData):Boolean; function isRelatedTo(data:IData):Boolean; function toXML(context:XMLContext, newInstance:IData):void; function parseXML(context:XMLContext, xml:XML):void; function setPropertyValue(property:String, value:Object):void; function getPropertyValue(property:String):Object; 下面分别介绍各个实现类 twaver.ILayer Flex 4 读取xml文件，xml文件的格式： 1.as2与as3.的最主要区别是什么? 答：首先，as2和as3是完全不同的语言，几乎没有兼容性可言。as2编译用的AVM1虚拟机，as3用的AVM2，速度快，提供了一些基础异常处理。 as3是纯的OOP，强类型语言。as2不是。具体的差别有太多太多。 2.flex的开发框架有哪些，它们有什么优缺点？ 答：最常见的当然是Cairngorm、Puremvc了，此外还有Mate，Swiz等等，据说被广泛应用的已经有10几款了。Cairngorm作为Adobe官方出品，有着贵族血统的它比较全面，是这些框架中已知bug最少的，但是基于他的应用相对臃肿复杂一些，需要对每个可以被触发的事件写一个对应的Command，编码量巨大，并且单元测试很不容易，不适合敏捷开发。Puremvc应该是现在用的最多的as 框架了。比较完善、并且与Cairngorm相比，更适合中小型应用的开发，它与Cairngorm一样，也是以MVC模式为中心，并以Fa?ade作为中央存储器的单件类的形式进行开发的。说下Mate，它是一个比较奇怪的框架，是基于标签的事件驱动型的。也就是说你不能再随意的写as类的，在使用Mate的情况下，只能用MXML来做这些事情。Swiz是Mate的孪生兄弟，长的挺像，没具体用过，不大了解。 3.在flex开发中，很多代码都写在mxml文件里，为了做到mvc模式，你是怎么处理的。 我认为mxml并不影响mvc模式啊。分两种情况来讨论，首先，是自己创建整个应用结构的时候，那我们可以手动将UI所在的mxml归为一类，然后由Mediator去操作或者说控制这些组件既可了，然后Mediator又统一交给Controller去操作。如果采用其他框架来进行开发的话，那就更不用来考虑这个问题了，像Cairngorm、Puremvc之类的框架已经很好的为我们解决了这些问题。只要按照它们的使用规范来进行开发，自然没有问题。 4.如果发生内存泄露，你是如何解决的？ 在profile观察中已经内存泄漏是没有很好的解决办法的，至少我不知道，我能做的只是尽量去避免这种情况的发生，比如说注意不要循环引用，特别是在使用Timer的时候要格外注意，不要忘记全局对象上的引用的清除，在创建控制器和模型的时候要注意一定要使用单件模式。在addEventListener时候尽量采用弱引用、自引用、或者子对象引用，以避免内存泄漏。 5。as3.0垃圾回收器是如何工作的？ flash player 8之前采用的是引用计数法，在flash player 8 之后用的是标记法，简单的说就是：从应用的根节点开始，遍历所有其上的引用，标记每个它所发现的 对象。然后迭代遍历每个被标记的对象，标记它们的子对象。这个过程第归进行，直到Player遍历了应用的整个对象树并标记了它所发现的每个东西。在这个过 JFLEX词法分析 安装与配置 1.下载jflex-1.4.3.zip,解压缩到本地目录（c:/jflex）。 2.找到jflex\bin\jflex.bat文件,配置JAVA HOME和JFLEX HOME 3.把x:\jflex\bin写入系统环境变量path中 运行 可视化方式 直接运行jflex\bin\jflex.bat文件，打开可视化界面操作即可。 命令行方式 配置 把x:\jflex\bin以及x:\jflex\lib\ JFlex.jar配置到系统环境变量的CLASSPATH中。 格式 java JFlex.Main 文件才能使用此命令。 --nomin 在扫描器生成的过程中，跳过DFA简化步骤。 --jlex 完全兼容jlex --dot 为NFA, DFA and minimised DFA生成扩展名为.dot的graphviz图型文件。该参数还在最初阶段，尚未完全实现。 --dump 在控制台显示NFA转换表，初始DFA和最简DFA。 --verbose or –v 显示生成过程信息。 --quiet or –q 仅显示生成错误信息 --time 显示代码生成耗时信息（不十分精确） --version 打印JFLex版本号 Flex 快速入门 无衣 摘自https://www.sodocs.net/doc/572466498.html,/cn/ (版权归原作者所有) Flex 快速入门: 使用 MXML 和 ActionScript 进行编码 Adobe? 将 Flex 实施为 ActionScript 类库。 该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。 您通过将 MXML 和 ActionScript 语言与该类库一起使用 来开发应用程序。 MXML MXML 是用于为 Adobe? Flex? 应用程序进行用户界面组件布局的 XML 语言。 您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。 例如, 您通过使用下面的 MXML 语句, 使用 Flex开发规范 开发规范对可以使用项目中所有的文件进行统一，增加可读性，减少错误出现的几率。规范的编码减少人员变动带来的维护成本，可以让程序员尽快而彻底的理解新的代码。 为了方便维护，特定flex开发规范，每个人必须执行。 1.总体要求 所有As功能代码部分，每个方法需要有相应的注释。核心功能代码要求每个处理都要有注释。注释内容包括：方法功能用途，编写人，时间。 所有标签代码，需进行代码格式化。（myeclipse中的格式化）。 对于后期修改的代码，要注明为后期修改，并写明具体修改时间，修改人。 项目开发必须严格按照开发规范进行编写。 2.命名规则 2.1.项目结构及文件夹命名规则 文件夹命名需小写。除特殊运用框架的工程之外，项目中的文件目录结构应为： com >>assets 图片文件夹 >>common 常用组件文件夹 >>styles 样式文件夹 >>configs 配置文件夹 >>其他业务文件夹 2.2.类命名规则 类命名首字母需大写，取名需按照业务功能的字面意思进行取名。例如LoginPage。所有弹出页面均要加上XXXPop后缀。 2.3.配置文件命名规则 所有配置文件需按字面意思进行命名，首字母大写。例如MapConfig.xml。若文件是某个类专用读取属性于地址目录的配置文件，则要与该类同名。例如HireLine.mxml与HireLine.xml。 2.4.方法命名 除构造方法外，一般方法首字母需小写，后采用驼峰式命名方法，方法命名需体现方法功能。禁止方法名超长。标准应为如下：onMapClick():void, querryCarInfo():void， 2.5.类变量命名 变量命名需简短，明意。首字母需小写，并采用驼峰式命名方法。对于特定关键代码的变量命名后缀需与参照其类型名。例如集合与数组：messageArr。Object类为：infoObj。事件为：clickEvt。字符串为：querryStr等。 2.6.临时变量命名 尽量不与类变量同名，命名方法参照类变量，循环体内的自增变量需采用I,j,k,m,n，也可写成index。对于引用自定义类的变量，命名取该类型的缩写或取其名称的一部分。例如自定义类为CarInfoSearchPop，则变量名为cisp或carpop。 2.7.Bean命名 采用驼峰命名方法，命名需体现业务意思，以Bean结尾，例如：CarInfoBean。 2.8.Remote方法命名 Remote方法命名需与Java端方法同名。 2.9.标签命名 标签的命名所有字母都需大写 3.注释 3.1.类注释 因类包含mxml与纯class，所以均在script中进行注释。因项目中类较多，因此注释可简化为以下项： /** Flex入门教程 编写日期：2009-02 作者：Dason 主要讲3个主题: 1.Flex是什么，用途和前景； 2.Flex Builder基础； 3.MXML基础； 现在进入第1个主题： 首先我们要明白，flex不是专门用来做网页的，它主要是用来做RIAs的 RIAs=Rich Internet Applications 富英特网应用程序 Flex现在虽然是2.0，以前是1.0和1.5，但是不要担心1.0和1.5版本自己没有用过，因为2.0版本才是Flex真正的开始，首先，Flex2.0的技术基础很高，采用Action Script3.0为编程核心，以FlashPlayer9.0为平台 它与以前版本的区别是 FlashPlayer9.0采用全新的虚拟机,运行速度是8.0的10倍以上 Flash8.0和Flex1.0,1.5，都是Action Script2.0用的FlashPlayer8.0，在性能上，跟Flex2.0的Action Script3.0和FlashPlayer9.0相差太远了 我们现在处于RIAs浏览器时代，意思是，我们用Flex做的程序，必须要用浏览器打开，以网页的形式发布，明年，我们将步入下一个RIAs时代――桌面RIAs时代，我们现在所有用flex2.0做的程序,明年都可以被重新发布成桌面应用程序，就跟我们现在用的软件是一样了，到时候,我们的程序不再被浏览器限制了，flex能做的程序很多，比如QQ这样的即时聊天软件、论坛、股票软件、网络视频聊天、等等。你能想到的基本都能做出来，Flex的前景是一片明朗的，而且越往后越会被广泛采用，这一切都从Flex2.0开始，所以，对于我们来说，这是个前所未有的好机会。现在学flex的人很少很少，如果你等到他已经大面积普及,那就没有竞争力了。 好，现在提问时间，马上要进入下一主题： Flex是纯面向对象语言，C是面向过程语言，ActionScript3.0相对2.0,改动太大了，如果有2.0基础,对3.0帮助不大，所以，如果你第一次接触的就是3.0，也不要紧，3.0删除了很多2.0的东西，而且增加了很多新类，3.0跟JAVA基本没什么区别了，所以，有JAVA基础的人，学起来更快。 AS3的语法跟JAVA一样，有库、包、类、接口这些概念，两者的本质区别是java可以做软件，但局限性很大，比如java界面很差，很多功能比较古老等等 今天第2个主题――Flex Builder2基础 １、打开Flex Builder2 Ａ．新建Flex Project－ FLEX 中文手册 这是flex手册的部分中文翻译，仅供参考 ?一些简单的例子 ?输入文件的格式 ?模式 ?如何匹配输入 ?动作 ?生成的扫描器 ?开始条件 ?文件结尾规则 ?与yacc一起使用 一些简单的例子 首先给出一些简单的例子，来了解一下如何使用flex。下面的flex输入所定义的扫描器，用来将所有的“ username”字符串替换为用户的登陆名字： %% username printf("%s", getlogin()); 默认情况下，flex扫描器无法匹配的所有文本将被复制到输出，所以该扫描器的实际效果是将输入文件 复制到输出，并对每一个“username”进行展开。在这个例子中，只有一个规则。“username”是模式 （pattern），“printf”是动作（action）。“%%”标志着规则的开始。 这里是另一个简单的例子： int num_lines = 0, num_chars = 0; %% \n ++num_lines; ++num_chars; . ++num_chars; %% int main(void) { yylex(); printf("# of lines = %d, # of chars = %d\n", num_lines, num_chars); } 该扫描器计算输入的字符个数和行数（除了最后的计数报告，并未产生其它输出）。第一行声明了两 个全局变量，“num_lines”和“num_chars”，可以在yylex()函数中和第二个“%%”后面声明的main()函数中 使用。有两个规则，一个是匹配换行符（“\n”）并增加行数和字符数，另一个是匹配所有不是换行符的 其它字符（由正规表达式“.”表示）。 一个稍微复杂点的例子： /* scanner for a toy Pascal-like language */ %{ /* need this for the call to atof() below */ #include Jquery flexigrid使用 相关技术：struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql 主要的js文件：jquery.js,flexigrid.js,query.js,thickbox.js,util.js 其中： util.js是扩展flexigrid的功能，如条件查询用到的getQuery属性。query.js是自定义的flexigrid界面显示和函数触发文件。 Jar包： 使用过程： Struts2 jar只能用 2.1.6,web.xml中配置： Jsp页面： 引入jquery、flexigrid插件文件以及test.js，body中编写： FLEX学习心得 1,开发webgame你所要具备的 一、数据结构、设计模式、框架应用、良好的OO思想。 二、对socket/amf/remoting/shareobject/webservice等了解 三、各开源库(PV3d,Box2d等），但一般做策略型webgame不太需要，策略型webgame关注的是第一点 如果想做做小游戏，可看 make thing move之后看AdvancED_ActionScript 3.0 2,基于socket连接的安全沙箱问题的处理 https://www.sodocs.net/doc/572466498.html,/xuxiangwin/archive/2009/07/07/4324218.aspx 大概就这个，但是我这里始终不行，有待后续补充 补充：https://www.sodocs.net/doc/572466498.html,/club/thread-6471-1-5.html 3,FLEX解析XML的2种方式。有表情 https://www.sodocs.net/doc/572466498.html,/blog/381820 4,FLEX控件样式和控件的使用 1）.不知道控件有什么样式设置？看它：https://www.sodocs.net/doc/572466498.html,/flex3/consulting/styleexpl orer/Flex3StyleExplorer.html 2）.有控件不知道怎么用？看它：https://www.sodocs.net/doc/572466498.html,/flex3/componentexplorer/explorer. html 5，FLEX中文例子 https://www.sodocs.net/doc/572466498.html,/ 6，AIR的创建发布安装教程 https://www.sodocs.net/doc/572466498.html,/AIR/thread-2727-1-1.aspx 7，Adobe AIR 迷你教程-- 监测网络状态，离线/在线应用程序的实现 https://www.sodocs.net/doc/572466498.html,/Share/thread-2731-1-1.aspx 8，FLEX 45°视角游戏地图编辑器 https://www.sodocs.net/doc/572466498.html,/club/thread-3334-1-1.html 9，RGP游戏基础45地图寻路和地图切换完整例子 https://www.sodocs.net/doc/572466498.html,/club/viewthread.php?tid=2286&page=1#pid6532 Nature Made 天然制造 Nature Made TripleFlex Triple Flex 三倍维骨力关节宝 GLUCOSAMINE 氨基葡萄糖；氨糖1500 毫克 CHONDROITIN 软骨素；软骨胶800毫克 MSM 二甲基砜750毫克 【品牌】Nature Made?Triple Strength TripleFlex三倍维骨力 美国顶级保健品制造商，产品100%纯天然，优良质量深得美国人青睐，更是各大医院医师和药店药剂师得推荐产品。 成立1971年，获得多项专利和荣誉，研究力量雄厚。 具备GMP（优良制造实践）认证生产，USP（美国药典）药品级质量。 【产品规格】 Nature Made TripleFlex三倍强效氨基葡萄糖维骨力+软骨素复合配方 +MSM1500mg150粒 【产品特点】 Nature Made TripleFlex联合三种有效成分增强关节润滑和弹性。有效减轻关节疼痛、肿胀，增强关节活动功能，使您的关节更舒适更年轻。 盐酸氨基葡萄糖可帮助修复软骨、维持关节内结缔组织结构的正常。其作用包括：促进关节液分泌、加速软骨组织再生和修复、强化韧带和肌腱、减轻滑?ぱ字ⅰ? 本品是赠送老年人、骨关节炎患者、关节软骨伤患者、骨折患者的佳品！ 【适应症】 适用于治疗和预防全身所有部位的骨关节炎，包括膝关节、肩关节、髋关节、手腕关节、颈及脊椎关节和踝关节等。可缓解和消除骨关节炎的疼痛、肿胀等症状。改善关节活动功能。 【产品成分】 每2粒含： 钠 70毫克Sodium 盐酸氨基葡萄糖 1500毫克(Glucosamine Hydrochloride) 硫酸软骨素+水杨苷(白柳树皮提取物)复合配方 800毫克 (Chondroitin Sulfate,White Willow Bark Extract (Salicin) Salix alba) MSM 750毫克(Methylsulfonylmethane) 【用法用量】 每日2粒，随餐服用。共75天用量。 【氨基葡萄糖介绍】 氨基葡萄糖（Glucosamine）的作用： 氨基葡萄糖（Glucosamine）是一种人体用来制造粘多糖的氨基酸组合分子结构。氨基葡萄糖集中于关节软骨处，首先形成长链氨基酸粘多糖，然后形成更大的结构——蛋白聚糖。蛋白聚糖的作用是吸收水分和液体到关节处用来在运动时润滑软骨。 flex4 mxml文件就是.MXML的xml文件 actionscript文件.as 编写代码 编译成swf文件 flex4 应用程序需要使用flash builder4的软件来创建 flash catalyst 事件 数据绑定 1、基础知识介绍 1.1、了解fl ex和flash平台 开发工具—flash builder 开源框架---flex 内嵌组件 扩展组件 语言---ActionScript3.0类库（符合ECMA标准的脚本语言，主要用来实现业务逻辑）语言---MXML（基于XML的描述式语言，主要用来描述UI布局的） Flex SDK Flex框架 软件开发包 ---编译器 ---调试器 Flash Builer开发工具 Flex SDK所有的功能 提供一些额外的特性提高生产力 ---上下文的代码提示 ---一个可交互的逐步调试器 ---一个可视化的设计环境（布局和样式） ---连接到服务器端数据的数据服务向导 ---内存和性能检测 ---自动测试支持及更多的特性 Flash Builder版本： ---标准版 ---增强版：致力用创建关键业务应用，包含了标准版所有特性，并添加了一些企业及的特性在里面，包括内存和性能检测以及自动测试。增强版的数据可视化支持你创建图表和丰富的可视化面板。 1.2、了解flash Bulid er 和flex项目 默认的工作空间位于：Document and settings→user directory→adobe flash builer beta2 .metadata和configuration目录包含了flash builder工作空间的设置。 默认情况下，flash builder会把我的flex应用程序编译到我的项目文件夹下面的一个名为“bin-debug”的目录下。源文件将会保存在项目目录中的“src”目录下。 组件设置： MX+Spark（同时使用两个库） MX only(这个mx库比较老) 修改编辑器中的字体大小： General→Appearance→Colors and fonts→basic→text font 改变代码间距： Flash builder→indentation→actionscript.并且取消方法中的对齐参数。 在MXML中，也取消参数对齐。 1.3、了解命名空间 MXML： 第一行：xml声明，不能包含在任务支付之前，甚至空白。 在MXML文件中的下一个元素是一个Application的MXML标签块，这是所有的MXML应用程序所必需的标签。 Application前三个属性定义三个XML命名空间来引用Flex框架MXML标签集：fx，s和MX. 你可以认为是作为Flex框架类库不同的命名空间作用在不同的领域。 Application标签中的命名空间声明的是什么，实际上就是引用不同的Flex框架库而专门进行的命名空间声明。 命名空间fx代表MXML语言要素和Flex4中编译器指令。 命名空间s是包含Flex4中所有新的Spark可视化组件。 命名空间mx作为Flex3 Halo组件库的代表，也是已知的mx库。 命名空间映射到清单文件中所有的MXML标签都属于的命名空间的一部分。 在flex安装目录中→sdks→4.0.0→frameworks→flex-config.xml文件。flex-config.xml文件具有一个内置的xml解析器。 里面有3对统一资源标识符(URI)分别对应在Application中定义的标签。 这里还有一个额外的命名空间中定义的Flex框架。 2006年halo的定义是为了向后兼容。 Flex 学习入门 Flex+BlazeDS整合j2ee开发环境的配置过程： 第一步：下载Flex 配置文件以及Flex需要的jar包 https://www.sodocs.net/doc/572466498.html,/wiki/display/blazeds/BlazeDS/ 如图1.0所示： 图 1.0下载flex 配置文件和flex jar包点击Download BlazeDS now 进入下一步：如图1.1 继续点击Download BlazeDS 3.x branch Nightly builds进入下一步：如图1.2 图 1.2 下载flex配置文件和flex jar包 第二步：新建一个Web Project工程，工程名为：flexDemo、修改Web root folder：WebRoot -> web. 第三步：解压刚下载的blazeds-bin-3.2.0.3978.zip ，解压后有一个blazeds.war的文件，把blazeds.war的后缀名重命名为.rar，结果变成rar文件：blazeds.rar，将blazeds.rar再次解压：此时就有两个文件夹META-INF和WEB-INF, 用解压后的WEB-INF直接覆盖项目中的WEB-INF。 第四步：在flexDemo/src目录下新建helloWord类：如图1.3 所示 图 1.3 新建java Class HelloWorld.java package com.kpsoft.flexDemo; public class HelloWorld { public String getHelloWorld(String name) { return "Hello World!"+name; } } 第五步：部署flexDemo到Tomcat服务器中。 Flex 开发入门 级别： 初级 刘 庆 (qlcdl@https://www.sodocs.net/doc/572466498.html, ), 软件工程师, IBM 软件开发中心 2009 年 1 月 07 日 本文介绍 Flex 开发的基础知识：包括如何搭建开发环境，如何调试，以及如何 建立和部署简单的 Flex 项目。通过本文的学习，可以为您将来深入地学习 Flex 打下良好的基础。 开始之前 Flex 作为富 Internet 应用（RIA ）时代的新技术代表，自从 2007 年 Adobe 公司将其开源以来，Flex 就以前所未有的速度在成长。很多公司，包括 IBM 都纷纷加入了 Flex 开发的阵营当中。很多开发人员也按捺不住 Flex 的“诱惑”而准备从事 Flex 开发。本文主要讲述 Flex 开发的基础知识，主要是关于开发环境的搭建，以及介绍简单的 Flex 项目创建、编码、调试以及部署的过程和 Flex 编 程的基本知识。通过本文的学习，您将会学习如何搭建 Flex 基本的开发环境以及开发、调试和部署方面的基础知识。为您以后深入系统的学习 Flex 打下良好的基础。 要学习本文，您需要有一定的 Web 编程经验和 Eclipse FireFox 使用经验。 代码示例和安装要求 本文所有示例均在 Windows XP SP3 系统中测试完成。您需要一台能流畅运行 Windows XP 系统的机器，除此之外您还需要一些工具才能试用本文中的代码。所有这些工具都可以免费下载（参见 参考资源）： ? Java SDK 1.5 或更高版本 ? Tomcat 6.0 或更高版本 ? Eclipse 3.3 或更高版本 ? Flex Builder 3.0 或更高版本 ? FireFox2.0 或更高版本 安装配置开发环境 文档选项 打印本页 将此页作为电子邮件发送 未显示需要 JavaScript 的文档选项 回页首 Flex常见问题及解决办法 杨永耀,陈兵 北京北科博研科技有限公司 摘要：本文主要对Flex运用过程中几个常见问题的现象和解决办法进行说明，常见问题包括 1: Flex与ExtJs交互，切换tabpanel时导致事件和方法丢失 2: Flex嵌入切换到HTML中焦点不能输入中文 3: Flex数据异步加载和FLEX本身加载顺序控制 4: Flex嵌入到HTML中遮盖DIV的问题 关键词：Flex,ExtJs,事件丢失,中文输入,遮盖,异步加载 1.Flex与ExtJs交互，切换tabpanel时事件和方法丢失 我的flex封装文件是嵌入在extjs的tabpanel的一个tab中，当第一次打开该页面的时候，可以调用到ExternalInterface注册的方法，如果我切换到其他的tab然后再回到该页面，那么注册的方法就为null了。 也就是说操作完flex的东西，再切换tab后，flex中注册过的方法和监听事件都丢失了。 另外如果在多个页签中有多个tabpanel时，各个页签中的FLEX对象会出现互相卡死现象。 解决方法1： 重新注册flex中的方法和监听事件 解决方法2： 如果你点击flex里的内容怎么切换都没问题，只要操作过flex中的内容，在做tab切换，就会发现注册过的方法和监听事件都丢失了。 在切换tab前，可以把焦点从flex中移走，比如 contentTabPanel.on("beforetabchange",function(tabPanel,tab){ document.body.focus(); }) 2.Flex嵌入切换到HTML中焦点不能输入中文 当焦点置于Flash后再切换到HTML元素中如HTML的INPUT输入框中，不管怎么切换我们的输入法，中文就是出不来。其实这算是Flash的一个BUG。 通过翻阅了FlexAPI相关函数时，发现flash.system.Capabilities参数组。 flash.system.Capabilities中有个是查看系统的输入法Capabilities.hasIME：[只读] 指定系统是否安装了输入法编辑器(IME)，如果是，则为true，否则为false。服务器字符串为IME。 当我们焦点进入到Flash时我们的IME.enabled属性直接被Flash禁用,IME.enabled值变为false 这也就是当我们为什么焦点放在HTML的元素中,无论如何切换输入法就是不管用的原因。 首先对Flash主程序进行事件监听用到这个事件MouseEvent.ROLL_OUT： 用户将指针设备从InteractiveObject实例上移开时分派。事件目标是指先前在指针设备下的对象或该对象的父级。relatedObject是将指针设备向其移动的对象。在该对象的父级链以上连续分派rollOut事件，以该对象为开头，并以除relatedObject的根或始祖之外的最高级别的父级结束。 rollOut事件的目的是简化带有子级的显示对象容器的移开行为的编码。当鼠标离开显示对象区域或任何其子级区域并转到除其子级以外的对象时，显示对象分派rollOut事件。这是与mouseOut事件行为不同的行为，因为该事件是在每次鼠标离开显示对象容器的任何子对象区域时才会被分派，即使鼠标仍保留在显示对象容器的另一个子对象上也是如此。 当光标离开Flash时手动设置输入法开启代码如下 appGroup.addEventListener(MouseEvent.ROLL_OUT, setSRF); /** * 当光标离开Flash时开启设置系统的输入法 * */ private function setSRF(event:MouseEvent):void{ if(Capabilities.hasIME){ //安装了输入法编辑器 try{ if(!IME.enabled){ IME.enabled=true; } IME.conversionMode="CHINESE"; }catch(error:Error){Flex打印问题
Flex与Twaver资料
flex4.0标签
Flex3.0面试题
JFLex用户手册中文版
Flex快速入门
flex开发规范文档
Flex完全自学入门手册
词法分析器flex中文手册
Flex教程
在js文件中使用flexigrid创建页面: $(document).ready( function() { $("#grid").flexigrid( { // url :'jsp/query/json.json', url : 'getPaginationAction.action', dataType :'json', colModel : [ { display :'编号', name :'id', width :60, sortable :true, align :'center' }, { display :'姓', name :'firstname', width :120, sortable :true, align :'left' }, { display :'名', name :'lastname', width :120, sortable :true, align :'left' }, { display :'操作', name :'opt', width :120, sortable :true, align :'left', process :operate } ], searchitems : [ {
FLEX学习心得
最新Nature Made TripleFlex Triple Flex 中文说明书资料
flex4基础
flex和j2ee整合
Flex 开发入门
Flex常见问题及解决办法