Flex学习 ActionScript & mxml

刚刚接触Flex。

先谈谈Flex的什么什么

动手写过的只有两种文件: .mxml文件和.as文件。
接触到的代码也只有两种: 带<>的标签，和ActionScript代码。

Flex应用中最终将会生成一个个.swf文件。我们通过浏览器浏览到的某个.html页面，其实真正运行的是那个.swf文件。而这个.swf文件是用ActionScript脚本写出来的，中间怎么编译或者解析的，不去理它。ActionScript大概是Flash设计者比较熟悉的一种脚本语言，我以前是没有接触过。毕竟flash设计和web之开发之间还是有很多不同的。为了让web开发人员更容易应用ActionScript做开发，于是.mxml产生了。
.mxml文件到底是什么文件我也不清楚，只知道.mxml文件中使用<>标签，应用大量的<>标签封装了很多组件。这些组件完全是用ActionScript写出来的，只不过做了一层封装，我们可以直接拿来主义。这很象jsp标签，最终还是将被解析成java代码，同样，.mxml中的标签最终也将会被解析成ActionScript代码。所以我想，一个ActionScript高手，完全可以不用写.mxml文件就能完成Flex项目，当然，一个web开发人员绝不会这样去做，当然是选择使用封装好的组件，这样代码工整，结构清晰，书写方便。

.as和.mxml

如果理解到这里，对于Flex中的以下一些写法也就会明白了。
可以写一个.as文件创建一个自定义的组件。（然后可以拿到.mxml中象应用其他组件一样去应用）
可以在.mxml文件中嵌套ActionScript代码。(<mx:Script>组件已经封装好了)

.as文件里面写的就是ActionScript代码，ActionScript是一种比较强大的面向对象的脚本语言，语法和JAVA和象。我们既可以在.as文件中定义我们需要用到的自定义的组件，也可以写一些对数据对组件的逻辑操作。.as文件就相当J2EE中的.class文件，作为source被应用，这里可以封装对象也可以封装事件，此时actionscript和java在j2ee中扮演的角色很相像。

.mxml 定义了“页面”的布局，也就是各个组件怎么摆放，以及组件的一些逻辑。那.mxml文件就相当于表现层的实现。而在.mxml中也会用<mx: scirpt>标签引入一些逻辑操作，此时的actioncript又跟javascript所扮演的角色很相象。

.as和.mxml给我的感觉就象是一种语言的两种写法。不同的写法有不同的侧重点。
.mxml更侧重于表现形式，而.as更侧重于整体与逻辑。二者关系密切。
比如说一个自定义组件MyCanvas
<mx:Canvas >
<mx:Lable id="lab"></mx:Label>
</mx:Canvas >
编绎时可能就变成了
public class MyCanvas extends Canvas{
? public var lab: Label;
? puiblic function MyCanvas(){
? ? ? lab = new Label();
? ? ? this.addChild(lab);
? }
}

事件机制

个人感觉Flex中的事件机制是Flex框架中比较重要的地方，虽然在我的项目中几乎用不到。
比如我有一个自定义的组件MyComponent，在.mxml中应用如下：
<cmn:MyComponent click="myFunction()"></cmn:MyComponent>
cmn相当于是一个名域，不用管它。如上写法，很象javascript中的onclick（也许就是一样，没研究过）。上面这段代码相当于实例化了一个MyComponent组件。click是事件的一个实例，其实它是MouseEvent的一个实例。当组件被创建之后，它就相当于又开辟了一个线程时刻捕获MouseEvent，（Flex中没有线程的概念，这里只是比喻。）当MyComponent中抛出MouseEvent事件时，这里的“抛出”实际上是一个分发的动作，代码如同dispathEvent(new MouseEvent()) ，click就会被触发，myFunction（）就会被执行。
换一种想法，click="myFunction()"就相当于是添加了一个监听器，而实际上Flex中确实是有监听器的，所以，上面那段代码也可以用监听器的方式来实现，比如：
<cmn:MyComponent id="mc" creationComplete="init()"></cmn:MyComponent>
<mx:Script>
? <![CDATA[
??? private function init():void{
????? mc.addEventListener("click",myFuntion);
??? }
? ]]>
</mx:Script>

