FLEX3.0 RIA 基础教程
-------- 基于ActionScript 3实现
前记：
Abodb AIR 1.0 终于出来了。
继最初AIR SDK alpha版本之后12个月，Adobe发布了Flex3.0和AIR（Adobe集成运行时）1.0版本。Flex利用Adobe Flash player提供了一个构建交互式富因特网应用程序（RIAs）的框架。
AIR依次允许开发人员使用Flex或HTML/CSS/JavaScript组合来构建桌面应用程序。当前AIR支持WindowsXP、 Windows Vista和Mac OS X。支持Linux的目标版本是AIR 1.1。Adobe同样发布了最新的Flex Builder 3 IDE，标准版售价为249美元，专业版售价为699美元。
谁在用AIR
eBay （http://desktop.ebay.com）
eBay桌面是构建于Adobe AIR上的一个应用程序，程序创建了与eBay客户的持久连接。eBay桌面实时地直接将产品供货通知和拍卖更新发布给买主，这样用户不需要打开浏览器进入易趣网站就可以获取最新信息。
纳斯达克股票市场公司（https://data.nasdaq.com/mr.aspx）
NASDAQ Market Replay使用Adobe Flex和Adobe AIR在桌面上发布一个RIA，让金融专业人士能够重放任何时间点市场活动的详情。
纽约时报公司（http://shifd.com）
纽约时报公司正在开始ShifD，一个新的RIA，允许使用者在计算机和移动设备之间切换内容。ShifD工作在Web网站和移动设备之上以及两者之间，通过一个可下载的AIR应用程序提供给人们一种欣赏移动媒体的方式。
Flex基础
开发Flex其实是比较简单的，如果熟悉xml和html，c 或者java，以前从事过VB，delphi或者RCP 的话开发起来比较得心应手。
Flex用MXML和ActionScript来编写。MXML最终编译成SWF文件。MXML就是在XML上写HTML 。MXML比HTML更结构化，提供了跟丰富的标签。
ActionScript和JavaScript都是客户端语言。我对ActionScript上手没有一点困难。
ActionScirpt完全面向对象。开发的语法和Java差不多。
如java定义一个类的方法
| Java 方法 String myStr = “123456”; }
ActionScript定义一个类的方法 public function checkUser(username:String = "", password: String) :void{ var ran:Number; var myStr:String = "123465"; } |
下面用一个登录的例子来做为Flex的入门
1.在菜单中File -> New -> MXML Application
| <?xml version="1.0" encoding="utf-8"?><!-- XML编程必须的指定的 -->
<!-- WindowedApplication定义了应用程序容器 --> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="509" creationComplete="initApp()" height="422" themeColor="#54BAEA" backgroundColor="#ffffff"> <!--Flex中没有页面的概念,没有页面直接的切换,只有状态states的转换.--> <mx:states> <mx:State name="index" id="indexID"> <mx:RemoveChild target="{titlewindow1}"/> <mx:AddChild position="lastChild"> <mx:Label text="Welcome to www.plogcn.com 中国玩客网" width="411" height="69" fontSize="20" color="#007DCD"/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Image width="90" height="168" id="image1"> <mx:source>file:///C|/Documents and Settings/jx.YGGROUP/My Documents/My Pictures/398583.gif</mx:source> </mx:Image> </mx:AddChild> <mx:SetStyle name="borderColor" value="#060606"/> </mx:State> </mx:states> <mx:TitleWindow width="402" height="312" layout="absolute" title="Login Form" id="titlewindow1"> <mx:Button x="131" y="167" label="Login" click="validateUser()" tabIndex="4"/> <mx:Label x="64.5" y="76" text="Username:" fontWeight="bold"/> <mx:Label x="67.5" y="106" text="Password:" fontWeight="bold"/> <mx:TextInput x="139.5" y="74" id="username" tabIndex="1"/> <mx:TextInput x="139.5" y="104" displayAsPassword="true" id="password" tabIndex="2"/> <mx:Button x="206" y="167" label="Cancel" tabIndex="5"/> <mx:Text x="33" y="20" width="316" height="46" fontFamily="Courier New" fontSize="17" color="#4189FF" id="showText"/> <mx:Label x="76.5" y="132" text="校验码:" width="55" fontWeight="bold" fontSize="12"/> <mx:TextInput x="139.5" y="132" width="79" id="txtCheckCode" tabIndex="3"/> <mx:Label x="226" y="134" width="73.5" id="lblCheckCode" height="20" fontSize="13" fontWeight="bold"/> </mx:TitleWindow>
<!-- mx:Script包含ActionScript的代码 ,代码应该写在<![CDATA[ ]]> 里面--> <mx:Script> <![CDATA[ //如果是定义类的方式,需要用import方式引入进来.不能用source= "/script/Greeter.as"这种方式 import script.Greeter; public function validateUser():void{ var result:String = "1"; result = Greeter.sayHello(username.text,password.text,txtCheckCode.text,lblCheckCode.text); if (result == "success"){ currentState = "index"; }else{ showText.text = result; } } private function initApp():void{ lblCheckCode.text = Greeter.GenerateCheckCode(); //Greeter 脚本文件中的GenerateCheckCode方法 } ]]> </mx:Script> </mx:WindowedApplication> Greeter.as文件 package script{ import mx.controls.Alert; import mx.states.IOverride;
public class Greeter{ public static var validNames:Array = ["sonic", "frant" ,"linux"];
public static function sayHello(userName:String = "",psw:String = "",txtCode:String = "",checkCode:String = ""):String{ var greeting:String; if(userName =="" && psw == ""){ Alert.OK; //greeting = "Hello. please type your user anme , and then press Enter key."; Alert.show("请输入用户名和密码"); }else if(validation(userName,psw,txtCode,checkCode)){ greeting = "success"; //greeting = "Hello " + userName + " Welcome !" //Alert.show("登录成功"); }else{ greeting = "Sorry," + userName + ".You are not on the list. "; } return greeting; }
public static function validation(inputName:String,psw:String,txtCode:String,checkCode:String):Boolean{ if (validNames.indexOf(inputName) > -1 && psw == "123456" && txtCode.toLowerCase() == checkCode.toLowerCase()){ return true; }else{ return false; } }
/** * @return code * 生成四位数的随机数. */ public static function GenerateCheckCode():String{ //init method var ran:Number; var number:Number; var code:String; var checkCode:String="";
//生成四位数的随机数 for(var i:int=0;i<4;i++){ ran = Math.random(); number = Math.round(ran*10000); if(number % 2 == 0) // "0"的ASCII码是48 code = String.fromCharCode(48 + (number % 10)) else //生成一个字母 A的ASCII码是65 code = String.fromCharCode(65 + (number % 26)); checkCode += code; } return checkCode; } } }
|
Flex的图形处理
- 拖一个Panel
- 里面放柱图图形标签<mx:ColumnChart ../>
- 在<mx:Script>里面定义一个数据绑定,要用关键字 [Bindable],然后定义个finance的ArrayCollection
- 在<mx:ColumnChart ../>在定义属性dataProvider="{finance}"
具体可运行例子参照下面代码.
| <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" height="600" width="700"> <mx:Panel width="605" height="511" layout="absolute" title="Column chart . Design by www.plogcn.com"> <!--柱图--> <mx:ColumnChart x="104" y="10" id="myColumnChart" dataProvider="{finance}" width="424"> <!-- 定义横坐标,绑定到 ArrayCollection {finance} 数据集中 --> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{finance}" categoryField="Month" title="月份" /> </mx:horizontalAxis> <!--2个数据 ,所以就是2个<mx:ColumnSeries> x轴为月份,y轴为收入或支出--> <mx:series> <mx:ColumnSeries xField="Month" yField="In" displayName="收入"/> <mx:ColumnSeries xField="Month" yField="Out" displayName="支出"/> </mx:series> </mx:ColumnChart> <!-- 绑定柱状图中的数据ID{<mx:ColumnSeries} --> <mx:Legend id="myLegend" dataProvider="{myColumnChart}" x="11" y="10"/> </mx:Panel> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var finance:ArrayCollection = new ArrayCollection([ {Month:"1月",In:2300,Out:880}, {Month:"2月",In:2200,Out:550}, {Month:"3月",In:2420,Out:500}, {Month:"4月",In:2333,Out:6500}, {Month:"5月",In:2880,Out:700}, {Month:"6月",In:1000,Out:1200}, {Month:"7月",In:800,Out:100}, {Month:"8月",In:700,Out:500}, {Month:"9月",In:1500,Out:2500}, {Month:"10月",In:4000,Out:1300}, {Month:"11月",In:3000,Out:1200}, {Month:"12月",In:8000,Out:1100}, ]); ]]> </mx:Script> </mx:WindowedApplication>
|
运行结果：
没有注册的Flex Builder 生成都图片有水印
Flex数据处理
Flex绑定最简单的方式是用 ”{ …. }”, 绑定的类型要一致.
使用”[Bindable]”可指明变量或属性可绑定.
例如
[Bindable]
Private var myStr:String = “123456789”;
绑定的运行效率要比代码实现的效率高得多.
<mx:Model > 组件是Flex3.0的数据模型组件,类似XML数据定义
<mx:Model>
<user> 根节点-必须要有
<name>Sonic</name>
<sex>male</sex>
<old>27</old>
</user>
</mx:Model>
MX:OBJECT的方式
<mx:Object name=”sonic” sex=”male” old=”27” />
<mx:Object name=”Jacky” sex=”male” old=”20” />
还可以使用<mx:xml>方式绑定,和mx:Model的方式差不多。
效果如：
数据验证组件
Flex中提供了一些常用的组件进行数据验证.有些组件是以美国的规定定制的.如邮编
如
电话号码验证: <mx:PhoneNumberValidator source="" property="" id="" />
日期验证: <mx:DateValidator source="" property="" id="" />
E-mail验证: <mx:EmailValidator id="" source="" source="" />
还有数字验证,字符串,货币等…
其中属性Source 是指要验证组件的id要用{},property是要数据组件的属性
如
| <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#5DDEFA"> <mx:Panel x="10" y="10" width="431" height="382" layout="absolute"> <mx:DataGrid x="10" y="10" dataProvider="{XMLBindingID.user}" width="358" fontWeight="bold" color="#000000"> <mx:columns> <mx:DataGridColumn draggable="true" headerText="UserName" dataField="name"/> <mx:DataGridColumn draggable="true" headerText="Sex" dataField="sex"/> <mx:DataGridColumn draggable="true" headerText="Department" dataField="department" /> </mx:columns> </mx:DataGrid> <mx:TextInput id="email" x="72" y="169"/> <mx:TextInput id="date" x="72" y="199"/> <mx:TextInput id="phone" x="72" y="229"/> </mx:Panel> <mx:PhoneNumberValidator source="{phone}" property="text" id="vphoto" /> <mx:DateValidator source="{date}" property="text" id="vdate" /> <mx:EmailValidator source="{email}" property="text" id="vemail" invalidCharError="非法字符" invalidDomainError="非法域" missingAtSignError="没有@,请补上"/> </mx:WindowedApplication> |
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
3742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
