Flex学习记录(二)——深入理解MXML

一.MXML工作原理

前面我们学习了MXML的基本知识，但是MXML是怎么工作的呢？其实MXML最后都会通过一定的规则编译成AS3的形式，简单来说是其中MXML的文件名会成为AS3中的类名，MXML中的property会成为child，attribute会成为对象的属性，id会成为类的属性，下面将详细说明：

我们知道flex sdk下framework文件夹下有个flex-config.xml文件，通过修改这个文件我们可以定制Flex编译的行为。

将这个文件中的keep-generated-actionscript设置为true，我们将可以看到MXML文件生成的AS3代码。

例如我们定义如下的Main.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<local:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:local="*"
    xmlns:as="flash.text.*"
    width="200" height="200"

 >
<local:RectComp id="myrect" width="100" height="100" />
</local:Application>

这里我们先避免使用Spark和MX命名空间中的类以简化问题。

我们使用自定义的两个类

    [DefaultProperty( "children" )]
    [Bindable]
    public class Application extends Sprite
    {
      private var _width:Number;
      private var _height:Number;
        public function Application()
        {
            super();
            opaqueBackground = 0xffffff;
        
        }
       
        public function set children( value:Vector.<DisplayObject> ):void
        {
            if (_width>0 && _height>0 && (super.width != _width || super.height != _height) ){ 
            this.graphics.beginFill(opaqueBackground);
            this.graphics.drawRect(0, 0, _width, _height);
            this.graphics.endFill();
            super.width = _width;
            super.height = _height;
            
            while ( numChildren > 0 )
            {
                removeChildAt( 0 );
            }
            for each ( var child:DisplayObject in value )
            {
                addChild( child );
            }
        
            if (super.width != _width) {
                super.width = _width;
            }
            if (super.height  != _height) {
                super.height = _height;
            }
        }
       
   
        override public function set width(w:Number):void
        {
            if (this.numChildren > 0) {
                super.width = w;
            }
            _width = w;
        } 
        override public function set height(h:Number):void
        {
            if (this.numChildren > 0) {
                super.height = w;
            }
            _height = h;
        } 
    } 

    public class RectComp  extends Shape
    {
        
        public function RectComp() 
        {
            this.graphics.beginFill(0x000000);
            this.graphics.drawRect(0, 0, 100, 100);
            this.graphics.endFill();    
        }
    }

 

Flex将为我们生成一个Main类

public class Main
    extends Application
{
    //  instance variables
    [Bindable]
    public var myrect : RectComp;

    public function Main()
    {
        super();
        // properties
        this.width = 200;
        this.height = 200;
        this.children = new <flash.display.DisplayObject>[_Main_RectComp1_i()];
    }

    private function _Main_RectComp1_i() : RectComp
    {
    var temp : RectComp = new RectComp();
    temp.width = 100;
    temp.height = 100;
    myrect = temp;
    mx.binding.BindingManager.executeBindings(this, "myrect", myrect);
    return temp;
    }
}

可以看出，其中Main类名和MXML文件名对应。Main继承自local命名空间下的Application，与MXML的root tag对应。MXML中的id：myrect成了Main类中的属性，Application下的property成了Main类的child,attribute都成了对象的属性。

 

二.MXML的标签

MXML还有如下的一些标签:

fx:Binding

可以使用<fx:Binding> 标签将某个对象的数据绑定到另一个对象。


fx:Component

可以使用<fx:Component>标签在MXML文件中定义内联单元格渲染器或单元格编辑器。

 

fx:Declarations

可以使用<fx:Declarations>标签声明当前类的非默认、不可视属性。

 
fx:Definition
 
可以在<fx:Library>标签内使用<fx:Definition>标签定义图形子对象，然后可以将子对象用于应用程序的其他部分中。

 

fx:DesignLayer

<fx:DesignLayer>标签仅供内部使用。

 

fx:Library

可以使用<fx:Library>标签声明当前类的非默认、非可视属性。


fx:Metadata

使用<fx:Metadata>标签可以在MXML文件中插入metadata标签。


fx:Model

可以使用<fx:Model>标签在MXML中声明数据模型。

 

fx:Private

 
可以使用<fx:Private>标签提供有关MXML或FXG文档的元数据信息。

 

fx:Reparent
 

作为视图状态更改的一部分，可以使用<fx:Reparent> 标签更改某个组件的父容器。

 

fx:Script

可以使用<fx:Script>标签定义ActionScript代码块。

 

fx:Style


可以使用<fx:Style>标签定义适用于当前文档及其子项的样式。

三.flash的大小

flash的大小和代码中用到的类库大小有关，因为Spark和MX类库功能比较多，所以其类库也比较大，所以用这些类库的话会造成生成的flash比较大，一个空的Spark的Application用release编译也有200多k。而在使用类库的时候，涉及到的类越多，最后生成的flash就会越庞大。

比如假如MXML文件里已经有了一个label对象，再增加一个label对象基本对生成的flash文件大小没有影响，但是如果增加一个原来没有的button对象，将会使flash文件增加10多k。

所以当我们使用Flex时，如果功能比较简单，尽量不要使用Spark和MX类库，如果需要使用Spark和MX类库，尽量用少一些的类的种类。