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类库，尽量用少一些的类的种类。