基于ActionScript 3 的Flex Air 教程入门（一）

最新推荐文章于 2025-05-13 13:56:12 发布

原创最新推荐文章于 2025-05-13 13:56:12 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#actionscript #flex #air #string #adobe #datagrid

Web Design 专栏收录该内容

5 篇文章

订阅专栏

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 方法
public void checkUser(String username,String password){

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"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="509"

creationComplete="initApp()" height="422" themeColor="#54BAEA" backgroundColor="#ffffff">

<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>

<![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">

<mx:horizontalAxis>

<mx:CategoryAxis dataProvider="{finance}" categoryField="Month" title="月份" />

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries xField="Month" yField="In" displayName="收入"/>

<mx:ColumnSeries xField="Month" yField="Out" displayName="支出"/>

</mx:series>

</mx:ColumnChart>

<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>

</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="没有@,请补上"/>