flex 学习资料（关于as和mxml工作）

在Flex 应用程序中使用ActionScript

Flex 开发人员可以使用ActionScript 来实现Flex 应用程序中的客户需求。首先你可以使用MXML 标签来定义你的应用程序中所需要的事物，比如容器，控件，效果，格式化组件，校验组件以及web services ，然后在用户界面上进行排列布局。这些组件中的每一个都能提供一些你所希望有的标准行为。例如，按钮组件可以不用写任何AS 代码就可以自动实现鼠标移上去的时候按钮高亮的功能。但是当用户点击按钮后完成的动作就不太适合用类似于MXML 这种说明性的语言来编码。所以，你需要使用类似于ActionScript 的过程语言，ActionScript 可以提供可执行的方法，各种不同的存储变量，和用条件表达式，循环表达式实现的流程控制。一般来讲，MXML 实现的是应用程序的静态方面，而ActionScript 实现的是应用程序的动态的方面。

ActionScript 是基于ECMAScript(ECMA-262) 第四版本草案语言规范的面向对象的过程编程语言。你可以使用各种不同的方法来混合ActionScript 以及MXML, 如下列所示：

<!-- [if !supportLists]-->§                  <!-- [endif]-->在MXML 的事件属性中用ActionScript 定义事件监听器。

<!-- [if !supportLists]-->§                  <!-- [endif]-->使用<mx:Script> 标签添加脚本块。

<!-- [if !supportLists]-->§                  <!-- [endif]-->可以加载外部的ActionScript 代码文件。

<!-- [if !supportLists]-->§                  <!-- [endif]-->从外部引用ActionScript 类。

<!-- [if !supportLists]-->§                  <!-- [endif]-->创建ActionScript 组件。

 

ActionScript 编译

尽管简单的Flex 应用程序可以用单个的MXML 或ActionScript(AS) 文件来开发，不过大部分的应用程序仍然要用多个文件来开发。

例如，将<mx:Script> 和<mx:Style> 放到<mx:Application> 里可以把应用程序需要引用的AS 和CSS 文件分离出去，这是很常见的。而在应用程序中从外部引用自定义的MXML 和ActionScript 组件这也是司空见惯的。这些必须在其他的文件中定义，并且MXML 组件应该将自身的<mx:Script> 块代码放到组件可以引用的外部的AS 文件中去。

引用组件最好应该从已经预先编译好的SWC 文件中引用而不是从源代码中引用。最后，SWF 文件包含了可以被嵌入到应用程序中的可执行的代码。最终而言，所有的这些文件都会形成一个单个的SWF 文件。

Flex 编译器会将主MXML 文件以及它引用的其他的文件转换为单个的ActionScript 类。在MXML 文件中你无法定义类或者在函数的外部不能写代码语句和已经引用的ActionScript 文件。

 

你可以在MXML 应用程序中引用从外部加载的ActionScript 类，并且这些类会编译进最终的SWF 文件中去。当完成了转换为ActionScript 文件这个过程后，Flex 会将所有的ActionScript 组件和加载的类文件全部编译成最终的SWF 文件。

 

About generated ActionScript

关于生成的ActionScript

当你编写MXML 文件并且编译它的时候，Flex 编译器会创建类和生成后的ActionScript 文件以供该类使用。MXML 标签和ActionScript 会有几种方式被最终生成类来调用。着对于你了解程序的背后是如何发生的是很有帮助的。

一个MXML 程序( 以<mx:Application> 标签为开头的文件) 定义了应用程序类的子类。同样的，一个MXML 组件( 以其他的组件标签为开头的文件，比如<mx:Button>) 定义了组件的子类。

子类的名字就是文件的名字。基类就是最顶级标签的类。一个MXML 应用程序事实上就是下面的定义：

class MyApp extends Application

如果MyButton.mxml 是以<mx:Button> 为开头的，事实上你可以像下面这样定义：

class MyButton extends Button

在<mx:Script> 块中的变量和函数声明定义了子类的属性和方法。

设置了组件的实例的id 属性会成为一个公共变量，而该变量为包含组件实例的引用的子类。例如，如果<mx:Button id=”myButton”> 标签深度嵌套在几个容器中，你仍然可以通过使用myButton 来引用它。

事件属性变为子类自动生成的事件监听方法的本身。例如：

<mx:Button id="myButton" click="foo = 1; doSomething()">

变为：

private function __myButton_click(event:MouseEvent):void {

    foo = 1;

    doSomething()

}

由于事件属性为函数本身，因此事件也可以调用子类的其他的属性和方法。

MXML 文件中任意的ActionScript 代码，无论是在<mx:Script> 块中，还是在标签里的代码，都可以使用关键字来引用子类的实例并运行。

The public properties and methods of the class are accessible by ActionScript code in other components, as long as that code "dots down"

