第一步-------了解和使用Actionscript 和 MXML

 

使用MXML 和 Actionscript

首先我们先了解什么是Adobe Flex，Adobe Flex 是由Actionscript（简称as） 类仓库组成的。这个类库包括许多组件（容器和控件），管理类，数据服务类，还有很多实现其他功能的类，今后我们就用as和MXML和这些类库来开发我们应用程序；

 

---

MXML

---

MXML 是一中xml语言。在开发Flex的应用程序的时候主要用来布局用户界面，也可以使用MXML 定义一些不可视的对象，比如httpservice，通过后台接口得到数据，映射到客户端数据源，然后显示到用户界面。（这个数据管理和后台通信里会详细说明），这里主要介绍布局可视化对

比如我们使用MXML的<mx:Button>标签创建一个按钮控件的实例：

<mx:Button id = “btn” label = “按钮”>

 

其中id属性是用来设置按钮唯一的名称，以后可以用这个名称控制他。Label属性用来设置按钮文字显示。

下面的例子显示了完整的代码需要建立一个弹性的应用程序显示一个Button控件：

<?xml version="1.0" encoding="utf-8"?> <mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"     horizontalAlign="center" verticalAlign="center">     <mx:Button id = “btn” label = “按钮”> </mx:Application>

Flex 程序写完后，就需要用Flex 编译器 编译生成swf文件，Flex 编译器是一个很小的可执行性文件名字叫 mxmlc 
Flex SDK 的bin文件夹里。如果你安装了flex builder 3，sdk就在这个路径里 ../Flex Builder 3/skds/3.00/bin

说明


新建一个文件用你喜欢的文字编辑工具，保存成比如first.mxml;

1. 把上边写的代码复制到first.mxml文件里，然后保存； 

2 .打开命令提示符 开始—附件—命令提示符； 

3. 改变命令提示符路径到你保存first.mxml的目录下； 

4. 敲下边这个命令到Flex 编译器里 ;

5. mxmlc --strict=ture --file-specs first.mxml
    以上命令中 双破折号（--）是告诉编译器，它们是Flex 编译器的可执行的行为，在上边这个例子中， 把‘--strict’ 设置
为true 是让编译器进入精确模式，在精确模式中，编译器对你的代码依赖性是很强的，比如它期望你严格的标明你的变量
类型，比如 var myMc:MovieClip;

 

这是上边例子生成的SWF文件

要点 ：你也可以用Flex Builder3 来创建和编译你的文件，Flex Builder 3 是一个整合开发环境，还可以使用Flex Builder 3 的设计模式轻松的布局你的用户界面。

 

 

---

ACTIONSCIRPT

---

 

  MXML  标签其实相当于 ActionScirpt 的类或者类的属性。当编译Flex 应用程序的时候，Flex 分析MXML标签然后生成

ActionScipt类。然后把这些类储存到SWF 文件里。

 

要点 ：看Flex 编译过程产生的过程和生产的中间文件，在命令提示符加上这个命令 --keep-generated-actionscipt

 

现在我们用Actionscript 来重新写一次上边的例子，Flex 提供了as 的Button 类来定义Flex 的按钮控件。

 

 

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/GettingStartedActionScript/index.html"   creationComplete="creationCompleteHandler();" width="300" height="80" >   <mx:Script>   <![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 = "按钮"; // 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; }   ]]> </mx:Script> </mx:Application>

和用MXML 生成的Swf文件一样

<script src="http://wwwimages.adobe.com/www.adobe.com/lib/com.adobe/module/InputTitleOverlay.js" type="text/javascript"></script> <script src="http://wwwimages.adobe.com/www.adobe.com/lib/com.adobe/swfobject.js" type="text/javascript"></script> <script src="http://wwwimages.adobe.com/www.adobe.com/lib/com.adobe/swfobject.addon.js" type="text/javascript"></script> <script src="http://wwwimages.adobe.com/www.adobe.com/lib/com.adobe/urlParser.js" type="text/javascript"></script>

<script src="http://www.adobe.com/uber/js/omtr_tc.js" type="text/javascript"></script>