分享
跟我StepByStep学FLEX教程------王一松.pdf
下载文档

ID:3347804

大小:4.71MB

页数:170页

格式:PDF

时间:2024-03-02

收藏 分享赚钱
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,汇文网负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
网站客服:3074922707
StepByStep FLEX 教程 王一松
跟我StepByStep学FLEX教程-王一松作者:wangyisong http:/跟我StepByStep学FLEX教程以DEMO为主线,从初级应用到高级应用的系列讲解http:/-做最棒的软件开发交流社区第 1/170 页本书由JavaEye提供的电子书DIY功能自动生成于 2009-09-15目 录1.FLEX1.1 跟我StepByStep学FLEX教程-概述(原创).51.2 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创).71.3 跟我StepByStep学FLEX教程-Hello World(原创).121.4 跟我StepByStep学FLEX教程-可视化页面组件(原创).211.5 跟我StepByStep学FLEX教程-ActionScript3(原创).261.6 跟我StepByStep学FLEX教程-Demo1之开始(原创).281.7 跟我StepByStep学FLEX教程-Demo2之类(原创).331.8 跟我StepByStep学FLEX教程-Demo3之数据类型.361.9 跟我StepByStep学FLEX教程-Demo4之进度条数据绑定 .391.10 跟我StepByStep学FLEX教程-Demo5之事件Event .431.11 跟我StepByStep学FLEX教程-Event事件机制 .461.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件.481.13 跟我StepByStep学FLEX教程-自定义事件&自定义组件 .551.14 跟我StepByStep学FLEX教程-Demo7之页面跳转.571.15 跟我StepByStep学FLEX教程-manager .631.16 跟我StepByStep学FLEX教程-Demo8之样式和主题.651.17 跟我StepByStep学FLEX教程-自定义主题 .691.18 跟我StepByStep学FLEX教程-FlexUnit4 alpha 1.0 5.4发布.721.19 跟我StepByStep学FLEX教程-Demo9之FlexUnit4.75http:/第 2/170 页1.20 跟我StepByStep学FLEX教程-Demo10之DataGrid .811.21 跟我StepByStep学FLEX教程-Flex和Java通信之BlazeDS.831.22 跟我StepByStep学FLEX教程-Flex和Java通信之开发方式和工具准备 .851.23 跟我StepByStep学FLEX教程-Flex+LCDS(BlazeDS)+Java开发.881.24 跟我StepByStep学FLEX教程-Demo11之HelloJavaFlex .1011.25 跟我StepByStep学FLEX教程-Java&Flex之RemoteObject.1041.26 跟我StepByStep学FLEX教程-AMF .1061.27 跟我StepByStep学FLEX教程-Demo12之FLEX和Spring整合 .1081.28 跟我StepByStep学FLEX教程-访问数据库之JDBCTemplate .1151.29 跟我StepByStep学FLEX教程-访问数据库之hsqldb .1221.30 跟我StepByStep学FLEX教程-Demo13之Flex访问数据库 .1261.31 跟我StepByStep学FLEX教程-Flex之Hibernate .1381.32 跟我StepByStep学FLEX教程-Demo14Flex+Spring+Hibernate整合 .1401.33 跟我StepByStep学FLEX教程-Caringorm之简介 .1431.34 跟我StepByStep学FLEX教程-MVC .1471.35 跟我StepByStep学FLEX教程-Cairngorm之组成部分.1501.36 跟我StepByStep学FLEX教程-Cairngorm之环境准备.1531.37 跟我StepByStep学FLEX教程-Demo15之Cairngorm .1561.38 跟我StepByStep学FLEX教程-Cairngorm之代码结构.1601.39 跟我StepByStep学FLEX教程-Cairngorm之Model Locator .1621.40 跟我StepByStep学FLEX教程-Cairngorm之核心控制流程 .1641.41 跟我StepByStep学FLEX教程-Cairngorm之Command部分 .167http:/第 3/170 页1.42 跟我StepByStep学FLEX教程-版权声明 .1681.43 跟我StepByStep学FLEX教程-贵在坚持 .169http:/第 4/170 页1.1 跟我StepByStep学FLEX教程-概述(原创)发表时间:2009-03-25跟我StepByStep学FLEX教程-概述说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。学习FLEX,必须了解什么是RIA。RIA,Rich Internet Application,也就是富互联网应用。这个富字是重点。传统的HTML页面元素非常有限,开发人员在页面刷新和相应速度都受到较大的困扰。随着3G的到来,网络带宽将得到非常大的改善,富互联网应用的时代也越来越近了,人们就能通过浏览器体验到以前C/S架构的桌面级应用。RIA在页面的表现力和交互力都大大超过了传统的HTML页面。目前RIA应用已经越来越流行了,相信不久的将来,RIA将很快成为互联网应用的主流。可以访问在线图片处理工具网站http:/ Flash Player一定不陌生,现在版本是10,您访问很多网页的时候,都要求您安装这个软件,否则您不能正常浏览,据Adobe公司称,目前98%左右的电脑都安装了FlashPlayer。很多初次接触的读者很可能说,那不就是Flash,您的理解也是对的。Adobe公司有两款开发应用产品,一款是Flash Professional,一款是FLEX。Flash Professional主要是面向设计者的工具,一般单兵作战就可以了;而Flex是面向开发者的工具,需要团队合作,专业性更高。http:/1.1 跟我StepByStep学FLEX教程-概述(原创)第 5/170 页说到FLEX,就不得不提及以下两个重要概念:MXML和ActionScript,这是flex开发的两种语言。这里简单介绍一下,在以后的文章中结合实际用例更容易理解。MXML:一种XML标识语言,用来进行组件布局,数据绑定等,和HTML语言有点类似。ActionScript:刚开始时是FLASH的脚本语言,到了3.0,已经完全面向对象了,如果您用过JAVA或者C+,那么这个对您来说就一点不是问题了。语法个人感觉像Delphi和JAVA的综合体:)纯属个人感觉哦FLEX技术的最新应用:呵呵,大家可以看到FLEX技术的广泛应用了,相信以后会更加的广泛。http:/1.1 跟我StepByStep学FLEX教程-概述(原创)第 6/170 页1.2 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创)发表时间:2009-03-25跟我StepByStep学FLEX教程-Flex3及Flex Builder安装说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。工欲善其事,必先利其器。所以要对Flex的开发工具熟悉以及安装。Flex3,是Adobe公司开发RIA工具产品。包括以下几个部分:Flex3 SDK是Flex产品最基础也是必需的组件。包括编译器、Flex类库以及调试工具。Flex Builder 3是基于eclipse的集成开发环境。支持可视化界面以及MXML和ActionScript编写。开发工具友好,很容易上手,如果读者用过eclipse,那就更加容易了:)LiveCycle Enterprise Suite是Flex企业及开发部署套件,可以使Flex部署到JavaEE服务器上。接下来我们要重点介绍Flex Builder 3,因为要用其进行开发。访问 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创)第 7/170 页下载Flex Builder3,60天的试用期限,如果商用,请务必购买正版。作者在这儿猜测一下,这个工具在不久的将来或许会免费或者开源,呵呵,纯属个人观点。http:/1.2 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创)第 8/170 页安装开始.安装过程中.http:/1.2 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创)第 9/170 页安装过程大约需要几分钟,跟您的机器本身有关系。安装完了,启动Flex Builder3启动页面http:/1.2 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创)第 10/170 页Flex Builder3的布局和eclipse是一模一样,只要读者对eclipse熟悉的话,就没有任何问题了。工具安装完了,下一讲是什么呢?呵呵,惯例-HelloWorldhttp:/1.2 跟我StepByStep学FLEX教程-Flex3及Flex Builder安装(原创)第 11/170 页1.3 跟我StepByStep学FLEX教程-Hello World(原创)发表时间:2009-03-25跟我StepByStep学FLEX教程-Hello World说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。这一讲必须的:)这儿不过多解释语法或者原理啥的,仅仅是做一个最简单的Hello World Demo,目的就是让读者尽快建立兴趣,及早动手,有信心学习FLEX:)下边就开始了:New Project,如下:http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 12/170 页工程命名:http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 13/170 页这儿说明一点Application Type使用默认的Web Application,另一种Desktop Application,是运行在Adobe公司AIR产品的桌面应用,大家可以在网络上了解一下,这儿所讲的FLEX就是Web应用。完成New Project后,出现如下界面:点击Design,出现如下界面:http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 14/170 页哈哈,是不是觉得可视化了然后直接选择如下界面的label放到背景板上http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 15/170 页或者直接在Source编写MXML脚本:效果如下:字体12以上中文才看得清晰一点:可以调整字体的颜色大小以及背景色(可以渐变):http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 16/170 页可以使用以下两种方式运行编写的程序:http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 17/170 页http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 18/170 页运行效果如下:http:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 19/170 页实际效果比图片好看很多,是不是很cool!因为转换为JPG格式文件,损失掉很多色彩,您可以自己编写运行一下就知道了。是不是很简单呢?呵呵记住一点哦,你的客户端一定要安装Adobe Flash Player 9 or 10,否则就显示不了:)这一讲仅仅只是告诉你怎么去编写,没有具体讲解,目的是让您尽快动手,尽快建立起兴趣。这个DEMO,只是界面的展示,没有数据交互什么的,在以后几讲中暂时也都是以页面为主来讲解MXML以及ActionScript的语法。有这些基础了,再讲那些有数据交互的真正应用程序,呵呵,Step By Stephttp:/1.3 跟我StepByStep学FLEX教程-Hello World(原创)第 20/170 页1.4 跟我StepByStep学FLEX教程-可视化页面组件(原创)发表时间:2009-03-26跟我StepByStep学FLEX教程-可视化页面组件(原创)说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。这一讲,主要讲FLEX的可视化页面组件,这一讲仅简单介绍一下,主要是让大家先有个直观的认识。如果您以前用过VB或者Delphi等编过界面的话,那么您将对FLEX的web应用界面组件就会相当熟悉,而且更能体会到什么是富互联网应用,呵呵。如图所示:其中可以自定义字扩展页面组件,放在Custom中,Flex Builder自身提供的组建主要是Controls、Layout、Navigators以及Charts四大类。具体如下,是不是很C/S:)http:/1.4 跟我StepByStep学FLEX教程-可视化页面组件(原创)第 21/170 页http:/1.4 跟我StepByStep学FLEX教程-可视化页面组件(原创)第 22/170 页页面组件的属性栏:http:/1.4 跟我StepByStep学FLEX教程-可视化页面组件(原创)第 23/170 页一些重要的可视化页面组件以及本身的事件等等以后会进行具体介绍。向读者推荐官方网站的例子,您学习更加方便一些http:/ 跟我StepByStep学FLEX教程-可视化页面组件(原创)第 24/170 页Okay,下一讲ActionScript 3简称AS3的语法进行讲解,同样的,也是让大家建立认知,具体的使用在随后结合具体实例进行讲解。因为这个语法对于Flex的开发相当重要。只要您用过JAVA、C+或者Delphi,也就是面向对象编过码,就没有任何问题,如果你是初学者,同样可以迅速掌握。http:/1.4 跟我StepByStep学FLEX教程-可视化页面组件(原创)第 25/170 页1.5 跟我StepByStep学FLEX教程-ActionScript3(原创)发表时间:2009-03-30跟我StepByStep学FLEX教程-ActionScript3(原创)说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。ActionScript3是面向对象编程的一种语言,是FLEX(或者也可以说是Flash)发展历史的一个重要里程碑。ActionScript3也是为了扩展RIA应用开发构建WEB富客户端体验的一种语言。这儿提及一下ActionScript的历史,这样读者会明白为啥我把3标成红色了:)ActionScript(以下简称AS),AS1是和Flash5一起发布的。是一种基于ECMAScript的编程语言。AS2是和Flash7一起发布的,添加了一些新类库和API。AS3是和Flash9一起发布的,也就是这个版本,AS真正变成了一个强大的面向对象的语言。这一讲,不会对AS3的语法进行详细介绍,主要是整体的认知建立。AS3主要包括2部分:1、核心语言。用于定义变成语言的结构,如声明、循环、类型和条件等等;2、API。定义Flash Player功能的类组成。官方AS3学习资料网站http:/ 跟我StepByStep学FLEX教程-ActionScript3(原创)第 26/170 页所以不再介绍具体的AS3的语法,如果读者用过面向对象的语言,这个非常好学。如果是个初学者,只要懂面向对象,也不是问题,如果不懂,建议读者需要了解面向对象编程,不是本教程关注的,因此不在此描述。到这儿,大家对FLEX已经有了一个整体的概念上的认知。后边几讲将结合具体的实例,让读者在实例中体会MXML和AS3的语法,同样对FLEX有一个更加直接的认识。http:/1.5 跟我StepByStep学FLEX教程-ActionScript3(原创)第 27/170 页1.6 跟我StepByStep学FLEX教程-Demo1之开始(原创)发表时间:2009-03-30跟我StepByStep学FLEX教程-Demo1之开始(原创)说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。开始真正的做一个有AS3语法的Demo,这个Demo作者没想好主题定义为什么,所以就叫开始吧。由于是文字描述,所以可能会有一些地方描述的不如讲课方式更清楚(作者尽量哦),如果读者有什么不明白的,可以发表评论,作者尽量做到一一回复,以后亦如此。首先使用可视化组件编写如下界面,命名各控件名称以及事件名称:然后编写代码,如下:!CDATA/初始化internal function InitLs():voidvar srcArr:Array=new Array();http:/1.6 跟我StepByStep学FLEX教程-Demo1之开始(原创)第 28/170 页srcArr.push(China Soft);srcArr.unshift(BOCO);srcArr.unshift(PCCW);SrcLs.dataProvider=srcArr;var desArr:Array=new Array(PM,PL,SE);DesLs.dataProvider=desArr;/循环初始化internal function ForInitLs():voidvar cycleArr:Array=new Array();for(var i:Number=0;i http:/1.6 跟我StepByStep学FLEX教程-Demo1之开始(原创)第 29/170 页这段代码简单分析一下(如有没有讲到还不明白的可以留评论,作者尽量会一一回复):定义方法:如果读者用过Delphi和Java的话,你会感觉就是这两个的综合体,呵呵返回值不是在前边,而是在后边,方法前边有function的显示定义internal function ForInitLs():voidvar cycleArr:Array=new Array();/变量前边有var,Delphi是吧?for(var i:Number=0;i 3;i+)/for循环这个大家很熟悉吧cycleArr.push(TestLs+i);初始化这个Demo是使用按钮触发的,当然可以在页面的初始化creationComplete事件中触发,这儿用按钮主要是为了让这个Demo更加直观一点。拖拽效果主要是让读者感受到可视化组件的功能,很不错吧,而且很简单。在这个拖拽方法中有以下这个方法:http:/1.6 跟我StepByStep学FLEX教程-Demo1之开始(原创)第 30/170 页trace(testDebStr);/在flash环境下输出调试信息;这个方法需要在调试环境中运行才有效果,而且需要安装Flash Player,如果没有安装,会提示如下信息:然后下载下图的蓝色部分,安装即可:然后在调试环境下运行,控制台就会出现调试信息:很自然的,读者也可以将调试信息输出到自定义页面的文本框中,这儿就不具体介绍了,很简单可以实现。DEMO运行效果如下,读者可以按照代码编写一下,运行一下,就会对FLEX的兴趣越来越大了http:/1.6 跟我StepByStep学FLEX教程-Demo1之开始(原创)第 31/170 页从这个Demo开始,将在后边几讲开始结合DEMO主要对AS3的重点语法以及MXML的一些知识进行讲解,为后边的高级应用打下坚实的基础。StepByStep,呵呵http:/1.6 跟我StepByStep学FLEX教程-Demo1之开始(原创)第 32/170 页1.7 跟我StepByStep学FLEX教程-Demo2之类(原创)发表时间:2009-04-16跟我StepByStep学FLEX教程-Demo2之类(原创)说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。最近由于工作关系,没有及时更新,请各位读者见谅。这个Demo2主要讲AS3的类。如何创建AS3的类?如下图:http:/1.7 跟我StepByStep学FLEX教程-Demo2之类(原创)第 33/170 页父类:package com.objpublic class FlMessagepublic function FlMessage()子类:http:/1.7 跟我StepByStep学FLEX教程-Demo2之类(原创)第 34/170 页package com.objpublic class FlMyMessage extends FlMessagepublic function FlMyMessage()super();引用创建的类很简单:import com.obj.FlMessage;这样就可以使用这个类创建对象了。这儿着重强调一下:AS3的类的构造方法只能有一个,默认的没有参数的构造方法。如果需要参数的构造方法,那么原来默认的构造方法必须删除,否则会报如下错误:这个Demo2就这么简单。http:/1.7 跟我StepByStep学FLEX教程-Demo2之类(原创)第 35/170 页1.8 跟我StepByStep学FLEX教程-Demo3之数据类型发表时间:2009-04-22跟我StepByStep学FLEX教程-Demo3之数据类型说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。这个Demo主要说明AS3的数据类型,先看一下Demo的运行效果页面,很简单:主要代码如下:!CDATApublic function parseInteger(str:String):int var num:Number=parseInt(str);if(!isNaN(num)&num=int.MIN_VALUE)return int(num);http:/1.8 跟我StepByStep学FLEX教程-Demo3之数据类型第 36/170 页return 0;internal function AbAdd():void var iAnum:int=parseInteger(ATxt.text);var iBnum:int=parseInteger(BTxt.text);AddTxt.text=String(iAnum+iBnum);internal function UnStr():void ShowTxt.text=undefined;internal function StrUndef():void ShowTxt.text=String(undefined);重点来了,对于数据类型着重讲一下int和String类型。对于int来说,请读者一定要注意,int是个Object,也就是说int是类,表示32位的带符号整数的数据类型,其它的大家就看Demo的例子就行。对于String,Demo着重说明了一下,undefined在AS3中是null,而不是undefined,如果要显示undefined,需要使用String()函数。对于其它的数据类型,这儿作者推荐一个网址,不仅可以对其它的数据类型进行学习,还有基础的语法,非常不错:ActionScript3.0语言和组件参考(中文的哦)http:/1.8 跟我StepByStep学FLEX教程-Demo3之数据类型第 37/170 页http:/ 跟我StepByStep学FLEX教程-Demo3之数据类型第 38/170 页1.9 跟我StepByStep学FLEX教程-Demo4之进度条数据绑定发表时间:2009-04-23跟我StepByStep学FLEX教程-Demo4之进度条数据绑定说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。先看一下Demo运行效果:手动方式BingdingUtils绑定方式一http:/1.9 跟我StepByStep学FLEX教程-Demo4之进度条数据绑定第 39/170 页BingdingUtils绑定方式一源码如下:!CDATAimport mx.binding.utils.BindingUtils;private var num:Number=0;private var styleArr:Array=;internal function init():void styleArr.push(Button Click);styleArr.push(Hslider Value);cmbStyle.dataProvider=styleArr;internal function setProValue(num:Number):void testProBar.setProgress(num,1000);internal function clickPro():void trace(cmbStyle.selectedIndex);/手动模拟if(num 1000)num=0;internal function styleChange():void if(cmbStyle.selectedIndex=1)startBtn.enabled=false;dragHs.enabled=true;/BindingUtils实现数据绑定/方式一BindingUtils.bindSetter(setProValue,dragHs,value);/方式二 这儿只说明这种绑定方式,并不是进度条效果,在进度条显示值/BindingUtils.bindProperty(testProBar,label,dragHs,value);else startBtn.enabled=true;dragHs.enabled=false;这儿主要讲数据绑定,大家看一下运行效果就发现AS3的数据绑定还是很好用的,所谓数据绑定就是源数据和目标数据绑定,目标数据随着源数据的变化而变化。Demo中采用BingdingUtils类的方式,大家看一下代码,非常简单。还有以下的数据绑定方式:1、直接在“”中;http:/1.9 跟我StepByStep学FLEX教程-Demo4之进度条数据绑定第 41/170 页mx:Label text=testInp.text2、使用;mx:Label id=desLab text=testInp.text可以配合标签使用。http:/1.9 跟我StepByStep学FLEX教程-Demo4之进度条数据绑定第 42/170 页1.10 跟我StepByStep学FLEX教程-Demo5之事件Event发表时间:2009-04-23跟我StepByStep学FLEX教程-Demo5之事件Event说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。Demo的运行效果:源码如下:这个Demo演示了Flex的三种事件方式,也就是按钮上写的名称:1、MXML 中注册事件;2、MXML 定义中创建线上事件;3、ActionScript 注册事件监听器;其中第2种方式仅供大家理解,作者不建议读者使用第2种方式在项目中实际应用,这种方式代码生硬,不易维护。大家可以做一下这个Demo,下一讲将对事件event进行一些理论上的补充。http:/1.10 跟我StepByStep学FLEX教程-Demo5之事件Event第 44/170 页http:/1.10 跟我StepByStep学FLEX教程-Demo5之事件Event第 45/170 页1.11 跟我StepByStep学FLEX教程-Event事件机制发表时间:2009-04-27跟我StepByStep学FLEX教程-Event事件机制说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。通过Demo5介绍了FLEX的3种事件方式,作者推荐大家尽量使用第3种ActionScript 注册事件监听器方式,因为这样将大大提高事件的交互处理的可扩展性和代码的复用性。因此这儿就讲一下AS3这种方式的事件机制。事件类(Event):所有的事件对象都是flash.events.Event或者其子类事件发送类(EventDispatcher):事件发送机制。该类有两个公共方法:1、注册监听器addEventListener();2、删除监听器removeEventListener;还有一个Protected方法:3、发送事件dispatchEvent();将自定义事件加入事件流。事件阶段也就是事件流分三个阶段:1、捕获阶段(Capture):查找事件的触发源。从根节点逐级向下追踪,直至找到。2、目标执行阶段(Target):事件的执行阶段。也就是处理事件流的代码。3、冒泡阶段(Bubble):第一阶段的逆过程。也就是事件执行完后,从目标节点逐级向父节点发出该事件直到根节点。http:/1.11 跟我StepByStep学FLEX教程-Event事件机制第 46/170 页事件的优先级(Event Priority):事件的优先级在添加一个事件时可以设置监听器的优先级,优先级越高,监听器的函数就会越早被调用。如果两个优先级相同的监听器,是由被添加的顺序来决定优先级的。下一讲就做一个Demo如何自定义事件。http:/1.11 跟我StepByStep学FLEX教程-Event事件机制第 47/170 页1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件发表时间:2009-04-28跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。从这一讲开始,FLEX教程也从初级部分到中级了,Demo的复杂度也相应增加。简单的回顾一下初级部分,这一部分对Flex的概念以及开发工具进行了介绍,结合具体的DEMO对MXML和AS3的基础语法进行了讲解。这一部分内容希望读者对Flex有一个基础的认识,并且能够进行简单的应用开发。OK,这一讲的Demo以自定义事件和自定义组件为主题。同样的,先看运行效果:http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 48/170 页代码结构如下:源代码如下:自定义事件类MyCustomEvent.as:package com.objimport flash.events.Event;http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 49/170 页public class MyCustomEvent extends Eventpublic static const TESTMYEVENT:String=testMyEvent;/使用常量定义事件的触发方式名称public var userLog:UserLogin;public function MyCustomEvent(userLogin:UserLogin,type:String)super(type);this.userLog=userLogin;用户登录类UserLogin.as:package com.objpublic class UserLoginpublic var logUserNam:String=;/用户名public var logUserPass:String=;/用户密码public var logCompanyNam:String=;/公司名称public function UserLogin(userNam:String,userPass:String,companyNam:String)this.logUserNam=userNam;this.logUserPass=userPass;this.logCompanyNam=companyNam;自定义组件SysLoginWin.mxml:http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 50/170 页!CDATAimport com.obj.UserLogin;import mx.controls.Alert;import com.obj.MyCustomEvent;private function init():voidVeriCodeLab.text=generVeriCode();private function generVeriCode():Stringvar ranNum:Number;var seedNum:Number;var tmpCode:String;var veriCode:String=;for(var i:int=0;i/声明事件注册通道的方法。name是事件对应的名称,也就是type。name一定要和事件类中的名称一致http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 51/170 页Event(name=testMyEvent,type=com.obj.MyCustomEvent)可以在Components的Custom看见自定义组件了:主程序测试自定义事件TestMyEventMain.mxml:http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 52/170 页http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 53/170 页通过代码很容易明白,使用AS3方式的事件Event机制,可以将大部分功能抽象为自定义控件,达到代码的高度复用和系统的可扩展性。下一讲对这个Demo进行一下简单讲解。从这一讲开始,FLEX教程的内容和Demo比以前的复杂度会高一些-教程StepByStep,读者通过初级阶段的学习,这一阶段也就很容易了。如果对DEMO或者讲述的不明白或有疑义的,请在评论中描述,作者尽量一一回复,由于工作关系,没有及时回复,提前请您见谅。http:/1.12 跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件第 54/170 页1.13 跟我StepByStep学FLEX教程-自定义事件&自定义组件发表时间:2009-05-04跟我StepByStep学FLEX教程-Demo6之自定义事件&自定义组件说明:该文系作者原创,请勿商用或者用于论文发表,转载必须经作者同意并且注明出处。这一讲对Demo6简单解释一下。自定义事件:首先,定义自定义事件类MyCustomEvent.as,这个类继承Event。作者建议使用常量方式定义事件的触发方式名称。在自定义组件的登陆按钮中使用dispatchEvent将自定义事件注册到事件流。同时声明该事件注册通道。Event(name=testMyEvent,type=com.obj.MyCustomEvent)这样就可以调用该自定义事件了。testMyEvent=loginHandler(event)自定义组件:New-MXML Component。这个也算是Flex的特色,通过使用这种组件达到界面的高度复用。如果有什么没有解释清楚的,请发表评论回帖,作者会一一回复。http:/1.13 跟我StepByStep学FLEX教程-自定义事件&自

此文档下载收益归作者所有

下载文档
你可能关注的文档
收起
展开