Flex学习笔记 --- ActionScript & mxml

Posted on 2008-01-17 20:26 久城 阅读(6890) 评论(9)  编辑  收藏 所属分类: Flex&ActionScript
刚刚接触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>

下周Flex的项目开启了,我的任务并不重,只有一个页面几个机能。更多的时间可能要用在设计和写文档上,没办法,这就是外包。所以我也经常想,做外包的是不是不需要把技术研究得太深太透彻啊?呵呵,每个人都不一样吧....



欢迎来访!^.^!
本BLOG仅用于个人学习交流!
目的在于记录个人成长.
所有文字均属于个人理解.
如有错误,望多多指教!不胜感激!

Feedback

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-01-18 09:45 by 交口称赞
又看到一个搞flex
难得啊

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-01-18 09:50 by 久城
刚刚开始学习......和称赞兄还差得远呢......

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-01-21 15:31 by 自在大羽
小家伙好好学 不懂的可以去问ZHR 那斯这东西玩儿的明白

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-01-31 11:22 by bNog
偶然访问到久城的博,觉得是个很有心的好孩子。只是有一个小建议,并没有绝对的适用性,谨慎提出:技术这东西,没必要作那么多比喻打那么多比方,过度的“懒惰理解”会严重影响技术水平提高。

上面的各种理解方式都只能说见仁见智,我只提2点作为交流:
1、mxml文件的本质规范是叫做XML的规范,简单的说他就是XML文件;
2、mxml和as,如果你自己理解他们的区别,就尽量不要说出来,因为很难说得很到位很精妙很令人信服,因为他们就像jsp vs. servlet等等各种视图-控制分离技术框架一样,到底该统一于何处、分层至多远,永远是个有争议同时也极富灵感空间的问题。

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-01-31 12:08 by 久城
@bNog
“很有心的好孩子”,哈哈,这个我喜欢!谢谢你的建议!~:)
学技术,我确实喜欢打很多比喻,因为面对一个陌生的东西,我总是习惯找一个参照物作为学习的入口,然后一点一点的体会它们的相同与不同。这样的方法不是完美的,但是比较适合我自己。不过,你说的“懒惰理解”提醒了我,这也许就是我这种学习方法的弊端吧...
关于把个人的理解写出来,一方面是为了记录自己,一方面是为了交流,从未打算要用来教导他人。写这篇BLOG的时候,刚刚接触Flex不久。现在看来对Flex的理解就已经不局限在这里,但是,对于那时的我,就是这样理解的,因为我需要一个入口去学习它。人嘛,总是在不断完善自己的过程中成长的。

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-08-29 16:57 by 惊翎
学习了,蛮好的!

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-09-22 07:11 by Can
Good!

如果有机会希望多交流一下。
我也开始学Flex不久。

yibans(a)hotmail.com

^_^

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2008-10-21 23:09 by lifetags
以前接触过 openlaszlo, 跟 flex的mxml标记很象,非常象。不过那个有bug,很多奇怪的问题。再后来就没有用了,我们也是做项目,不过,不是外包,自己内部的东西。 呵呵,羡慕你们这些做外包的,拿的同样的薪水,可是你们却轻松很多,我们要做的太多了,公司投入很抠门的,哎~~

有时间聊聊,我在北京。
qq 1189 8620

# re: Flex学习笔记 --- ActionScript & mxml  回复  更多评论   

2009-02-06 21:00 by dk.1@163.com
第一次听说,,, 研发的羡慕外包。。。

只有注册用户登录后才能发表评论。


网站导航:
 

Copyright © 久城