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 >