马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
Flash广泛用于创建吸引人的应用程序,它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序(如Photoshop或illustrator)导入它们,快速设计简单的动画。
《Flex3RIA开辟详解与博识理论》
Flex3程序计划基本
Flex是一种RIA开辟手艺,具有更好的收集交互才能,加倍壮丽的体现效果,同时在企业级的扩大上也熟能生巧。Flex手艺对软件开辟职员的请求其实不刻薄,MXML和ActionScript都遵守手艺尺度,用绝对复杂的代码就能够完成壮丽高效的Flex使用程序。
作为Flex手艺的构成部分,FlexCharting让我们能够天真地举行图表编程,FlexDataService让我们能够将Flex使用程序部署成为企业级使用。
FlexBuilder是一个有用的集成开辟情况,经由过程这个情况,能够高效地完成Flex程序的编写。
1.1RIA概述
本章内容先容Flex的背景和手艺特性,并经由过程示例程序来展现Flex的界面效果和手艺内在。
Internet已是我们生存的一部分,而“看网页”能够说是收集扫瞄者与Internet最复杂的相同体例。翻开扫瞄器,进进一个网站扫瞄,这就是扫瞄者们看到的最直不雅的Internet的表面。只管页面上不是单一的笔墨,但也仅仅是“页”。但是现在这些传统的机器的“页”已不再能满意收集扫瞄者的请求了。多媒体、多元化的信息体现在一个页面上,切实其实非常薄弱。
另外一方面,开辟职员也一向在为太过依附于页面革新、哀求呼应等诸多传统网页开辟手艺固有的成绩而懊恼。固然我们不克不及疏忽B/S架构可以代替C/S临时年夜行其道有一个主要的要素,就是收集带宽成绩。
传统网页内容复杂,节俭收集带宽的上风是与生俱来的,而现在收集手艺在不休地开展,软硬件开展又到达了一个不相上下的时代,软件体系已不必要守候硬件的开展而开展。有了激烈的需求,又有了充分的硬件基本,新手艺应运而生,RichInternetApplication(RIA)的呈现给收集扫瞄者和开辟职员都带来了全新的体验。
RichInternetApplication便是富因特网使用程序,其特性也表现在一个“富”字上,传统的HTML页面带给用户的页面元素是极为无限的,输出框、选择框、下拉框等没法交换的元素,生怕早就对扫瞄者带来了审美委靡,更况且在功效上也存在着很年夜不敷。对照传统页面,RIA的界面是“富”的,基础上一个桌面程序能体现出来的效果,RIA都能体现。
.1中的网站是一个名为scrapblog的博客网站,与我们罕见到的博客网站分歧,这个网站利用一种RIA手艺构建,在页面体现力和交互性上都远远凌驾了罕见的博客网页。
.1利用RIA手艺完成的网站——scrapblog(点击上图缩小)
假如说RIA的上风仅仅是丰厚的界面体现才能的话,那末人人会以为这不外就是个C/S架构,RIA的另外一年夜特性也恰是与C/S架构最年夜的分歧:数据上的“富”。传统的网页开辟基于HTTP协定,数据的交互依附于哀求/呼应机制;界面的交互则必要举行页面的跳转和革新。RIA的处置则有很年夜分歧,在客户端能够举行完全的数据处置,与用户的交互加倍友爱、加倍敏捷;界面交互其实不依附页面,动静经由过程异步哀求传送,面向用户界面中的各个小模块,客户真个模块之间干系明晰,处置起来加倍天真。
关于企业级使用来讲,RIA手艺其实不必要交换失落现有的系统布局模子,如JavaEE(之前称J2EE)、.NET架构等。RIA手艺一般能够和企业级使用系统布局很好地举行整合。将原本的体系构建成更容易用、更直不雅、更敏捷的“网页使用程序”。在不会影响到原有使用的条件下,RIA手艺对体现层举行了年夜幅度的加强,进一步提拔界面的友爱水平,而且削减了用户与体系的远程交互频次,削减了带宽需求。
RIA开辟手艺已有良多种,Adobe公司的Flex开展日益成熟,微软公司的SilverLight及Sun公司的JavaFX也崭露锋芒。Flex手艺的上风得天独厚,有壮大的Flash平台作后台,SilverLight和JavaFX在RIA的完成上则各有偏重,SilverLight作为一个扫瞄器插件撑持普遍,并且关于JavaScript和微软的.NET手艺无缝分离,而JavaFX系统不但但愿使用编写更简单的JavaFXScript代替JavaScript,更是供应了JavaFXMobile,为手机及挪动设备增添了使用程序撑持。
1.2Flex简介
Flex是一种基于尺度编程模子的高效RIA开辟产物集,最后由Macromedia公司在2004年公布,后被Adobe公司冠以商标。Flex最年夜的特性是基于环球盛行的收集动画平台——MacromediaFlash。2000年以来,Flash动画愈生机爆,“闪客”们的作品为Internet增加了壮丽的色采,而Flash的播放器FlashPlayer已成为扫瞄器上首选的不成或缺的插件,为了看到页面中活泼的Flash动画,年夜部分扫瞄者城市安装FlashPlayer。经由过程Flex手艺,开辟职员能够将RIA程序编译成为Flash文件,为FlashPlayer所承受,也就是说,Flex手艺所开辟出来的程序关于年夜部分扫瞄者而言其实不必要安装分外的客户端撑持,这是一个得天独厚的上风。
“基于尺度编程模子的高效RIA开辟产物集”,这是Adobe公司对Flex手艺的官方界说。上面我们就来举行具体的剖析。
一个完全的Flex程序由MXML代码和ActionScript代码构成。MXML基于XML尺度,用于设置和计划Flex程序的界面及编写体现层数据模子;ActionScript基于ECMAScript,本来用于计划Flash动画,其语律例范相似于JavaScript。如许两种基于W3C尺度的开辟言语就组成了Flex程序,两种言语的干系相似于HTML和JavaScript,如许一来(特别关于传统网页开辟者来讲),Flex基本没有甚么门坎。
Flex3是Flex的一个成熟版本,它的产物集包括以下几部分。
1.AdobeFlex3SDK
FlexSDK是Flex产物会合最基本的也是必须的组件,利用其他组件必需在SDK的基本上,独自经由过程SDK就能够完成经常使用的程序计划。
2.AdobeFlexBuilder3
FlexBuilder是一个基于Eclipse的集成开辟情况,经由过程FlexBuilder能够对程序举行所见即所得的界面计划,并撑持MXML和ActionScript的智能编写,能够在很年夜水平上进步Flex开辟的效力。
3.AdobeLiveCycleEnterpriseSuite
LiveCycleES是Flex企业级开辟部署套件,以使用于企业级组件,使得Flex能够部署到JavaEE使用服务器上。
Flex3SDK的体系需求以下。
- Windows平台:Windows2000,XP,Server2003,Java1.4~1.5
- Macintoshi平台:MacOSXv.10.4.x,Java1.5
- Linux平台:RedHatEnterpriseLinux3~4,Suse10,Java1.4~1.5
- Solaris平台:Solaris9,10,Java1.4~1.5
- 处置器需求:IntelPentiumII450MHz或更快/PowerPCG3500MHz或更快/Modernprocessor(800MHz或更快)
- 内存需求:512MBRAM(保举1GB)
- 硬盘需求:200MB可用硬盘空间
可见开辟Flex的硬件需求其实不很高,以后支流的盘算机都能够胜任。Flex手艺的一切资本下载都能够经由过程http://www.adobe.com取得。
1.3MXML
MXML是一种基于XML的标志言语,在Flex手艺中,MXML用于计划用户界面,完成丰厚的Flex体现层。从感化上说,MXML和HTML的功效是基础分歧的,都是计划用户界面,可是MXML供应了较HTML更加丰厚的界面组件,而且在开辟上更加布局化,层次加倍明晰。
MXML的编写一样相似于HTML,它经由过程标签来界说和形貌组件。依照进修编程的常规,上面请看一个用MXML编写的HelloWorld示例。
示例1.1HelloWorld
<?xmlversion="1.0"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Paneltitle="FlexMXMLTest"x="10"y="10"fontSize="12">
<mx:Labeltext="HelloWorld.天下,你好!"fontWeight="normal"fontSize="24"fontFamily="TimesNewRoman"fontStyle="italic"alpha="1.0"/>
</mx:Panel>
</mx:Application>
经由过程示例1.1的代码能够看到,固然MXML是相似于HTML的格局,可是Panel、Label等开辟组件表达了一个GUI开辟平台才具有的特性。MXML是基于XML言语的,可读性很强,由标签(Tag)、标签中的属性(Attribute)及属性值(AttributeValue)等元素构成。
那末,怎样才干运转起这个HelloWorld呢?
第一,用一个一般的文本编纂器,如记事本、EditPlus等,编写并保留上述代码,必要注重的是文件扩大名要保留为小写的mxml,如test.mxml,我们临时把它保留在C盘的user文件夹下。
第二,利用Flex3SDK的命令行举行编译,Flex的编译工具在SDK的bin文件夹下,如Flex3SDK解紧缩到C盘根目次,那末在命令行实行(本书一切代码示例部分都默许利用C:user作为代码文件夹):
cdc:flex_sdk_3in
mxmlcc:user est.mxml
能够看到在user文件夹下天生了test.swf文件。
第三,用扫瞄器或FlashPlayer翻开这个swf文件,就看到了这个HelloWorld的运转效果,如.2所示。
.2HelloWorld运转效果
分离.2我们来剖析一下这个程序的代码。
<mx:Application>是MXML的根元素,是MXML一切组件的容器。在这个标签中,我们要声明mxml的定名空间。
<mx:Panel>是个面板组件,是GUI程序开辟的罕见组件,其功效是个组件容器。我们把它的题目设置成了“FlexMXMLTest”,并对地位尺寸举行了设定。
<mx:Label>一样是GUI程序开辟必不成少的组件之一,经常使用于笔墨容器,在.2中,这个Label的内容就是“HelloWorld.天下,你好!”这个字符串,并将其嵌套在一个<mx:Panel>中。在这个程序里,<mx:Panel>是<mx:Label>的容器。
这就是一个尺度的MXML的大抵写法。必要出格注重的一点是,在第一行的<?xmlversion=“1.0”?>中偶然候必要举行指定的编码,我们用文本编纂工具处置的时分要保留成对应的编码,如为了便利处置中文和国际化,我们能够把第一行改写成<?xmlversion=“1.0”encoding=“utf-8”?>,并将代码保留为UTF-8格局。
1.4ActionScript
ActionScript是为AdobeFlash计划的面向工具的程序计划言语,在Flex开辟中,ActionScript的基础感化相似于传统网页开辟中的JavaScript,同时ActionScript还要卖力Flex程序的逻辑把持和营业建模。ActionScript遵守欧洲盘算机打造商协会(ECMA)经由过程的ECMAScript尺度,而ECMAScript出自JavaScript派生出的尺度ECMA-262,因而不管是利用语法仍是技能方面,ActionScript与JavaScript都十分类似。
作为Flex手艺的构成部分,ActionScript充任着加倍主要的脚色。假如说MXML是Flex亮丽的表面,那末ActionScipt就付与了Flex聪明的魂灵。关于开辟者而言,在ActionScript上所下的工夫要年夜于MXML,MXML作为界面体现层必要更多的是表面计划,而ActionScript则必要承当升引户交互、数据处置和营业逻辑处置的重担。不但云云,在MXML中所利用的Panel、Label等Flex内建组件都是基于ActionScript类完成的,使用ActionScript能够承继这些内建的组件工具来创立自界说的Flex组件,使得开辟的天真性年夜年夜增添。ActionScript的使用还能够触及到体现层数据模子和异步远程哀求及呼应的事件处置。
我们能够经由过程<mx:Script>标签在MXML文件中拔出ActionScript代码或导进ActionScript类文件。而在编译过程当中,ActionScript代码和MXML代码城市被分别成ActionScript类,终极编译器毗连一切的ActionScript类,编译天生SWF文件。
1.4.1在MXML中利用ActionScript剧本
MXML利用<mx:Script>标签完成对ActionScript的外部编译撑持,因而,ActionScript剧本代码可间接在标签内编写,此时ActionScript以办法为基础单元自力感化,可在MXML代码中间接挪用。这里必要注重的是,MXML外部嵌进ActionScript代码的体例并不是利用了独自的编译机制,在MXML举行编译的过程当中,外部的ActionScript代码会被抽掏出往并创立自力的ActionScript类文件,最初组合到SWF文件当中。
上面来看一看在MXML外部利用ActionScript的示例程序。
示例1.2利用ActionScript剧本
<?xmlversion="1.0"encoding="utf-8"?>
<!--此示例程序中要利用中文,因而举行编码声明,请注重保留时选择准确的编码-->
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
<mx:Script>
<![CDATA[
publicfunctionchangeText():void{
disp1.text="利用ActionScript";
}
]]>
</mx:Script>
<mx:Paneltitle="FlexActionScriptTest"paddingTop="10"paddingBottom="10"
paddingLeft="10"paddingRight="10"x="10"y="10"fontSize="12">
<mx:Labelid="disp1"text="HelloWorld.天下,你好!"fontWeight="normal"
fontSize="24"fontFamily="TimesNewRoman"fontStyle="italic"
alpha="1.0"/>
<mx:Buttonlabel="点击这里"fontSize="16"click="changeText()"/>
</mx:Panel>
</mx:Application>
示例1.2的程序基础是对上一个HelloWorld示例的扩大,我们对Label增加了一个id属性,并在<mx:Script>中对这个id举行援用,请出格注重<mx:Script>标签在MXML中的援用体例,其内容为ActionScript代码,因而要用<![CDATA[]]>括起来包管对其作为一个字符内容的援用,不然ActionScript代码中的操纵符很简单与XML的关头字产生抵触,如<、>、&等标记在XML中都有特定的意义。
上面来看看这个示例的运转效果。
如.3所示,此次运转的效果多了一个按钮组件,即代码中的<mx:Button>,而且我们设置了按钮组件的click属性,即设置了按钮的单击触发为实行ActionScript办法changeText(),接上去能够单击按钮检察效果,了局如.4所示。
.3ActionScript测试运转效果一
.4ActionScript测试运转效果二
在.4中,Label的笔墨内容被交换成为字符串“利用ActionScript”。我们能够看到ActionScript代码中changeText()办法的感化是,呼应一个按钮单击事务,经由过程属性id援用MXML的界面组件,并经由过程用户交互来处置组件的变更,这是ActionScript最多见的使用办法。本示例中,经由过程changeText()办法对id为disp1的Label组件举行text赋值操纵,经由过程这个示例我们能够熟习一下ActionScript的一些语律例则,publicfunctionchangeText():void是ActionScript的办法界说,会见把持字为public,而function是办法界说关头字,办法称号为changeText,前往值范例为void。在MXML代码中间接嵌进ActionScript时不必要计划ActionScript类,间接以办法作为实行单元。
假如是复杂的事务呼应处置,如输出校验、组件可见性把持等处置,那末用下面的办法还没有成绩,但假如必要对数据举行庞大的逻辑操纵大概必要对MXML的组件举行定制操纵,就必要ActionScript类来完成了。
1.4.2利用ActionScript类
在下面的示例中,我们把ActionScript代码嵌进到MXML中利用,假如大批的程序剧本都会合在MXML文件内,会给开辟和保护城市带来极年夜的方便,因而在开辟时要注重只管将ActionScript代码从MXML文件平分离进来。
对ActionScript代码举行分别的最复杂办法也是经由过程<mx:Script>标签来完成,必要设置<mx:Script>标签的source属性。比方我们的ActionScript文件是includes文件夹下的tools.as,那末能够经由过程<mx:Scriptsource=“includes/tools.as”>来完成对ActionScript文件的引进,如许ActionScript的代码部分能够从MXML平分离进来。
可是仅仅用上述体例分别代码仍是不敷的,这类体例仅仅在誊写大将ActionScript代码独自分别进来,与HTML中引进JavaScript的体例是完整分歧的,而文件对实践的程序计划和代码保护并没有起到感化,因而利用<mx:Script>的source属性简单形成误区,招致ActionScript的滥用。关于范围较小或逻辑很明晰的RIA使用,仅利用ActionScript办法就能够满意年夜部分请求,而关于一个较年夜的软件项目大概对照庞大的RIA使用,必需对ActionScript类举行计划。
ActoinScript是面向工具的程序计划言语,而类是面向工具程序计划言语的精华。面向工具的特征(封装、承继和多态)都被ActionScript很好地撑持。利用ActionScript举行开辟时,可使用一切的面向工具特征。
在SDK的功效撑持上供应了完美的API,利用ActionScript类能够完成体系的一切逻辑操纵和数据模子处置,完成对体系的分层开辟,同时也用于举行企业级模块的构建;关于界面开辟,可使用ActionScript类对现有的MXML类承继并举行定制化开辟,也能够在组件操纵上完成自界说的功效。
ActionScript利用包(Package)对类举行构造,界说一个包的同时,相称于隐含划定了一个定名空间,能够很好地办理类的构造成绩。分歧的包下能够安排同名的ActionScript类,在分歧的包中挪用类必要用Import语句来导进,因而能够很好地制止同名类的抵触成绩。关于类文件在盘算机中的物理地位——必要用与包称号绝对应的文件夹名来寄存,如net.airdev.book如许一个包下的类文件,应当在netairdevook如许的文件夹路径之下举行保留,包布局与文件布局完整对应。有Java开辟背景的开辟者对包一定不会生疏,ActionScript中包的利用与Java中是基础分歧的。
上面对一个以Flex完成的四则运算盘算器程序举行布局计划,并在程序中完成一个自界说组件,程序计划类图如.5所示。
.5Calculator程序计划类图
我们把MXML文件视为一个把持体现层的类Class4MXML,在MXML中要创建输出框、盘算办法选择按钮和盘算按钮,个中盘算按钮利用一个承继自Button的自界说组件MyButton。
程序必要卖力盘算的功效模块,因而我们计划一个Calculator类,这个类供应一个盘算办法run,该办法必要三个参数,两个操纵数arg1、arg2和一个盘算办法标志method。
代码文件夹布局以下:
C:user est.mxml
C:usermyControlsCalculator.as
C:usermyControlsMyButton.as
示例1.3a盘算器使用程序的MXML代码
<!--Test.mxml-->
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx=http://www.adobe.com/2006/mxmlxmlns:cmp="myControls.*">
<!--声明一个名为cmp的定名空间,以此来援用myControls包中的自界说组件-->
<mx:Script>
<![CDATA[
importmyControls.*;
//经由过程import命令导进myControls包中的类
varcalcul=newCalculator();
//实例化一个Calculator类
]]>
</mx:Script>
<mx:Paneltitle="FlexActionScriptTest"paddingTop="10"paddingBottom="10"paddingLeft="10"paddingRight="10"layout="absolute"height="180"width="304">
<!--把Panel的layout属性设置为absolute,从而对这个Panel上的组件举行坐标定位-->
<mx:Labelid="ta1"text="CalculatorTest"fontWeight="bold"fontSize="16"width="250"height="30"x="10"y="10"/>
<mx:TextInputid="n1"width="77"x="10"y="46"/>
<mx:TextInputid="n2"width="77"x="198"y="46"/>
<mx:TextInputid="res"width="77"x="74"y="99"enabled="false"/>
<!--设置输出和输入所必要的TextInput组件-->
<cmp:MyButtonclick="res.text=calcul.run(Number(n1.text),Number(n2.text),tp.value).toString()"x="196.5"y="99"/>
<!--设置一个自界说组件MyButton,并设定该组件的单击事务实行calc1的run办法,并将了局转换成String范例,显现在id为res的TexInput组件上-->
<mx:Labelx="47.5"y="101"text="="width="18"/>
<mx:ComboBoxid="tp"x="112"y="46"width="60">
<mx:dataProvider>
<mx:Array>
<mx:Objectlabel="+"data="0"/>
<mx:Objectlabel="-"data="1"/>
<mx:Objectlabel="*"data="2"/>
<mx:Objectlabel="/"data="3"/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<!--设置可选择的操纵符,撑持四则运算-->
</mx:Panel>
</mx:Application>
这个MXML的编写办法与后面的示例基础分歧,只是增添了定名空间以撑持自界说组件Mybutton的利用,并对各个组件的定位举行了一些坐标把持。
示例1.3b盘算器使用程序的ActionScript代码
//Calculator.as
packagemyControls{
//包声明
publicclassCalculator{
//类声明
publicfunctionrun(a:Number,b:Number,c:Number):Number{
//函数声明。变量a和b为操纵数,变量c为盘算范例
varres:Number;
//盘算了局经由过程res变量前往
if(c==0){
res=a+b;
}
elseif(c==1){
res=a-b;
}
elseif(c==2){
res=a*b;
}
elseif(c==3){
res=a/b;
}
returnres;
}
}
}
//MyButton.as
packagemyControls{
importmx.controls.Button;
importflash.events.MouseEvent;
importmx.controls.Label;
publicclassMyButtonextendsButton{
publicfunctionMyButton(){
this.label="GO";
this.setActualSize(100,30);
}
}
}
示例1.3的程序由以上3个程叙文件构成,text.mxml为体现层,在MXML初始化时创立了一个Calculator的实例;Calculator.as和MyButton.as分离对应两个功效模子,Calculator类供应了一个盘算器办法,而MyButton类则承继了MXML的尺度组件Button类,本程序中的自界说组件仅仅是在组件机关办法中完成了对label属性和定位的初始化,在实践使用过程当中,对组件类的承继能够举行更庞大的定制化操纵。
程序运转效果如.6所示。
.6Calculator程序的运转效果
1.5Flex的事务机制
事务处置是GUI开辟的主要构成部分,早在传统的Client/Server开辟中,事务驱动的开辟法就已是GUI开辟的支流。
1.5.1Flex事务处置
软件开辟者在开辟过程当中只存眷某个组件呼应某个事务后所做的操纵,即被驱动的操纵,而不必像布局化线形开辟那样往存眷驱动事务的举措。呼应特定事务的组件叫办事件监听器(EventListener)。
一个用于交互的GUI组件会被事后界说它大概碰到的事务,软件开辟者便可依据开辟需求来编写事务监听器,呼应部分或全体的事务触发,.7展现了这个触发历程。作为开辟者,我们起首必要懂得特定的GUI交互组件撑持哪些事务,以后即可以依据需求写出响应的事务监听器。
.7GUI体系中的事务处置流程
在示例1.2和示例1.3中,我们已利用到了Flex的事务机制,Flex开辟基于ActionScipt工具,事务已作为Flex可视化组件的属性。我们能够在MXML中间接为组件的事务属性设定事务监听办法大概代码。
在示例1.2中,我们设定<mx:Button>的单击事务(click)属性为click=“changeText()”,并写了一个changeText办法作为单击事务的监听器。如许,当单击Button的时分,就会触发Button的click事务,changeText办法将被挪用。而在示例1.3中,我们把ActionScript剧本间接复制给了click,如许全部剧本将作为一个事务监听器。Flex可视化组件开辟的事务处置体例与HTML页面开辟中的JavaScript剧本利用长短常类似的。
假如我们必要在事务监听器中处置事务源,即发生事务的组件,那末必要为事务监听的办法传送参数event,比方能够对示例1.2中事务监听办法的界说和<mx:Button>的事务属性做一些修正。
(1)事务监听办法界说的修正:
publicfunctionchangeText(event:Event):void
(2)Button事务属性的修正:
<mx:Buttonlabel="点击这里"fontSize="16"click="changeText(event)"/>
在Button事务属性的修正中,event作为一个关头字来利用,而非自界说变量,因而我们能够在标签中间接利用event来创立以后组件所触发的事务工具。
ActionScript类Event构建的时分会把事务源组件作为一个成员属性,如许在事务监听器中,我们能够经由过程event来操纵事务源组件。
在MXML中设定事务属性值的体例叫办事件监听器内建。这类体例合适使用在复杂的事务处置上。假如碰到必要多个事务监听器团结利用等庞大的事务处置情形,则必要使用Flex的事务注册。
1.5.2Flex事务监听器注册
Flex的可视化组件工具都承继了EventDispatcher类,因而它们都撑持事务注册办法addEventListener。该办法的界说以下:
addEventListener(type:String,listener:Function,
useCapture:Boolean=false,priority:int=0,
useWeakReference:Boolean=false):void
经由过程addEventListener办法,我们能够为可视化组件注册一个事务监听器。type参数标明事务监听器的范例,如鼠标单击事务(MouseEvent.CLICK);listener参数是事务监听器的详细办法;useCapture参数设定是不是在事务的捕捉阶段就举行呼应;priority参数设定事务监听器的优先级;useWeakReference参数设定事务监听器办法是不是为弱范例,一个强范例的事务监听器办法是不会被Flex举行主动渣滓搜集的。
先前我们提到的事务监听器内建体例,实践上已创立了一个默许的事务监听器办法,并把ActionScript剧本的内容写进办法,但这类办法的最年夜不敷就是没法操纵一个以上的事务监听器。
而利用addEventListener办法注册事务监听器的体例,我们能够把持事务呼应的捕捉体例和优先级;当我们已增加的事务监听器在程序的运转过程当中必要作废失落的时分,我们能够经由过程removeEventListener办法来完成。而这些功效在事务监听器内建体例中不会被撑持,来由也很了然:内建的事务监听器都是匿名的,我们没法援用到匿名监听器的监听实体办法。
因而,在利用Flex事务机制的时分,仍是应当只管选用事务监听器注册的体例来构建事务处置,这将为事务交互处置带来更多的可扩大性。
1.6利用AdobeFlexBuilder
固然,我们经由过程UltraEdit、EditPlus乃至记事本都能够完成MXML及ActionScript的编写事情,但是作为一个侧重于界面计划的程序计划言语,成熟的集成开辟情况(IntegratedDevelopEnvironment,IDE)是必不成少的,在处置大批的界面元素和对程序的编译毛病排查时,有一个好的IDE更能够到达事半功倍的效果。
Adobe在公布Flex的同时就公布了一个高效的IDE——FlexBuilder,对Flex的开辟供应了壮大的撑持。必要注重的是,FlexBuilder是一款贸易的IDE,从网高低载能够取得30天的收费试用期,以后必要付费才干利用。
FlexBuilder3属于Flex3产物集,是一款基于Eclipse的IDE,经由过程FlexBuilder3能够高效地完成MXML、ActionScript和FlexCharting的计划和编写,疾速创立各类Flex项目及使用程序。
不但云云,FlexBuilder3还撑持Adobe的新一代RIA开辟平台AdobeIntegratedRuntime,即AIR。AIR是基于桌面体系的RIA开辟手艺和运转时情况,完成了Web使用的桌面化。经由过程AIR,我们可使用现有的Web开辟手艺开辟出界面效果加倍壮丽多彩的桌面使用程序,如Flash/Flex/ActionScript、HTML/CSS/JavaScript、Ajax等手艺都能够在AIR下发扬感化。FlexBuilder3供应了AIR的开辟,其开辟体例和特性与Flex开辟是完整分歧的。
关于AIR开辟的具体先容可浏览本书的第四部分。
FlexBuilder3撑持Windows和Macintosh体系,同时因为基于Eclipse,FlexBuilder3的安装版天职为自力安装和插件安装两种。在此,保举已装有Eclipse的开辟者利用插件安装的体例举行安装,一方面制止了Eclipse及JRE的反复安装,另外一方面是撑持JavaEE的企业级开辟和Flex开辟更好的分离。
在安装插件版本的时分注重设定准确的Eclipse路径地位,以包管FlexBuilder3的准确运转,安装历程如.8所示。在“PleaseChooseanExistingEclipseFolder:”下方的文本框中填写Eclipse的路径。
.8插件版FlexBuilder3的安装历程
Eclipse是一款壮大的集成开辟情况和模子平台,Eclipse初期只能撑持Java言语的开辟,厥后C/C++、UML、Ruby等言语都在Eclipse平台的基本上完成了定制的集成开辟情况,Adobe的Flex也是一样。FlexBuilder基于Eclipse,因而有Eclipse开辟履历的开辟者上手十分简单,而关于老手来讲FlexBuilder带来的是标准和普遍使用的壮大集成开辟情况平台,熟习FlexBuilder后对Eclipse平台也能有所懂得。
1.6.1FlexBuilder体系需求
相对纯真的FlexSDK,FlexBuilder对体系的设置请求更高一些,特别是对处置器和内存的需求增年夜。
(1)FlexBuilder3(包括SDK和Charting组件)Windows平台需求以下。
- 处置器:IntelPentium4处置器
- 内存需求:1GBRAM
- 硬盘需求:500MB可用硬盘空间
- 操纵体系:MicrosoftWindowsXPwithServicePack2,WindowsXPProfessional,Windows2000Server,Windows2000Professional或WindowsServer2003
- Java平台:JavaVirtualMachine:SunJRE1.4.2,SunJRE1.5,IBMJRE1.5
- Eclipse:Eclipse3.1~3.2
(2)FlexBuilder3(包括SDK和Charting组件)Macintosh平台需求以下。
- 处置器:1.25GHzPowerPCG4~G5或Intel系列处置器
- 内存需求:1GB
- 硬盘需求:500MB可用硬盘空间
- 操纵体系:MacOSXv.10.4.7or10.4.8
- Java平台:JavaVirtualMachine:SunJRE1.5
- Eclipse:Eclipse3.2(仅撑持插件体例安装)
从上述需求能够看出,要利用FlexBuilder,必需有Java平台的撑持,利用插件体例安装则必要Eclipse,因而安装历程较罕见的IDE要庞大一些,必要注重Java和Eclipse的版本婚配等成绩,保举利用Windows平台开辟,利用JavaSE1.5版本和Eclipse3.2版本。
Java和Eclipse的资本下载,能够从以下网站取得。
- SunJava官方网站:http://java.sun.com/
- Eclipse官方网站:http://www.eclipse.org/
1.6.2利用FlexBuilder举行开辟
FlexBuilder的次要界面都相沿了Eclipse的模子。在FlexBuilder3中,我们能够新建一个Flex项目,如.9所示。
.9新建Flex项目
临时可使用默许体例创立Flex项目,将其定名为“HellowBuilder”,确认以后就进进了Flex的开辟情况。如.10所示,这是一个FlexDevelop视图的Eclipse界面,创立了HellowBuilder项目,FlexBuilder主动创立了一个HellowBuilder.mxml文件,并到场了MXML的基础代码。当我们完成程序计划时,只需右击导航器中的mxml文件并在Runas菜单条目当选择FlexApplication命令便可运转程序,在Debugas菜单条目当选择FlexApplication命令则能够举行程序的跟踪调试。各功效地区的感化以下。
- 菜单栏:IDE撑持的一切开辟功效菜单。
- 工具栏:菜单栏中某些经常使用条目标快速体例。
- 导航器:能够依照分歧形式扫瞄以后项目标文件布局。
- 编纂区:代码编写地区。
- 定制视图:能够显现把持台、搜刮窗口、调试窗口等信息。
- 纲目:显现以后代码的构造布局。
.10AdobeFlexBuilder3的界面(点击缩小)
1.6.3FlexBuilder开辟特性
FlexBuilder关于MXML界面计划的撑持是相称壮大的,撑持“所见即所得”的开辟体例。MXML自己就是由标签言语设置而成,因而我们关于MXML的操纵体例更合适于设置和计划。同时,在MXML中我们会经常举行挪用ActionScript剧本、挪用自界说组件、做数据绑定等操纵,FlexBuilder对这些方面都供应了完美的撑持。
FlexBuilder关于MXML的开辟供应了两种形式。在FlexBuilder的编纂区上方能够看到Source和Design按钮。Source为代码编纂形式,我们能够手工誊写MXML代码,完成ActionScript的编写;Design为UI计划形式。当我们切换到UI计划形态后,即切换到UI计划界面,如.11所示。各功效地区的感化以下。
1.UI计划器
经由过程所见即所得的体例计划图形界面。
2.组件工具栏
能够从当选取各类Flex可视化组件,放到UI计划器中。
.11FlexBuilder的计划界面(点击缩小)
3.属性编纂区
编纂选定Flex可视化组件的各类属性。
计划界面的利用十分复杂,我们能够从组件工具栏里看到一切可用的界面或数据组件,能够间接拖放到UI计划器,并经由过程属性编纂区来设定组件的属性。同时在开辟过程当中在编纂形态和计划形态天真切换。
我们转头看看第一个HelloWorld示例,假如利用FlexBuilder将怎样完成。
- 切换FlexBuilder的开辟形态为“Design”。
- 增加一个Panel组件到UI计划器,然后在属性编纂区,设定Title的属性为“FlexMXMLTest”。
- 增加一个Label组件到Panel组件(拖放过程当中会有蓝色直线定位提醒),在属性编纂区,设定Text属性为“HelloWorld.天下,你好!”。
如.12所示,我们经由过程复杂的鼠标拖放操纵就完成了这个HelloWorld程序。这类“所见即所得”的开辟体例能年夜幅度地进步界面开辟的效力。
另外一方面,FlexBuilder对ActionScript也供应了壮大的撑持。FlexBuilder中包括着完全的FlexSDK,因而对ActionScript的各项特征撑持都十分完美,而且与MXML的分离也十分严密。
在处置包布局时,能够间接在Flex项面前目今创立对应的文件夹,完成对Flex程序中ActionScript类的构造。
比方用FlexBuilder编纂示例Calculator的程序,能够间接在Calculator项面前目今创立myControls文件夹,并打包两个ActionScript类文件Calculator.as和MyButton.as。在编码过程当中,FlexBuilder撑持ActionScript的疾速开辟索引,.13中MyButton承继了Button类,即MyButton可使用一切的Button操纵。因而FlexBuilder会索引出Button的一切属性和办法,进步了编码的效力。
.12利用FlexBuilder计划完成HelloWorld(点击缩小)
.13利用FlexBuilder3编写ActionScript
FlexBuilder因循了Eclipse系统,年夜多半Eclipse撑持的开辟设置、快速键、调试把持、代码重构等方面的上风都被FlexBuilder所撑持。FlexBuilder一样撑持版本把持软件(CVS),我们能够把MXML代码和ActionScript代码都经由过程CVS举行办理,因而经由过程FlexBuilder完成年夜型项目标开辟能够到达事半功倍的效果。
1.7在Flex中操纵XML
XML(eXtensibleMarkupLanguage,可扩大标志言语)经常使用于数据形貌、数据封装和数据布局化处置。XML供应了复杂和易读的数据构造体例,能够加倍便利和尺度地对数据举行读取、传输和操纵。Flex手艺中利用的MXML也是基于XML的一种标签标准。
1.7.1XML在Flex中的使用
在Flex中处置XML数据必要了解一些基础的XML观点。在本书中会触及到的XML观点以下。
1.元素
元素是XML数据中的一个数据条目,经由过程一对标签和标签内的子元素界说。XML的元素中能够包括文本数据或其他的元素,也能够为空。
2.空元素
空元素是不包括子元素的XML元素。一般XML的空元素能够写成自关闭的格局,比方<emptyitem/>。
3.文档
文档是一个自力的XML布局。一个XML文档能够包括恣意数目的XML元素,可是必需只包括独一的根元素。
4.节点
节点和元素的意义不异。
5.属性
属性是对标签内的一个XML元素条目标定名。经由过程属性名=“值”的格局举行界说。能够看做是位于元素外部的子元素。
Flex为处置XML供应了需要的撑持,ActionScript类XML和XMLList用于创建Flex的XML工具。XML类用于形貌单一的XML工具,如XML的一个节点数据和这个节点的一切Attribute值和上级节点信息;XMLList类用于形貌一组XML元素,这组元素必要有不异的XML标签,经由过程XMLList能够天真地对XML元素汇合举行增加、删除、修正和查询操纵。
经由过程MXML我们可使用<mx:XML>标签和<mx:XMLList>标签机关静态的XML布局。ActionScript则能够对MXML的静态XML工具或内部文档举行各类数据处置操纵,关于年夜部分XML数据的处置操纵都是经由过程ActionScript完成。
一般ActionScript能够完成以下关于XML的操纵:
- 构建XML文档,增加XML元素和值。
- 会见XML元素,属性(Attribute)和值。
- 查询XML元素。
- 遍历XML数据的汇合。
- 举行XML范例和String范例的互相转换。
- 操纵XML定名空间。
- 读取内部的XML文件。
1.7.2经由过程E4X处置XML
我们已懂得到ActionScript是基于尺度的ECMAScript言语标准构建的,因而也因循了ECMAScript处置XML的API子集ECMAScriptforXML,简称E4X。E4X包括以下范例用于处置XML:XML、XMLList、QName和Namespace。
1.创立E4X的XML工具
E4X关于XML的撑持遵守着简便性、高聚合性和易用性的计划准绳。因而利用E4X并没有很高的难度。起首我们来看看怎样用E4X创立XML范例:
varxmlData:XML=
<product>
<itemid="0001">
<name>Thinkpad</name>
<price>24000</price>
</item>
<itemid="0001">
<name>Thinkpad</name>
<price>24000</price>
</item>
</product>
上述代码创立了一个变量名为xmlData的E4X的XML工具。构建体例长短常复杂的,和界说一个复杂范例的变量没有任何区分,间接把XML的内容按按次写在等号右侧便可,E4X会在编译ActionScript时对XML的正当性举行考证,分歧法的XML会在编译过程当中报错。
2.操纵E4X的XML范例
E4X的XML工具形貌了XML的数据布局、节点、文本节点、属性/属性值、操纵指令、正文信息等外容。不包括操纵指令和正文信息的XML工具被界说为复杂XML工具,在构建XML工具时,能够经由过程设定以下语句来完成复杂工具的创立:
XML.ignoreComments=true;
XML.ignoreProcessingInstructions=true;
包括操纵指令和正文信息的XML工具被界说为庞大XML工具,能够经由过程comments()办法和processingInstructions()办法来处置正文和操纵指令内容。
包含上述两个属性,E4X的XML工具共包括5个静态属性,用于初始化设定或定制操纵XML的详细格局。属性枚举以下。
- ignoreComments:
该属性用于指定是不是处置XML正文。
- ignoreProcessingInstructions:
该属性用于指定是不是处置XML操纵指令。
- ignoreWhitespace:
该属性用于指定是不是处置XML中的空格符。
- prettyIndent:
该属性用于指定对toString()办法是不是举行得当缩进。
- prettyPrinting:
该属性用于指定对toXMLString()办法是不是举行得当缩进。
XML工具布局的剖析和处置经由过程E4X的办法来完成。E4X为XML工具供应了十分完美的办法撑持。经由过程children()、elements()、parent()办法能够援用到XML工具当中的XMLList工具。本书中对E4X的详细API不具体解说,读者若有必要可参考ECMA357用户手册。
3.操纵E4X的XMLList范例
XMLList范例标明这是一个具有不异布局的XML元素汇合。XMLList工具一样撑持children()、elements()、parent()等针对高低级节点的索引。同时,XMLList工具还撑持attribute()、attributes()办法来操纵本身的属性信息。
Flash是一个非常优秀的矢量动画制作软件,它以流式控制技术和矢量技术为核心,制作的动画具有短小精悍的特点,所以被广泛应用于网页动画的设计中,以成为当前网页动画设计最为流行的软件之一。 |