Flex 3学习笔记-MXML简介（1）2010-01-29

 

* MXML是有Flex引入的，是用来藐视Flex应用程序界面的语言。

  MXMl基于XML，遵循W3C XML标准。MXML引入了丰富的标签，还可以扩展MXML标签，创建自己的组件。

 

* MXML的属性

  以小写字母开头，大小写混合，大部分属性可以作为子标签。

 

  等价于
 

    oooooooooooooo

* MXML文件结构

  描述应用程序的MXML文件必须有一个位于其他元素之外的Application标签。

  定义了一个程序的根标签。

<?xml version="1.0"?>
<mx:Application xmlns:mx="">

   

</mx:Application>

其中，声明了xml的命名空间，命名空间可以让用户在单个文档中使用多重xml语言，而避免混淆不用语言中相同的元素名称，这里的“:mx”就是一个特定的命名空间中使用的前缀，这里定义的命名空间是标准的MXML类库，他必须包含在每个MXML文件中。

    定义组件的MXML不一定都以Application标签开始，也可以将Flex的组件作为开始，例如使用画布容器(Canvas Container)作为自定义组件的容器，代码如下 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="">
    <!-- 定义的组件 -->
</mx:Canvas>

*标签

   MXML文件中直接插入ActionScript方法时要用到标签。如

<mx:Script>
    <![CDATA[
        //输入ActionScript
    ]]>
</mx:Script>

其中需要之一的有以下几点：

    1.标签要成对出现；

    2.不能在标签内定义任何类和接口，因为本身当前MXML文件就是一个类，而ActionScript没有像java一样支持内部类定义。

    3.CDATA的主要目的是告诉编译器标签内的内容不要被解释成MXML语法而是ActionScript。

    4.必须being定义在MXML文件的根层次，否则会出现编译器错误。

* 在标签的background属性来修改这个页面的背景。

* 定义界面组件

  如：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" backgroundColor="white">
    
    <mx:Script>
        <mx:Panel width="200" height="200" layout="absolute" title="使用xml定义组件">
        <mx:Label x="80" y="10" text="基本信息" width="50"/>
        <mx:FormItem x="20" y="40" width="160" label="姓名:">
            <mx:TextInput id="aName" width="80"/>
        </mx:FormItem>
        <mx:FormItem x="20" y="70" width="160" label="籍贯:">
            <mx:TextInput id="hometown" width="80"/>
        </mx:FormItem>
    </mx:Panel>
</mx:Application>

执行效果

* 自定义组件

首先创建一个compoent

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="" width="312" height="172" fontSize="14">
    <mx:Label x="10" y="10" text="选择付款银行"/>
    <mx:RadioButton x="94" y="87" label="招商银行" groupName="bank"/>
    <mx:RadioButton x="180" y="87" label="中国银行" groupName="bank"/>
    <mx:RadioButton x="94" y="117" label="建设银行" groupName="bank"/>
    <mx:RadioButton x="180" y="117" label="交通银行" groupName="bank"/>

</mx:Canvas>

然后创建application

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="" layout="absolute" xmlns:local="*" backgroundGradientColors="[#ffffff,#ffffff]">
   <mx:VBox borderStyle="outset" width="406" height="298" >
        <mx:Label text="下面显示的是自定义组件" fontSize="16"/>
        <!--引用自定义组件 -->
        <local:Test201001292compoent id="testCompoent"/>
   </mx:VBox>
</mx:Application>

实现效果