绑定机制

绑定机制也是Flex的一大重点。它其实就是事件机制的应用。
绑定的作用在于，将Flex中的变量，类或者方法等与组件的值进行绑定，例如，一个变量被绑定之后，那么引用该变量的组件的相关属性页会发生改变。绑定后的变量就相当于指向同一个变量的两个引用，又好比是在java的类中定义一个static变量，在一个类中改变它的值，在所有类中的该值都会变化，因为都是同一个对象嘛。
绑定的形式我现在接触过的如：
[Bindable]
public var blogName : String = "realsmy";
在.mxml中用<mx:Label text="{blogName}"></mx:Label>表现。
或者
<mx:Binding source="mylabel.text" destination="blogName" />

状态

Flex中用state来表示不同的状态。比较经典的例子还是官方的。
<? xml?version="1.0"? ?>
<!-- ?Simple?example?to?demonstrate?the?States?class.? -->
< mx:Application? xmlns:mx ="http://www.adobe.com/2006/mxml" >

???? <!-- ?Define?one?view?state,?in?addition?to?the?base?state. -->
???? < mx:states >
???????? < mx:State? name ="Register" >
???????????? < mx:AddChild? relativeTo ="{loginForm}" ?position ="lastChild" >
???????????????? < mx:target >
???????????????????? < mx:FormItem? id ="confirm" ?label ="Confirm:" >
???????????????????????? < mx:TextInput />
???????????????????? </ mx:FormItem >
???????????????? </ mx:target >
???????????? </ mx:AddChild >
???????????? < mx:SetProperty? target ="{loginPanel}" ?name ="title" ?value ="Register" />
???????????? < mx:SetProperty? target ="{loginButton}" ?name ="label" ?value ="Register" />
???????????? < mx:SetStyle? target ="{loginButton}" ?
????????????????name ="color" ?value ="blue" />
???????????? < mx:RemoveChild? target ="{registerLink}" />
???????????? < mx:AddChild? relativeTo ="{spacer1}" ?position ="before" >
???????????????? < mx:target >
???????????????????? < mx:LinkButton? id ="loginLink" ?label ="Return?to?Login" ?click ="currentState=''" />
???????????????? </ mx:target >
???????????? </ mx:AddChild >
???????? </ mx:State >
???? </ mx:states >

???? <!-- ?Define?a?Panel?container?that?defines?the?login?form. -->
???? < mx:Panel? title ="Login" ?id ="loginPanel" ?
????????horizontalScrollPolicy ="off" ?verticalScrollPolicy ="off"
????????paddingTop ="10" ?paddingLeft ="10" ?paddingRight ="10" ?paddingBottom ="10" >

???????? < mx:Text? width ="100%" ?color ="blue"
????????????text ="Click?the?'Need?to?Register?'?link?to?change?state.?Click?the?'Return?to?Login'?link?to?return?to?the?base?state." />

???????? < mx:Form? id ="loginForm" ? >
???????????? < mx:FormItem? label ="Username:" >
???????????????? < mx:TextInput />
???????????? </ mx:FormItem >
???????????? < mx:FormItem? label ="Password:" >
???????????????? < mx:TextInput />
???????????? </ mx:FormItem >
???????? </ mx:Form >
???????? < mx:ControlBar >
???????????? < mx:LinkButton? id ="registerLink" ??label ="Need?to?Register?"
????????????????click ="currentState='Register'" />
???????????? < mx:Spacer? width ="100%" ?id ="spacer1" />
???????????? < mx:Button? label ="Login" ?id ="loginButton" />
???????? </ mx:ControlBar >
???? </ mx:Panel >
</ mx:Application >