Flex 系列教程之四 MXML与Actionscript的关系

上一节我们做了一个小程序，演示了Flex的基本功能，这一节主要讲解MXML与Actionscript的关系

 

只要记住一点，MXML最后会编译成Actionscript，用Actionscript 可以完全代替MXML。

 

重现以下上一节的代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Blur id="blur" blurXFrom="100" blurXTo="0" />
	<mx:Panel x="159" y="38" width="360" height="270" layout="absolute">
		<mx:Button x="130" y="133" label="魔法" id="btn" click="blur.play([magic])"/>
		<mx:Text x="130" y="41" text="Hello,{nameTxb.text}" id="hello"/>
		<mx:TextInput x="88" y="88" id="nameTxb"/>
		<mx:Label x="45" y="90" text="姓名"/>
		<mx:Text x="130" y="67" text="Some Magic" id="magic" />
	</mx:Panel>
</mx:Application> 

这些都是MXML标记，可以看出其实这就是一个xml文件。

 

xmlns:mx="http://www.adobe.com/2006/mxml" 

 是mx 的命名控件声明，Flex中的组件都在这各命名空间中。

 

<mx:Text x="130" y="41" text="Hello,{nameTxb.text}" id="hello"/>

其中text属性大括号中的内容包裹的其实是一个函数id为nameTxb的text属性的get函数

 

<mx:Button x="130" y="133" label="魔法" id="btn" click="blur.play([magic])"/>

click属性里写的”blur.play([magic])“也是一个函数，实际上给在Button的click listener传入一个函数，当Button的click事件触发时，执行这个函数。

 

从这里你就可以看出，MXML和Actionscript 可以很好的融合，又一次加快了我们开发的效率

 

如果我们想把函数独立出来我们只要加入 Script 标签

<mx:Script>
	<![CDATA[
		//放入代码
	]]>
</mx:Script>

 

我们之前说Actionscript可以完全代替MXML，就拿hello这和Text控件来说，写成Actionscript是这样的

var hello:Text = new Text()
hello.text = "Hello,"+nameTxb.text
hello.x = 130
hello.y = 41

 

Button 写成Actionscript是这样的

var btn:Button = new Button()
btn.label = "魔法"
btn.x = 130
btn.y = 133
btn.addEventListener(MouseEvent.CLICK,onBtnClick)

function onBtnClick(MouseEvent e) : void {
   blur.paly([magic])
}

当然这段代码必须放在Script标签当中。

 

对于Actionscript语法的讲解会在后面的教程中有详细讲解，或者你也可以查看Actionscript手册

 

 

把Script脚本和用于前端布局的MXML写在一起是不是很丑？Flex早为我们想到了，可以采取CodeBehind的技术实现显示和行为分开，这个在以后的教程中会有详细的讲解。

评论

2 楼 allenwei 2009-06-05  

小蒽蒽 写道

真是好文章啊 对我超有用了  是黑夜大海中的灯塔     感谢作者 辛勤写作分享  超感谢

会继续关注学习地  加油 

谢谢你的关注，很抱歉，由于我最近一直没有坐flex开发了，这个系列已经搁置很久了。

1 楼 小蒽蒽 2009-05-13  

真是好文章啊 对我超有用了  是黑夜大海中的灯塔     感谢作者 辛勤写作分享  超感谢

会继续关注学习地  加油