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

baiyejianxin

* MXML是有Flex引入的，是用来藐视Flex应用程序界面的语言。
  MXMl基于XML，遵循W3C XML标准。MXML引入了丰富的标签，还可以扩展MXML标签，创建自己的组件。

* MXML的属性
  以小写字母开头，大小写混合，大部分属性可以作为子标签。
  
  等价于
  
    oooooooooooooo
* MXML文件结构
  描述应用程序的MXML文件必须有一个位于其他元素之外的Application标签。
  定义了一个程序的根标签。
?xml version="1.0"?>
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   
/mx:Application>
其中，声明了xml的命名空间，命名空间可以让用户在单个文档中使用多重xml语言，而避免混淆不用语言中相同的元素名称，这里的“:mx”就是一个特定的命名空间中使用的前缀，这里定义的命名空间是标准的MXML类库，他必须包含在每个MXML文件中。
    定义组件的MXML不一定都以Application标签开始，也可以将Flex的组件作为开始，例如使用画布容器(Canvas Container)作为自定义组件的容器，代码如下  
?xml version="1.0" encoding="utf-8"?>
mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    !-- 定义的组件 -->
/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="http://www.adobe.com/2006/mxml" 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="http://www.adobe.com/2006/mxml" 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="http://www.adobe.com/2006/mxml" 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>
实现效果




本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/93876/showart_2164140.html