一个Flex应用程序有ActionScript和MXML两种语言代码组成。
MXML
MXML是一个XML语言,你可以使用它来为Adobe Flex 应用程序布局用户界面。也可以使用MXML来定义程序的非可视组件,比如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。
比如,你可以使用如下的MXML语言,通过<mx:Button>
标签创建一个按钮控件实例:
mx:Button id="myButton" label="I'm a button!"/
ActionScript
MXML标签对应ActionScript类或类道具。当你编译Flex程序,Flex分析MXML标签并生成对应的ActionScript类。然后编译器把这些ActionScript类编译成存储在SWF文件中的SWF字节码。上面的例子,Flex提供了定义Flex按钮控件的ActionScript 按钮类。
下面的例子示范了如何使用ActionScript创建按钮控件。结果和使用MXML的一样。
<?xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300" height="80"
>
[CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
private var myButton:Button;
private function creationCompleteHandler():void
{
// Create a Button instance and set its label
myButton = new Button();
myButton.label = "I'm a button!";
// Get notified once button component has been created and processed for layout
myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
// Add the Button instance to the DisplayList
addChild (myButton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void
{
// Center the button
myButton.x = parent.width/2 - myButton.width/2;
myButton.y = parent.height/2 - myButton.height/2;
}
]]>
当通过ActionScript创建Flex组件时,必须导入组件的类。也必须使用addChild()程序把组件加入到程序的DisplayList中使其可见。通过比较此例与相同MXML版本的长度与复杂度,你可以看到简单、基于标签、声明式语法的MXML语言是如何节省你编写多行ActionScript代码来布局组件的时间的。