类的公共属性和方法可以被其他的组件的ActionScript 代码访问，这要用到向下的点字符。( 例如，myCheckoutAccordion.myAddressForm.firstNameTextInput.text) 或者通过使用parentDocument, parentApplication, or Application.application 来指定属性方法所在的组件。

 

在MXML 事件句柄中使用ActionScript

在Flex 应用程序中使用ActionScript 代码的一种方式是将代码写在MXML 标签的事件句柄中，如下例所示：

<?xml version="1.0"?>

<!-- usingas/HelloWorldAS.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

  <mx:Panel title="My Application"  height="128" x="226" y="24" layout="absolute">

     <mx:TextArea id="textarea1" width="155" x="0" y="0"/>

     <mx:Button label="Click Me"

        click="textarea1.text='Hello World';"

         width="92"

        x="31.5"

        y="56"

     />

  </mx:Panel>

</mx:Application>

 

在该例中，将ActionScript 代码写在了Button 控件的click 事件句柄中。MXML 编译器会获取click=”…” 属性并且生成为下面的事件方法：

public function __myButton_click(event:MouseEvent):void {

    textarea1.text='Hello World';

}

 

当用户点击按钮的时候，代码会将TextArea 控件的text 值设为”Hello World” 。在大多数情况下，你不需要看生成后的代码，但这将对你理解事件句柄中的代码是如何运行的有很大的用处。

如果要看生成后的代码，请将编译器的选项keep-generated-actionscript 设为true. 编译器会将*.as 帮助文件存放在/ 生成后的 目录，该目录为SWF 文件所在目录的子目录里。

 

Using ActionScript blocks in MXML files

在MXML 文件中使用ActionScript 块代码

你可以在MXML 中使用<mx:Script> 标签来写ActionScript 代码块。ActionScript 代码块中可以包含MXML 应用程序需要用到的函数和变量定义。<mx:Script> 标签中的代码同样也可以定义静态变量（通过const 语句）和命名空间( 通过namespace 语句) ，引入ActionScript 文件( 通过include 语句) ，导入定义( 通过import 语句) ，和使用命名空间( 通过namespace) 。

<mx:Script> 标签必须是<mx:Application> 的子标签或者其他的顶级组件标签。

语句和表达式仅仅被允许在函数中使用。另外，你不能在<mx:Script> 块中定义新的类或接口。取而代之的是，你必须在另外单独的AS 文件中定义新的类和接口然后你再导入它。

当Flex 编译程序的时候，代码块中的所有的ActionScript 会添加到封闭文件类中去。接下的例子中在函数中定义了变量并且设置的变量的值：

<?xml version="1.0"?>

<!-- usingas/StatementSyntax.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doSomething()">

    <mx:Script><![CDATA[

            public var s:Boolean;

            public function doSomething():void {

                // 下面的语句必须包含在函数中.

                s = label1.visible;

                label1.text = "label1.visible = " + String(s);

            }

    ]]></mx:Script>

   

    <mx:Label id="label1"/>

   

</mx:Application>

 

大多数的语句必须包含在<mx:Script> 代码块的函数中。然而，下面的语句可以在函数外部：

<!-- [if !supportLists]-->§                  <!-- [endif]-->import

<!-- [if !supportLists]-->§                  <!-- [endif]-->var

<!-- [if !supportLists]-->§                  <!-- [endif]-->include

<!-- [if !supportLists]-->§                  <!-- [endif]-->const

<!-- [if !supportLists]-->§                  <!-- [endif]-->namespace

<!-- [if !supportLists]-->§                  <!-- [endif]-->use namespace

When using an <mx:Script> block, you should wrap the contents in a CDATA construct. This prevents the compiler from interpreting the contents of the script block as XML, and allows the ActionScript to be properly generated. Adobe recommends that you write all your <mx:Script> open and close tags as the following example shows:

当使用<mx:Script> 代码块的时候，你应该将代码内容放入CDATA 结构中去。这样做会防止编译器将脚本块中的内容解释为XML, 并且能生成为合适的ActionScript.Adobe 推荐你写<mx:Script> 标签时应该像下面的例子显示的那样：

<mx:Script>

    <![CDATA[

        ...

    ]]>

</mx:Script>

 

Flex 不能解析不在CDATA 中的文本，意思是你可以使用一些XML 的解析字符，比如尖括号(< 和 >) 以及 & 符号。例如，在下面的例子中，包含了小于符号(<) 的代码必须在CDATA 结构中：

<?xml version="1.0"?>

<!-- usingas/UsingCDATA.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doSomething()">

    <mx:Script><![CDATA[

        public var m:Number;

        public var n:Number;

        public function doSomething():void {

            n = 42;

            m = 40;

            label1.text = "42 > 40 = " + String(n > m);

        }

    ]]></mx:Script>

   

    <mx:Label id="label1"/>

   

</mx:Application>