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

最新推荐文章于 2013-07-24 15:48:45 发布

最新推荐文章于 2013-07-24 15:48:45 发布 · 186 阅读

文章标签：

#ActionScript #Flex #360 #Adobe #XML

flex 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了MXML与Actionscript的关系及其如何在Flex开发中融合使用。MXML最终会被编译为Actionscript，两者可以相互替代。通过示例代码解释了MXML标记的功能及如何将MXML与Actionscript结合使用来提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节我们做了一个小程序，演示了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的技术实现显示和行为分开，这个在以后的教程中会有详细的讲解。