flex入门完全教程_图文

2023年6月21日发(作者：)

flex教程前言Flash视频来自•••H.264vsOn2VP6H.264MPEGAVCVideoCodeccomparisonFlashVideo比特率估算ActionScript3.0•FlashCS3中文帮助ActionScript3.0API来源•AdobeAPIscorelib,mappr,flickr,:///wiki//ActionScript_3:resources:apis:libraries••APE(ActionscriptPhysicsEngine)/ape/as3awss3libActionScript3.0libraryforinteractingwithAmazonS3/p/as3awss3lib/•as3soundeditorlibActionscript3.0libraryforsoundediting/p/as3soundeditorlib/•as3dsAS3DataStructuresForGameDevelopers/p/as3ds/••ASCOLLADA/p/ascollada/As3CryptoActionScript3CryptographyLibrary/•asinmotionAnimationLibraryforAS3/p/asinmotion/•Aswing一套国人所写的as组件框架/•••Away3d/p/away3d/ebayAPI/p/as3ebaylib/facebook-as3AS3APItoaccessFacebook’sPlatformAPI/p/facebook-as3/•flestFlestFrameworkforAdobeFlexandActionScript3Applications/p/flest/•FZipActionscript3classlibrarytoloadstandardZIParchivesandextract/:///lab/fzip/•ervices/p/lastfm-as3/••MapQuest/mqbs/cheye-as3-librariesAsetofActionScript3Libraries,:///p/mecheye-as3-libraries/••Papervision3D/p/papervision3d/bjectwithyourownsamples/••SalesforceFlexToolkit//Flex_ToolkitTweenerFullfeaturedanimationlibrary/p/tweener/••TwitterAS3API/blog/2006/10/components-as3LightweightAS3UIcomponentlibrary/p/uicomponents-as3/•XIFFXMPPclientlibrary/svn/repos/xiff/branches/xiff_as3_flexlib_beta1/••YahooAS3APIs/flash/as3_api_exMDI是一个可以让你在Flex中轻松创建多窗口（MDI）的一个框架，提供了很多功能，包括拖拽，最大化，最小化，各种效果等。来自项目主页在线示例flexmdi：从简单的MDICanvas开始MDIManager介绍flexmdi中的效果更多信息••••••LayoutclassforFlashCS3FlareVisualizationToolkitFlare是一个用来做DataVisualization的AS3类库，可以用来实现图表，动画效果等Sandy另一个ActionScript3D引擎，有ActionScript2/3版本Adobe官方开源站点Yahoomaps的AS3组件GraffitiLibrary-ActionScript3BitmapDrawingLibraryGraffiti是一个AS3库，可以让你方便地在Flex/Flash/AIR中使用画图功能。ActionScript1.0/2.0••••AS2LibiaryFlashprototypefunctionsDownloadallprototypefunctionsinPDFformatActionScriptClassAS2toAS3ActionScript编辑器•FDTFDT是FlashDevelopmentTool的简称，是非常优秀的ActionScript编辑器。它不是一个独立软件，而是Eclipse的一个插件。它支持高级的代码自动完成功能，具有强大的实时错误检测和除错功能，可以导入Flash的帮助文件，实现同Flash一样方便的帮助信息等等。功能强大，但不是免费的。••SEPYActionScriptEditor强大的开源AS编辑器，不过启动比较慢，有些不稳定。FlashDevelop小巧免费的AS编辑器，基于.NET开发，启动快速。FlexExplorer来自••••••••••••Flex3beta2ComponentExplorerFelx2ComponentExplorerStyleExplorerStyleExplorerwithKulerImportTranstions&EffectsExplorerChartingExplorerPrimitiveExplorerFilterExplorerStyleCreatorResizeManagerExplorerEnhancedButtonSkinExplorerKulerFlex开发框架•••••••••••CairngormPureMVCARPMVCSFlestModel-Glue:FlexServerBoxFoundryGuasaxSlideLukeBayesAliMills扩展（组件）••BITComponentSet商业组件$99XP3ProfessionalComponentSuite商业组件$349•••••••mCOM(GLIC)商业全套$399简化版$99(仅包含Button、TextInput和ComboBox)GhostWireComponents商业组件全套(共7套)$279每套$79EnFlash开源免费SMXComponentsSet开源免费ActionStep开源免费AsWing开源免费FlotoolsFMScomponent基于ActionScript1.0开发。除了几个类似于FMS自带的组件外，还提供了ChatAdministrator、RoomListManager、PrivateChatAdmin等管理用组件，看介绍功能还是很强大的。•XMCA組件（本组件的信息及其介绍来源于凱爾的布拉格廣場）XMCA組件提供了許多非常不錯的組件,並且在Skin的設計上提供了較方便的製作方式,他提供了Align組件,Title組件,ScrollBar組件,ImageContainer組件,Menu組件,TextEditor組件都非常的討喜…•（本组件的信息及其介绍来源于凱爾的布拉格廣場）這個網站也提供了LightweightScrollbar和LightweightSlider組件,也是很方便的供使用者變更樣式•CheckBoxTree带有checkBox的Tree组件，Demo提供了以Object和XML两种数据提供形式这里是源码！解密•••••加密硕思闪客精灵ActionScriptViewerFlasmLiatroSWFDecoderimperator•Flashincrypt••加壳SWOB基于Flasm的混淆器。SwfEncrypt•••mprojectorswfKitswfkit打包方面的一些问题可以看这里ZINC视频和FLV••••FLVMetaDataInjectorRivaFLVEncoderFLVtool2VHScreenCaptureDriver免费的抓屏驱动，可以配合FlashCommunicationServer实现屏幕共享服务器软件••Red5可以用来替代FlashCommunicationServerTightVNC并非Flash专用，提供远程控制服务参见FlashVNC•vnc2swf将VNC的内容保存成SWF开发••••FlashTextEditor一个基于Flash的在线编辑器，内建文件器，非常有趣和强大。但对中文支持不够好。FlashTextFormatter基于Flash的语法着色器，支持ActionScript、PHP、JavaScript和Python语法swfmillswf2xml和xml2swfmtasc编译为swf•SWFObject（原名FlashObject）将swf嵌入到网页中的JavaScript脚本SWFObject的用法基于SWFObject的Flash发布模版•Flam反编译swf成字节码（bytecode），将修改的字节码再编译成swf。理论上可以反编译任何加密方式的swf。•应用Xray(FlashDebugger)•FlashTextAreaFlashRemoting••••，开源amfphpFlashRemotingforPHP，开源OpenAMFJAVAFlashRsdirectlyintoyourcontrollerswithrender:amf.•weborb包含.NET、JAVA、PHP和RubyonRails版本的Remoting第一章Flex是如何工作的该部分文档的内容是为用户提供关于Adobe®Flex工作机制的一个快速综述。通过本章节的学习，你可以创建你的第一个Flex应用程序，并将它与你以前所熟悉的Web开发技术进行比较，以领会Flex的内涵和精髓。第一节构建并运行Flex应用程序Flex是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用Adobe®Flash®Player9作为前台的“富客户端互联网应用程序/richInternetapplications/RIA”，以满足用户更为直观和极具交互性的在线体验。开发Flex应用程序的典型步骤如下（通常是这样）：1.选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）2.布置组件以设计用户界面。3.使用样式和主题来增强视觉方面的设计。4.添加动态行为（例如程序部件之间的相互作用）。5.定义并连接所需的数据库服务。6.将源代码编译成SWF文件，然后在FlashPlayer中运行。一个典型的Flex应用程序包括如下元素：ameworkAdobe®Flex2framework包含了创建RIA所需要的所有组件，它们是：用于应用程序布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式。Flexframework被包含在公用组件库（SWC）文件中。每个Flex应用程序至少包含有一个MXML文件，它被作为该程序的主文件。MXML是一种标记语言，它是基于XML的一种实现，用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。Script3.0你可以使用ActionScript3.0为应用程序添加动态行为，它是基于ECMAScript的一种实现，类似于JavaScript。你可以将ActionScript作为一个脚本块，在MXML文件中直接进行添加；或者创建一个单独的ActionScript文件，然后将它们导入到MXML文件中。你可以通过设置组件的属性（properties）来改变组件（按钮、列表框等）的视觉样式。例如，按钮组件有一个fontFamily属性，你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制：通过主题(theme)；在CSS文件中进行定义；在MXML文件中的样式块中进行定义；在组件的实例中进行设置。5.图形资源与很多应用程序一样，Flex包含了各种各样的图形资源，如图标和图象。6.数据一些组件被使用来进行数据显示（combobox或者datagrid）的工作。同时，你还可以使用各种方式来将这些组件与数据联系起来，如使用数组、收集对象、数据模型、以及外部XML数据资源，等等。Flex应用程序是如何编译和发布的：所有的元素都被编译或连接到你的Flex应用程序中，就象下图所示：Flex应用程序被编译成一个SWF文件，然后在FlashPlayer下运行。当一个源代码被编译时，它就被转换成ActionScript类（译者注：这正是Flex精髓的地方之一，即提供从MXML到ActionScript的转换），并与图形和其它资源合并到SWF文件里。在运行时，SWF文件与所需的外部库、服务和数据源进行交互。一般的Flex应用程序并不需要服务器端所提供的支持。因此，你可以在你的本地计算机上编译它们，然后在Web服务的HTML页面中发布给你的用户。当然，你还可以将Flex与Adobe®FlexDataServices2、ColdFusionFlashRemotingService、或者其它Java和J2EEService服务器技术结合起来，进行B/S结构的网络应用程序的开发。MXML：一切开始的地方你可以在MXML中使用Flex所提供的组件来定义用户界面。这里有一个主MXML程序文件的例子：如果你对XML已经很熟悉了，就能一眼识别出这个例子的格式。MXML代码的头两行包含了版本号、编码、以及命名空间的信息，文档的主体包含的是程序的具体内容。Flex应用程序所有的具体内容都被放在标签对中。同时，你还可以在父标签对中嵌套其它的子标签对（译者注：反正标签是成对出现的，这点一定要记住）。该例子创建了一个简单的程序，它在屏幕上显示“SayhellotoFlex！”的文字。在该程序中，声明了TextArea和Button组件，并设置了它们相应的text和label属性。备注：在MXML文件中的每个标签都有前缀mx，它是Flex的设计命名空间。程序被编译后运行，如下图所示：第二节连接数据请记住，在Flex应用程序中对数据的操作最重要的事情是：Flex应用程序并不直接与一个数据库进行连接。因此，Adobe®FlexBuilder2没有提供直接连接数据的工具。你可以通过使用MXML和ActionScript代码来操作和管理数据。在Flex中，你可以使用几种方法去操纵和管理数据，它们大多数相关的内容已经超出了在这里进行简要介绍的范围（更多的信息，请查看后面的章节）。不管怎样，请想象一种可以连接外部数据的方法，随后的例子将演示与XML结构的数据进行连接。数据的生成因为Flex应用程序并不直接与一个数据库进行连接，所以你需要使用某种类型的服务来支持对数据的使用。在随后的例子中，将使用HTTPService组件从PHP所产生的一个XML文件中获取数据。连接数据库的第一步是生成将在Flex程序中使用到的数据。在与PHP的应用中，你将采用如下的步骤：1.创建一个数据库（如MySQL）。2.编写一个PHP脚本连接MySQL数据库并生成XML格式的数据。这些步骤同样适合于在其它工作平台上生成的数据（如、JSP等）。连接外部数据源对于PHP所生成的XML格式数据，你可以使用HTTPService组件来请求获取数据，就象这样：...HTTPService组件定义了一个请求ID，你将使用这个ID来控制提供数据的URL或者服务器与数据之间的绑定。外部数据与数据驱动控制的绑定通过数据与数据驱动控制（data-drivencontrol）的绑定，你就可以处理HTTPService的结果（XML数据），就象这样：数据绑定的语法显示在数据控制的dataProvider属性中（在波浪形的括号里），它包含了HTTPService请求ID、lastResult方法、以及XML文件的数据结构。在这个例子中，XML数据源的数据结构看起来就象这样：MobilePhone$199CarCharger$34...通过设置dataField属性，项目数据（name和price）作为数据栅格中每一列的数据。在运行时加载数据你还可以在Flex程序开始运行时加载数据，就象随后所示，在HTTPService中向某个特定的URL发送一个请求：当你将creationComplete方法添加到应用程序标签里后，数据会在运行时进行加载并交于数据驱动控制（在这个例子中是数据栅格）。你还可以将HTTPService请求添加到一个控制事件上而不是程序里的标签中，就象如下所示：Flex提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调用、数据服务、或者其它企业级技术来操纵和管理数据。第三节关于FlashPlayer安全性方面的问题出于安全方面的考虑，在客户端的FlashPlayer中运行的应用程序，只有在满足如下条件之一的情况时才能访问远程的数据源，：1.应用程序所编译的SWF文件与远程数据源位于同一个域中。2.使用代理（proxy），并且你的SWF文件位于和代理相同的服务器上。AdobeFlexDataServices为Flex应用程序提供了一个完整的代理管理系统。同时，你还可以通过使用一种web脚本语言，如ColdFusion、JSP、PHP或者ASP来创建一个简单的代理服务。3.安装（跨域策略/cross-domainpolicy）文件在数据源的宿主Web服务器上。文件允许位于其它域中的SWF文件对数据源的访问。第四节为Flex应用程序设计界面布局让我们来详细分析一下前面那个“SayHellotoFlex“的简单例子，你可以通过设置组件的属性值来控制Flex应用程序的界面布局，就象如下所示：许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的x和y的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们，使它们在应用程序的界面放大或缩小时仍然保持其彼此的位置。在这个例子中，面板/Panel组件的布局属性被设置为绝对值方式，同时所有容器的大小都被设置为应用程序的百分之八十。两个组件（TextArea和Button）被放置到距离面板容器边界的特定象素位置上。使用风格和主题增强视觉方面的设计如果样式/style的属性值没有被指定，它们将由整个程序中运行的主题/theme来进行控制。在默认情况下，Flex应用程序使用Halo主题（就象上面那个例子那样）。当然，你可以修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主题样式，就象这样：TextArea{font-size:36px;font-weight:bold;}通过明确地为TextArea组件定义一个样式，应用程序现在看起来就会象这样了：在这个例子中，一种新样式在MXML文件中的标签里进行了定义。如同我们前面所提到过的，你还可以通过修改主题或应用新主题、使用一个外部CSS文件、或者设置单独的样式属性来达到设置新样式的目的。将一个样式单导入到MXML文件中，你需要添加如下的代码：第五节事件和行为的使用HTML应用程序的原理是由客户端发出请求，并从服务器端得到反应。与之不相同的是，Flex应用程序是基于事件的/event-based。举个例子，当用户单击一个按钮时，便会触发一个事件。应用程序本身，不是指服务器，包含了识别事件的逻辑并采取相应的行动。当事件被触发时修改组件的属性对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一个ID值，如下所示：随后你就可以将行为/behavior添加到应用程序上，当某个事件被触发时改变组件的属性值，就象这样：当按钮被单击时，面板的可见属性值被设置为false。使用ActionScript功能函数你也可以通过编写ActionScript功能函数，并在事件中调用它来达到相同的目的，在这种情况下，按钮组件的单击事件如下所示：ActionScript功能函数是在MXML文件里的块中进行定义的，然后引用到按钮的单击事件上。单独的ActionScript代码为了从MXML文件中更好地分离出ActionScript代码，你可以将它们放到单独的ActionScript文件中而不是作为函数，然后再将它们导入到MXML文件里，如下所示：运用行为和变换增强丰富的视觉互动性Flex应用程序是事件驱动的，这就意味着你可以在程序运行时使用事件去添加丰富的视觉互动性。为了实现它，你使用了一个事件触发器，用其来描述一个行为。在前面的例子中，面板组件的visible属性值被设置为false因而不可见。你还可以通过使用行为来制造出更强的视觉效果。下面的例子创建了一个行为，该行为首先创建好一种效果，然后把它绑定到组件的hideEffect属性上（触发器）：当关闭按钮被单击时，面板组件淡出而不是消失。触发器和效果还可以组合到更为复杂的行为中，其被称之为变换/transitions。第六节在应用程序中添加多态页面有几种方法在一个Flex应用程序中创建多态页面。你可以使用ViewStack组件、创建单独的MXML文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状态都是基于一种基础的状态，并进行继承和扩展。在随后的例子中，当用户在组件上滚动鼠标时，基础状态发生变化。当一个视图状态被调用时（通过用户的鼠标在组件上滚动时产生的事件），一种效果（或一种变换）改变了用户界面的外观。使用视图状态方式、ViewStack方式还是MXML文件方式，取决于你想从一个页面到另一个页面进行变化的范围、用户界面的复杂性、以及实现Flex程序的构架。第七节开始使用Flex现在，想必你对Flex的概念有了一个基础的认识，让我们开始创建Flex应用程序吧。使用FlexBuilder通过使用新项目向导/NewFlexProjectWizard创建一个Flex项目（File>New>FlexProject）。设计，编译，以及调试Flex应用程序所需的所有工具，都被包括在FlexBuilder中了。使用FlexSDK创建一个文件名后缀为MXML的文本文件，在其中添加MXML文件的基本元素（上述例子中的头两行代码），然后使用文档资料（特别是AdobeFlex2LanguageReference）去研究各种组件的用法。编译和调试工具是以命令行的方法提供的。第二章Flex2应用程序开发入门本章节的内容包含了对Flex系列产品的概述，以及关于Flex基础理论的相关教程。关于FlexFlex提供了为专业开发人员所熟知的、基于标准的编程模式，以及一套发布高品质RIAs的设计产品。RIAs为web应用程序带来了快速响应并且内容丰富的桌面软件，以满足更有效力的用户体验。Flex使用了卓越超凡的Adobe®Flash®Player9，允许开发人员无缝地扩展浏览器的能力，发布丰富并且快速响应的客户端应用、与服务器端更为健壮的整合功能、以及面向服务器端的体系构架。关于Flex产品系列Flex产品系列包括了进行设计、开发、发布整套RIA所需的一系列产品。它们是：®Flex™®Flex™Builder™®Flex™®Flex™Charting2关于FlashPlayer9最新版本为Adobe®Flex™Builder™3本教程为Adobe®Flex™Builder™2教程Flex应用程序在浏览器中运行时，它们采用了先进的FlashPlayer9运行时环境去执行客户端的逻辑，渲染图形、播放动画、声音以及视频。FlashPlayer9提供了对高性能ActionScript3.0的支持，一如即往地展示了它极具革新技术的表达力。FlashPlayer为开发人员提供了一个设计用户界面的平台，无论是客户端还是客户计算机上的表现层/presentation-tier的逻辑执行。因为FlashPlayer能够在所有主流的操作系统和浏览器上运行，所以你并不需要去为某个浏览器或平台进行程序定制。另外，在FlashPlayer9中运行的Flex应用程序可以与浏览器中所显示的JavaScript或者HTML互动。因此，你可以将Flex融合到一个已经存在的web站点或者应用程序中，包括与其它基于浏览器的构架，如Ajax或JavaScript库一起协同工作。关于FlexSoftwareDevelopmentKit2Flex系列产品中的核心是FlexSoftwareDevelopmentKit(SDK)。Flex2SDK是技术实现和程序编制的基础集合，它使你可以使用Flex系列产品来创建应用程序。Flex2SDK包含了Flex构架（类库），Flex编译器，调试器，MXML和ActionScript编程语言，以及其它实用程序。FlexSDK还包括了核心Flex构架类库的源代码，使你可以学习这些类的代码并扩展它们以备你自己的使用。FlexSDK可以作为一个独立包进行使用，或者集成在FlexBuilder和FlexDataServices里。Flex应用程序由MXML和ActionScript源文件组成。（译者注：简而言这，MXML是用来进行用户界面布局设计的标签语言，ActionScript是FlashPlayer的编程语言。）关于FlexBuilder2FlexBuilder是一个使用FlexSDK、FlexDataServices和FlashPlayer来开发应用程序的集成开发环境（IDE）。FlexBuilderIDE为开发人员提供了各种工具用来进行开发、设计、调试Flex应用程序，其中包括集成的增量编译器和单步调试器。因为它与Flex2SDK、Flex程序模型、Flex编程语言紧密集成，所以FlexBuilder可以提高开发小组中所有成员的生产力。FlexBuilder是建立在Eclipse工作平台上的（一种对于开发工具的开源平台）。因此，FlexBuilder可以作为一个独立的产品或者Eclipse的插件来进行安装，并且能够从Eclipse工作平台上数以百计的商业和开源项目中受惠。FlexBuilder提供了一套针对MXML、ActionScript、层叠样式表（CSS）的代码编辑器，帮助你更加容易地管理代码的源代码操纵工具，以及帮助排除程序中故障的调试器。对于用户界面的设计，FlexBuilder支持可视化的设计视图，它可以使开发人员或者设计人员去布置Flex组件，定制它们的外观，以及如何与用户进行互动。FlexBuilder设计视图的界面如下所示：FlexBuilder进行程序编制的界面如下图所示：关于FlexDataServices2通过使用FlexDataServices，大大地增强了Flex2SDK的功能性。FlexDataServices新增了对企业信息的支持，以及对于Flex2SDK的数据服务架构。你可以在J2EE应用服务器上或者servlet容器里将FlexDataServices发布为一个标准的web应用程序。FlexDataServices能够简化操作服务器上数据的编程模式。关于FlexCharting2以图表或图形来显示数据的方式可以使用户更容易理解数据的使用。你可以将一个简单的数据表格，通过设置它的颜色、标题、以及二维表现方式来展示为条形、圆饼形、线形、或者其它类型的图表。Flex图表组件扩展了Flex的构架，增加了对大多数常用图表类型的支持，包括条形、圆饼形、线形、标图形和气泡形。图表组件是动态地在客户计算机上进行渲染的，从而使它可以非常容易地平铺、翻滚、以及其它增强用户体验的互动性。你还可以使用颜色和标题来使图形更有可读性。一个简单的图表如下所示：Flex应用程序的特性在Flex中，开发人员可以开发出符合各种需求类型的应用程序，它们是：1.用户数据收集2.配置3.在客户端处理用户的输入，包括过滤和数据校验4.直接反馈用户5.多步骤处理6.支持大数据集7.实时数据推进8.偶尔的客户端连接Flex发布模式Flex平台支持范围广泛的发布模式，它们是：1.客户端模式，即应用程序只运行在客户端上而不需要服务器资源。2.使用简单的RPC访问服务器数据，即使用HTTPService（HTTPGET或POST请求）和WebService（通过使用SOAP）。taServices模式，可以提供更为高级的特性，如数据同步、安全增强等等。FlexDataServices增强的RPC服务支持使用AMF协议去访问RemoteObjects。这样，你就可以访问远程服务器上的Java对象（JavaBeans，EJBs，POJOs）。同时，FlexDataServices还提供了一个代理/proxy以方便对服务器端数据的存取。关于FlexBuilder的界面模式FlexBuilder提供两种界面模式：即开发设计模式、调试模式。你可以在主菜单中的Window>Perspective>下对两者进行切换。Flex开发界面模式打开开发界面模式，你将看到代码编辑器，它包括了导航栏/Navigatorview、调试栏/Problemsview、以及概述视图栏。FlexBuilder中的代码提示代码编辑器包含了许多特征可以帮助开发人员简化他们的工作。其中最重要的特征称之为代码提示/内容协助/ContentAssist（译者注：内容协助是其英文的直译，不太好，所以根据它的实际意思意译成代码提示），它将在你输入MXML、ActionScript以及CSS代码时给出完整的提示。请键入Control+Space以打开代码提示。在FlexBuilder中设计Flex应用程序在开发界面中有两种设计方式：代码输入方式和可视化设计方式，你可以自由地在两者之间进行切换。当你选择可视化设计方式/Designmode时，Flex界面上将出现设计面板/designcanvas、所支持的组件/Components、以及Flex属性栏/Propertiesviews。Flex调试模式你可以在代码编辑器中查看和编辑出错或被警告的代码。同时，你还可以设置断点、或单步执行来帮助你进行程序的调试。编译应用程序每当项目资源作出改动后，FlexBuilder便会自动地将Flex和ActionScript3.0编译成SWF，并与相应的HTML页面一起放置到项目的输出文件夹中。第三章Flex基础Flex是基于组件来进行开发的，为了更有效率地设计和开发应用程序，你应该熟悉这些开发模式以及操作步骤。第一节创建一个Flex应用程序本讲涉及相关资源下载:DFLEXAPI大全：/FLEX_Directory/Flex_API_Flex_Framework_/FLEX_Directory/Flex_API_Flex_Framework_Diagram_Flex_API_down/应用程序模型Flex创建一个应用程序时，你使用组件（容器/containers和控件/controls）来描述用户的操作界面。例如，容器可以是一个用来进行数据输入的表格容器，如一个盒框/Box或一个栅格/Grid；而控件就是该表格中的元素，如一个按钮/Button或文本输入栏/TextInputfield。举个例子，在随后的图例中显示了两种不同的盒子容器，它们分别包含了三个按钮控件和一个ComboBox控件：Flex的MVC模型为了增强系统的复用性和可维护性，应该采用具有良好体系架构的模型，即Model-View-Controller（MVC）。1.模型/Model组件封装了数据和与数据相关的行为。2.视图/View组件定义了应用程序的用户界面。3.控制器/Controller组件则负责处理程序中的数据连接。web服务器的运用通常地，会涉及到的web服务器类型有：1.纯web服务器，它们仅将用户的请求回复一个简单的静态HTML页面。在这种情况下，你需要将Flex应用程序的SWF文件嵌入到一个HTML页面中。应用服务器，如JRun、ColdFusion或者PHP，它们可以动态地生成页面。在这种情况下，你将使用到与服务器技术相关的库，并动态地处理它们的内容。3.J2EE应用服务器或servlet容器。向一个J2EE应用服务器或servlet容器发出请求，如JRun、Tomcat或WebSphere，通常你需要使用FlexDataServices。程序开发的通常步骤开发Flex应用程序，通常会采用如下的步骤进行：1.在一个文本编辑器或集成开发环境（IDE）中，如AdobeFlexBuilder、Eclipse或IntelliJ中插入MXML根标签。2.添加一个或更多容器。3.在容器中添加控件，如输入栏、按钮和输出栏。4.定义一种数据模型。5.添加一个web服务器，HTTP服务器，或向远程Java对象发送请求。6.为数据输入添加验证。7.为组件添加脚本。8.将应用程序编译成SWF文件。发布应用程序你可以将应用程序发布成一个编译好的SWF文件，或者如果有FlexDataServices的话，则可以将应用程序发布为一组MXML和ActionScript文件。客户端进行访问的格式分别是：hostname/path/p://hostname/path/第二节Flex编程模型Flex包含了Flex类库、MXML和ActionScript编程语言，如下图所示：当然，Flex还包括Flex编译器和调试器，它们并没有在图中示出。你可以混合MXML和ActionScript来发Flex应用程序。事实上，MXML和ActionScript编程语言都提供了访问Flex类库的能力。通常的做法是：使用MXML去定义用户界面的元素，使用ActionScript去定义客户端的逻辑并进行控制。Flex类库包括了Flex组件、管理器和行为。在基于组件的开发模型下，开发人员可以运用预先做好的组件。将ActionScript添加到Flex应用程序中ActionScript可以出色地完成如下任务：1.处理事件2.处理错误3.在MXML语句中将数据对象绑定到Flex控件上4.定制组件在随后的例子中，为按钮控件的点击事件添加了事件监听器/eventlistener。当用户点击按钮时，将TextInput控件中的文本拷贝到TextArea控件中。前面的例子是在MXML中直接插入ActionScript代码。尽管这种技术只需要一两行ActionScript代码，但是对于更为复杂的逻辑实现，你就需要在块中定义ActionScript，就象如下所示那样：在本例中，你使用ActionScript功能函数来实现了一个事件监听器。这样做的好处是使MXML代码与ActionScript代码分离，以提供更好的健壮性和灵活性。使用数据绑定Flex提供简洁的语法来实现组件间的、或与数据模型的绑定。随后的例子中，在波浪括号/{}里的数值将TextArea控件与TextInput控件的文本属性联系起来。当用户在TextInput控件中输入文本时，它会自动地拷贝到TextArea控件中去。使用事件去处理错误正如你可以使用事件去实现程序的功能，你也可以使用它们对错误进行处理。下面的例子显示了如何设计一个针对web服务器操作的错误事件的监听器：...控制应用程序的外观控制应用程序的外观，常涉及到如下内容：1.大小/Sizes，即组件或应用程序的高度和宽度。2.样式/Styles，即一组特性，如字体、排列方式、颜色等。它们都是通过层叠样式（CSS）来进行设置的。3.皮肤/Skins，即可以进行改变的组件视觉元素。4.行为/Behaviors，即Flex组件在视觉或听觉效果方面的变化。6.视图状态/Viewstate可以让你通过修改它的基础内容，来改变组件或程序的内容和外观。7.变换/Transitions可以让你定义屏幕上发生改变的视图状态。使用数据服务器Flex被设计为可以与许多类型的服务器打交道，从而提供对本地和远端逻辑的访问。提供数据访问的MXML组件被称之为数据服务器组件/dataservicecomponents。MXML包含了如下几种类型的数据服务器组件：vice提供对使用SOAP的web服务器的访问。rvice提供对返回数据的HTTPURLs的访问。Object通过使用AML协议提供对Java对象（JavaBeans、EJBs、POJOs）的访问。该选项目前仅适用于FlexDataServices或MacromediaColdFusionMX7.0.2.从Flash到Flex开发一个Flex应用程序与开发一个MacromediaFlashProfessional8程序有所不同，即使两者都会最终被编译成SWF文件。FlashProfessional使用了一些概念，如时间轴/Timeline，动画帧/，图层/layers来组织和控制程序中的内容。而在Flex中则抛弃了这些内容，转而使用MXML标签来设计用户界面组件和连接数据源。尽管Flash和Flex的开发模型各不相同，但是Flash仍然是一个非常强大的工具，用来创建定制的组件和视觉方面的资源，然后以外部SWC文件的形式导入到Flex中。第三节创建FlexDataServices应用程序当你使用FlexDataServices来开发应用程序时，就能体会该数据服务架构的强大功能。关于FlexDataServicesFlexDataServices在Java应用服务器上或Java容器中执行，提供如下列所示的强大功能：1.增强的数据服务。2.与多个客户端进行数据共享3.支持客户端到客户端的通信4.自动服务器数据推进5.客户端对服务器端资源的可靠访问6.数据服务日志7.增强的远程过程调用（RPC）功能关于Flex数据管理服务Flex数据管理服务/DataManagementService可以让你开发出使用分布式数据的应用程序。该特性可以实现诸如数据同步、数据复制、偶尔连接等功能。FlexDataServices的数据管理服务、消息服务和RPC服务都是基于低层的消息构造而建立的，如下图所示：消息构造/messaginginfrastructure可以使Flex应用程序连接消息目的地，发送消息，以及接收从其它客户端发来的消息。消息客户端可以是Flex应用程序或者其它类型的客户端，如JavaMessageService（JMS）客户端。消息构造由服务器端的消息服务，和在Flex客户端程序相应的消息API所组成。第四节使用Flex图表组件在图表或图形中显示数据的能力，可以使用户更加容易地解释数据以及它们之间的内在联系。在Flex中，不再仅仅是出现一些简单的数据表格，你可以使用各种各样的图表形式去显示你的数据。它们是：1.区域形图表/Areacharts2.气泡形图表/Bubblecharts3.烛形图表/Candlestickcharts4.柱形图表/Columncharts5.高低开合形图表/HighLowOpenClosecharts6.线形图表/Linecharts7.饼形图表/Piecharts8.标绘形图表/Plotcharts除了上述图形类型，你还可以扩展CartesianChart控件来创建定制的图表。定义图表数据所有的图表控件都使用dataProvider属性去定义图表的数据。图表组件使用一个简单的、或基于列表的数据提供器/dataprovider，类似于一维数组。数据提供器由两部分组成：数据对象的收集和API。API是类执行的一套方法和属性，而数据提供器在Flex组件和数据之间创建了一个抽象的层次。第五节使用MXMLMXML是一种XML语言，你可以使用它去布置AdobeFlex应用程序的用户界面。你还可以使用MXML去定义其它的方面，如存取服务器端的数据，将用户组件与服务器端数据源进行绑定等。MXML看起来与你所熟悉的HTML很类似，然而，MXML更为结构化，并提供更为丰富的标签集。MXML与HTML之间最大的不同之处在于，以MXML所定义的应用程序将被编译成SWF文件并由FlashPlayer进行渲染，它提供比HTML程序更为丰富的和动态的用户界面。你可以将MXML应用程序编写成一个文件或多个文件。同时，MXML还支持以MXML和ActionScrip所定制的组件。编写一个简单的应用程序随后的简单程序显示“HelloWorld”，该例子包含了标签和两个子标签，即标签和标签。是所有Fles应用程序的根标签。标签定义了一个面板容器，它包括了标题栏、状态信息、边界、以及容纳子对象的内容区域。标签中使用了一个Label控件用来显示文本。将文件保存为。请注意，MXML文件的后缀.mxml必须是小写。然后编译并运行所生成的SWF文件，结果如下所示：MXML标签与ActionScript类的关系Adobe是通过ActionScript类库来实现Flex应用程序的。类库包括了组件（容器和控件），管理类，数据服务类等等。事实上，你是在使用类库所支持的MXML和ActionScript来开发Flex应用程序。MXML标签与ActionScript类或类的属性相对应。Flex剖析MXML标签并编译成相应的SWF文件。举个例子，Flex提供ActionScript按钮类/Buttonclass来定义按钮控件。在MXML中，你使用如下MXML语句来创建一个按钮控件：当你使用MXML标签来声明一个控件时，事实上你就创建了相应那个类的一个实例对象。上述MXML语句创建了一个按钮对象，并初始化它的label属性值。与MXML相关的技术标准与MXM相关的技术标准有：标准。XML文档使用标签去决定结构化信息的内容，以及它们之间的关系。2.事件模型标准。Flex事件模型是文档对象模型/DocumentObjectModel（DOM）第三级事件的一个子集，该模型是由WorldWideWebConsortium（W3C）起草制定。服务标准Flex提供与服务器交互的MXML标签，遵循了Web服务描述语言/WebServicesDescriptionLanguage（WSDL）的规则。具体包括了简单对象访问协议/SimpleObjectAccessProtocol（SOAP）和超文本传送协议/HypertextTransferProtocol（HTTP）。标准Flex提供了与服务器端Java对象交互的MXML标签，包括plainoldJavaobjects（POJOs），JavaBeans和企业级/EnterpriseJavaBeans（EJBs）。标准Flex提供了相应的MXML标签去支持标准的HTTPGET和POST请求，以及对HTTP返回数据的处理。6.图形标准Flex还提供了相应的MXML标签去使用JPEG，GIF和PNG图象。Flex还能够将SWF文件和ScalableVectorGraphics（SVG）文件导入到应用程序中。7.层叠样式表标准MXML样式的定义和使用遵循了W3CCascadingStyleSheets（CSS）标准。第六节使用ActionScriptAdobeFlex开发人员还可以使用ActionScript去扩展应用程序的功能性。ActionScript提供了比MXML更为低层的、更细致的、更为强大的功能。关于ActionScriptActionScript是一种运用于AdobeFlashPlayer的编程语言，它与coreJavaScript非常类似。ActionScript3.0的特性完全实现了ECMAScriptforXML(E4X)。MXML程序中的ActionScriptActionScript极大地扩展了Flex开发人员的能力。通过使用ActionScript，你可以定义事件******，获取或设置组件的属性，处理回调功能，创建新的类、包和组件等。你可以运用如下所示方法在Flex中使用ActionScript：1.在标签中插入ActionScript代码块。2.调用存储在system_classes目录结构中的全局ActionScript功能函数。3.引用user_classes中的外部类和包来处理更为复杂的任务。4.使用标准的Flex组件。5.使用ActionScript类扩展已有的组件。6.使用ActionScript创建新的组件。7.在Flash创建环境中创建新的组件（SWC文件）。ActionScript的编译Flex应用程序的逻辑实现是由ActionScript类，MXML文件，SWF文件，外部组件共同组成。最后由FlashPlayer下载SWF文件并在客户端机器上进行运行。你可以在MXML文件中使用ActionScript代码段。Flex编译器将主MXML文件和它的子文件变换成一个单独的ActionScript类。同时，你还可以在MXML文件中导入ActionScript类，这些类会被添加到最后的SWF文件中。随后的例子显示了源文件是如何生成SWF文件，并通过J2EE服务器发送给客户端的：在Flex应用程序中使用ActionScript当你编写一个Flex应用程序时，使用MXML去布置用户的界面，使用ActionScript去处理与用户的交互。你可以使用不同的方法将ActionScript和MXML混合在一起。在Flex应用程序中使用ActionScript，你可以在标签中添加脚本块，或者包含外部的ActionScript文件。另外，你还可以在MXML程序中导入外部的类文件或整个类的包。创建ActionScript组件通过使用ActionScript并在Flex程序中进行引用的方式，你可以创建可复用的组件。使用ActionScript所创建的组件可以包含图形元素、定制的商业逻辑、或扩展已存在的Flex组件。例如，你可以定义一个定制的按钮，它由Flex的按钮控件派生出来，就象这样：packagemyControls{publicclassMyButtonextendsButton{publicfunctionMyButton(){...}...}}这个例子中，你在文件里编写好MyButton控件，并将文件保存到Flex应用程序的根目录的myControls子目录下。然后在Flex应用程序中引用你定制的按钮控件，如在文件里，就象这样：本例中，你首先定义cmp命名空间，用它来放置你定制的组件，然后使用该命名空间为前缀的MXML标签对组件进行引用。第四章Flex编程入门教程本章节将提供一系列的课程教授你如何开发Flex应用程序。第一节创建你的第一个应用程序本节将向你展示如何使用AdobeFlexBuilder编译和运行一个简单的Flex应用程序。其中涉及的重点内容包括FlexBuilder项目的概念。在FlexBuilder中，所有的程序都被包含在项目/projects里。创建一个项目在FlexBuilder中创建一个Flex应用程序之前，你必须首先要创建一个项目。当创建好项目文件时，主MXML程序文件就已经准备好。然后你就可以在项目中添加各种资源，如MXML组件文件、ActionScript文件等等。其主要操作步骤有：1.启动FlexBuilder并从主菜单中选择File>New>FlexProject，出现新项目向导/NewFlexProjectwizard。2.在打开的屏幕中，选择基础数据选项/Basicdataoption并点下一步/Next。接下来会询问你指定保存项目文件的目录。3.在项目名称栏中输入Lessons。在项目内容区域，确保使用默认目录选项/UseDefaultLocationoption被选定。默认的目录是C:DocumentsandSettingsyour_user_nameMyDocumentsFlexBuilder2。FlexBuilder将在该目录下创建Lessons文件夹。4.点击完成/Finish。FlexBuilder创建好新的项目并在导航视图中进行显示。新建项目向导将自动生成项目配置文件，存放被编译SWF文件的输出目录，以及主程序文件。5.确定自动构造选项/automaticbuildoption是打开的，选择SelectProject>BuildAutomatically。创建并运行应用程序1.如果文件没有被打开，请在导航视图中找到并双击来打开它。2.切换到MXML编辑器。FlexBuilder将在文件中插入随后代码：3.在组标签之间输入随后的代码来添加一个面板容器。面板容器是Flex布局的基本部件。4.在组标签之间输入随后的代码来添加一个Label控件。你可以点击设计按钮/Designbutton是预览布局的效果。5.保存文件每当你保存文件时，FlexBuilder就会自动地构造应用程序。构造完成后，请点击运行/Run按钮来执行程序。一个浏览器打开并运行应用程序。在这一节中，你学习了在FlexBuilder中如何创建一个项目，以及如何编译和运用一个Flex应用程序。第二节获取并显示数据为了在应用程序中使用数据，AdobeFlex包括了与HTTPservers，webservices或remoteobjectservices（Javaobjects）进行交互的组件，这些组件被称之为远程过程调用（RPC）服务组件。与AdobeColdFusion，PHP或类似的服务器技术不同，Flex应用程序并不直接连接数据库。举个例子，你可以在一个Flex文件中插入HTTPservice来实现与ColdFusion文件的交互，以获取MySQL数据库中的数据，转换成XML，然后返馈给Flex应用程序。在本节中，你将学习创建一个简单的blog阅读器。你使用了被称之为HTTPService的RPCservice组件从RSS中获取数据，然后将数据绑定到Label、DataGrid、TextArea和LinkButton控件上。为了完成这个项目，执行的步骤如下：1.设置项目2.检查要访问的远程数据源出于安全的原因，在客户端计算机上FlashPlayer中运行的应用程序，只有在满足如下条件之一的情况下，才能访问远程的数据：a.应用程序的SWF文件与远程数据源位于同一个域中。b.使用代理，同时SWF文件与代理位于同一个服务器中。c.在数据源的宿主web服务器上安装（跨域策略）文件。本节中例子使用的是第三种方法。插入并配置blog阅读器在本小节，你将学习创建一个blog阅读器。1.在导航视图中选择Lessons项目，选择File>New>MXMLApplication并创建一个叫的文件。2.将设置为被编译的默认文件。3.在MXML编辑器的设计模式下，从组件视图中拖拉出一个面板容器，并设置它的相应属性值：Title:BlogReaderWidth:475Height:400X:10Y:104.在设计模式下，从组件视图中拖拉出如下组件到面板容器里：DataGridTextAreaLinkButton5.使用鼠标将控件布置成垂直排列的、左对齐的列。6.选择DataGrid控件并设置相应属性：Id:dgPostsX:20Y:20Width:4007.选择TextArea控件并设置相应属性：X:20Y:175Width:4008.选择LinkButton控件并设置相应属性：Label:ReadFullPostX:20Y:225界面布局看起来就象这样：9.点击工具条上的Sourcebutton切换成编辑器源代码模式。在文件中输入如下MXML代码：10.保存文件，完成编译后运行。一个浏览器窗口将打开，如下所示。到这一步，应用程序还没有显示任何blog信息。接下来的一步是使用一个称之为HTTPService的RPC服务组件来获取blog的信息。插入HTTPService组件对于blog阅读器这个项目，其数据源来自于/go/mchotinblog。你使用HTTPService组件来访问blog的XML。该组件发送HTTPGET或POST请求，并获取反馈回来的数据。1.在源代码模式下，在标签中输入标签：url属性指明了被请求文件所在的位置。在本例中，该URL一直是有效的，但是你仍然需要确定它是否已经发生改变。useProxy属性表明你并不打算在服务器上使用代理。因为Matt'sblog上面有设置，所以FlashPlayer可以访问该服务器上的远程数据。接下来提示应用程序向指定的URL发送请求。2.在标签后，添加creationComplete属性（粗体显示）：你的应用程序每次启动时，HTTPService组件的send（）方法将被调用。该方法向指定的URL发出HTTPGET或POST请求，并得到HTTP回应。在本例中，RSSfeed将返回XML数据。接下来，检测RSSfeed的获取是否成功。然后将数据绑定到Label控件上，就象这样：3.在标签中，将title属性的值用随后的表达式替换：title="{}"当HTTPService组件返回XML时，在名叫lastResult的ActionScript对象中进行剖析。lastResult对象的结构反映了XML文档的结构。XML的结构通常如下所示：