Flex入门学习笔记
一、如何创建Flex应用程序
步骤如下：
1，选取预定义的可视化组件
2，在用户界面上添加组件
3，使用styles和skins自定义应用程序界面
4，增加事件处理和脚本处理代码，控制应用程序行为
5，连接数据和通讯服务
6，Build和Run应用程序
?
二、ActionScript3 语言基础
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()"> <mx:Style source="style.css" /> <mx:Script> <![CDATA[ //初始化 internal function initApp():void{ var arr:Array = new Array(); //给数组添加元素 for(var i:Number = 0;i<6;i++){ arr.push("元素 "+i); } //list控件指定数据 list_1.dataProvider = arr; list_2.dataProvider = arr; //设置拖拽属性 list_1.dragEnabled = true; list_1.dropEnabled = true; list_1.allowMultipleSelection = true; list_2.dropEnabled = true; var str:String=new String("hello world"); trace(str); } ]]> </mx:Script> <mx:Canvas styleName="box" x="45" y="65" width="420" height="360"> <mx:List id="list_1" x="26.5" y="40" height="284" width="160"></mx:List> <mx:List id="list_2" x="229" y="40" height="284" width="160"></mx:List> </mx:Canvas> </mx:Application>?
1，在mxml文件中编写ActionScript代码，要嵌在 mx:Script标签的CDATA块中
?<![CDATA[ActionScript代码]]>，注意<![CDATA[这个标记中没有空格，不要胡乱拆分来写
?<![CDATA[]]>括起来的部分表示不做xml语法解析，如果ActionScript代码不放在CDATA块中，
?则，当我们在代码中用到"<","["等xml的语法标记符时，将会被当成xml的标记，这样解析就会出错
?
?
2，先看一下<mx:Script>中的代码，从整体上认识ActionScript
? 很显然这个代码中，定义了一个函数(注意和Java中的不同，也和JavaScript不用)
??? internal —— 是访问作用域，这个表示在同一个包内可用
??? function —— 表示定义的是函数,Java中不用这样指定
??? initApp —— 是函数名
??? （）—— 中表示参数，现在是无参数
??? :void —— 是返回值类型，现在是无返回值，这个跟Java就有区别了
?? var —— 表示要定义一个变量
?? arr:Array —— arr表示变量名，Array是变量的类型，变量和类型之间用"："分隔
?? new Array() —— 创建对象的方式是一样的
??
?? list_1 —— 是<mx:List>标签中定义的id，这里直接当做一个变量来用，是因为在编译mxml时，
???????????? 会将mxml转换成ActionScript，即：上面List标签代表List类型，根据指定id="list_1"
???????????? 来对应创建一个List的对象，所以可以在脚本中直接使用"list_1"
??
?? trace() —— 表示在控制台打印输出，在debug的时候输出信息,打印的是字符串，它会自动判断是否
????????????? 字符串，不是的话，会自动调用toString()方法转换成字符串
?????????????
3，ActionScript基础
?
<mx:Script> <![CDATA[ internal function init():void{ var num:int = 0; var i:int = 0; do{ num = num+i; i++; }while(i<100); trace(num); //trace表示在控制台打印 txt.text=txt.text+"\n"+num.toString(); var student:Object = new Object(); student.name = "小王"; student.age = 20; student.type = "本科"; for (var prop:String in student) { //trace (prop+":"+student[prop]); txt.text=txt.text+"\n"+prop+":"+student[prop].toString(); } for each(var value:* in student) { //trace (value); txt.text=txt.text+"\n"+value.toString(); } } ]]> </mx:Script>?
?
?? 1)if,switch,while,do...while,for,break,continue的用法跟Java和JavaScript基本一样,不再多说
??
?? 2)for ... in
??? for (var prop:String in student) {
?????//trace (prop+":"+student[prop]);
?????txt.text=txt.text+"\n"+prop+":"+student[prop].toString();
?? }
? 这里表示循环student的属性，把属性名放到String类型变量prop中，
? 然后可以通过student[prop]来取对象的值，这和JavaScript中基本一样
?
? 3)for each ... in
?? ?for each(var value:* in student) {
?????//trace (value);
?????txt.text=txt.text+"\n"+value.toString();
???}
??for each ... in 表示取对象属性的值，*表示任何类型(有些文档写它是无类型)，
??因为student对象中的属性不一定都是String类型
??
??4)with 用于减少代码的编写
?? with (someOther_mc) {//with括号里写对象的引用,然后{}代码块里就直接写对象的属性，就是把引用名省掉了
??????? _x = 50;
??????? _y = 100;
?????? gotoAndStop(3);
??? }
??? 下面的代码片断说明如何在不使用 with 语句的情况下编写上述代码。
???? someOther_mc._x = 50;
???? someOther_mc._y = 100;
????? someOther_mc.gotoAndStop(3);
??
??5)一些关键字
?? 定义关键字摘要
?? ... (rest) parameter 指定函数将接受任意多个以逗号分隔的参数。
?? class 定义一个类，它允许实例化共享您定义的方法和属性的对象。
?? const 指定一个常量，它是只能赋值一次的变量。
?? extends 定义一个类以作为其它类的子类。
?? function 包含为执行特定任务而定义的一组语句。
?? get 定义一个 getter，它是一种可像属性一样读取的方法。
?? implements 指定一个类可实现一个或多个接口。
?? interface 定义接口。
?? namespace 允许您控制定义的可见性。
?? package 允许您将代码组织为可由其它脚本导入的离散组。
?? set 定义一个 setter，它是一种在公共接口中作为属性出现的方法。
?? var 指定一个变量。
??
?? 属性关键字摘要
?? dynamic 指定类的实例可具有在运行时添加的动态属性。
?? final 指定不能覆盖方法或者不能扩展类。
?? internal 指定类、变量、常量或函数可用于同一包中的任何调用者。
?? native 指定函数或方法由 Flash Player 以本机代码的形式实现。
?? override 指定用一种方法替换继承的方法。
?? private 指定变量、常量、方法或命名空间仅可供定义它的类使用。
?? protected 指定变量、常量、方法或命名空间只可用于定义它的类及该类的任何子类。
?? public 指定类、变量、常量或方法可用于任何调用者。
?? static 指定变量、常量或方法属于类，而不属于类的实例。
??
?? 指令摘要
?? default xml namespace default xml namespace 指令可将默认的命名空间设置为用于 XML 对象。?
?? import 使外部定义的类和包可用于您的代码。
?? include 包括指定文件的内容，就像该文件中的命令是调用脚本的一部分一样。
?? use namespace 使指定的命名空间添加到打开的命名空间集中。
??
?? 6)常用的几个类
?? Array? —— 数组
?? int —— 整型
?? Number —— 浮点型
?? uint —— 无符号整型
?? String —— 字符串
?? Date —— 日期
??
三、ActionScript面向对象编程（跟Java类似）
?? ActionScript文件以.as作为后缀
MyFlex.as
package com.fl{//包之后要加括号，没有分号 import mx.controls.TextArea;public class MyFlex{ public var msg1:String="hello flex"; protected var msg2:String="THIS IS A protected VAR!";//子类可访问 private var txt:TextArea=null; public static const PI:Number=3.1415926; //常量不能 被修改，不写var， static静态 internal var msg3:String="message3";//internal同包内可访问，同样可用于修饰函数 public function MyFlex(outertxt:TextArea)//只能写一个构造函数 { this.txt=outertxt; } public function ShowMessage(str:String):void //函数参数，定义时不用写var { txt.text=str; } public function ShowMessage2():void { txt.text=msg2; } public static function CalArea(r:Number):Number //静态函数 { return r*r*PI; } } } }?
和Java一样，as继承也是单继承，接口的定义和实现也一样
?
四、数组
1)数组基本使用
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ internal function init():void{ var tmpArr:Array = new Array(); tmpArr.push("I "); // I //push往数组中添加元素，在原有元素后面添加 tmpArr.unshift("love "); // love I //unshift将元素放到首元素之前，即是数组的最前面 tmpArr.splice(1, 0, "Flex 3"); //love Flex3 I //把Flex 3放在1的位置，0表示从当前位置(1)开始删除几个元素,0表示不删除 list1.dataProvider=tmpArr; //当前数组作为list1的数据提供者 var books:Array = new Array("IBM", "APPLE", "SUN","ADOBE"); books.pop(); // "IBM", "APPLE", "SUN" //pop()弹出数组最后一个元素 books.shift(); // "APPLE", "SUN" //shift将数组中的首元素移出 books.splice(1,1, "Hehe","XiXi"); // "APPLE", "Hehe","XiXi" //从1开始，删除一个元素，并插入 list2.dataProvider=books; } ]]> </mx:Script> <mx:List x="10" y="29" width="194" height="332" id="list1" fontSize="14"></mx:List> <mx:List x="251" y="29" width="198" height="332" id="list2" fontSize="14"></mx:List> </mx:Application>?
2）数组排序
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ internal function init():void{ var nums:Array = new Array(12, 1, 2,13); // nums.sort(Array.NUMERIC | Array.DESCENDING); //按照数字的降序排列// list1.dataProvider=nums; // nums.reverse(); //将数组逆序// list2.dataProvider=nums; // var students:Array = new Array( ); students.push({name: "Jake", age:20});//数组包数组 students.push({name: "Tom", age:22}); students.push({name: "Will", age:17}); students.sortOn("age",Array.NUMERIC); //按"age"属性值排序，它是数字类型的,没有指定升降序，默认为升序 var data:Array=new Array(); for (var i:int = 0; i < students.length; i++) { data.push( students[i].name + ":" + students[i].age ); }// list2.dataProvider=data; } ]]> </mx:Script> <mx:List x="10" y="10" width="225" height="326" id="list1" fontSize="14"></mx:List> <mx:List x="243" y="10" width="218" height="326" id="list2" fontSize="14"></mx:List></mx:Application>?
?
五、字符串
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ // private var str:String = "Hello,world!"; internal function init():void{ var datas:Array=new Array(); datas.push("length:"+str.length); //字符串长度 datas.push(str + "flex"); //字符串运算，原字符串不变 datas.push(str); datas.push(str.charAt(0)) datas.push(str.indexOf("w")); datas.push(str.indexOf("w",8)); //从8开始往后搜索"w" datas.push("split:"+str.split(",")); //按","分隔 datas.push("split:"+str.split(",",1)); //分隔后返回第1个元素 ——返回"Hello" datas.push(str.substr(0,19)); datas.push(str.substring(0,2)) //获取子串 datas.push(str.slice(0,2)) //跟上面一样，只是起始位置和结束位置可以为负数 datas.push(str.toUpperCase()); //大小写转换 datas.push(str.toLowerCase()); list1.dataProvider=datas; } ]]> </mx:Script> <mx:List x="25" y="24" width="312" height="312" id="list1" fontSize="14"></mx:List></mx:Application>?
?
六、数据类型转换
1)混合运算的类型转换
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.containers.Canvas; internal function init():void{ var num:int = 10; var str:String = "string"; var arr:Array = new Array("test"); var data:Array=new Array(); num = 11.51; //num是整型，直接截掉小数部分，不是四舍五入,返回11 data.push(num); //下面是混合运算 var bool:Boolean = true; data.push(num+str); //字符串连接 data.push(num+bool); //Boolean值true会转换为1，false会转换为0 data.push(bool+str); //还是字符串连接 data.push(num+arr); //数字和数组，是字符串连接 var canvas:Canvas = new Canvas(); data.push(bool+canvas); //和对象运算，字符串 data.push(num+canvas); list1.dataProvider=data; } ]]> </mx:Script> <mx:List x="32" y="32" width="246" height="314" id="list1"></mx:List></mx:Application>?
?
2）类型函数转换
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.containers.Canvas; internal function init():void{ var num:int = 10; var num2:int = 0; var str:String = "string"; var str2:String = "0"; var arr:Array = new Array("test",1); var bool:Boolean = false; var bool2:Boolean = true; var data:Array=new Array(); var str3:String = null; data.push(Boolean(num)); //只要不是数值0，转换后就是TRUE data.push(Boolean(num2)); //数值0，转换后为FALSE data.push(Boolean(str)); //不是数值，转换为TRUE data.push(Boolean(str2)); //这是"0"字符串，不是数值0，所以转换后仍为TRUE data.push(Boolean(arr)); //TRUE data.push(Boolean(str3)); //null对象，转换后为FALSE data.push("------"); data.push(String(num)); data.push(String(num2)); data.push(String(arr)); //数组转换成字符串，就是toString()方法，打印数组 data.push(String(bool)); data.push(String(bool2)); data.push("------"); data.push(int(str)); //字符串转数字，不是数字型的都转为0 data.push(int(str2)); data.push(int(arr)); //复杂数据类型，转为0 data.push(int(bool)); //Boolean类型，FALSE就变成0，TRUE变成1 data.push(int(bool2)); data.push("------"); //trace(Canvas(num)); //as表示 类型转换，表示把num转换成Canvas对象，显然这是无法转换的，无法转换将返回null data.push(num as Canvas); data.push("typeof:"+typeof(arr)); //typeof判断类型，但不是很准确 data.push("is:"+ (arr is Array)); //is判断是否指定类型的实例 list1.dataProvider=data; } ]]> </mx:Script> <mx:List x="10" y="19" width="264" height="338" id="list1"></mx:List> </mx:Application>?
七、运行时类型检测（异常处理）
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
? creationComplete="init()">
?
? <mx:Script>
? ?<![CDATA[
? ??internal function init():void{
? ???var str:* = "Hello,World";
? ???try{
?????myCanvas.addChild(str);
? ???}catch (errObject:Error) {
? ?????trace("The error message is: " + errObject.message);
????}
? ??}
? ?]]>
? </mx:Script>
?
?<mx:Canvas id="myCanvas" />
</mx:Application>
??
?
?
?