flex---->MXML语法

MXML语言是专门用于Flex程序中，描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据、与服务器端通信的WebService、组件的数据源等。

1.1 命名规范

MXML区分大小写，且文件名和变量标示名都区分大小写。

MXML文件以mxml作为扩展名，文件名要遵循AS中变量的命名规则。

所有的MXML都被视为用户自定义的组件，相当于对象，可以使用代码动态创建。

变量名必须以字母或下划线开始，且只能包含字母、数字和下划线。

不能命名为application ，application 是主程序文件的默认标记，不可再使用。

程序不能使用“mx”做为目录名，mx 是官方组件库的命名空间。

2.2 MXML 文件结构

MXML为标准的XML文件。我们以一个MXML文件来说明：

Xml代码

<?xml version="1.0"encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
<mx:Script>
<![CDATA[
internalfunction doClick():void{
tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
}
]]>
</mx:Script>
<mx:Buttonx="41" y="90" label="Hello Flex"click="doClick()"/>
<mx:Label/>
</mx:Application>

第一行声明XML文件采用的语法版本version 和编码格式encoding（默认为utf-8）。

mx:Application：在每个Flex项目中，可能有多个MXML文件，mx:Application为根节点标示程序入口的运行文件。

xmlns:mx=http://www.adobe.com/2006/mxml ：将mx定义为XML的命名空间，对应路径为http://www.adobe.com/2006/mxml，Flex的配置文件中将这个路径定义为一个全局资源标识符，并对应了一个列出mx命名空间下的所有标签的文件。flex-config.xml中配置了命名空间。该文件可在Flex Builder的安装路径下的Flex SDK \frameworks目录中找到。并找到如下代码。

Xml代码

<namespaces>
<!-- Specify a URI to associate with a manifest of components for useas MXML -->
<!-- elements. -->
<namespace>
<uri>http://www.adobe.com/2006/mxml</uri>
<manifest>mxml-manifest.xml</manifest>
</namespace>
</namespaces>

从上面的配置发现，http://www.adobe.com/2006/mxml 这个URI和mxml-manifest.xml文件对应，找到该文件，里面列出了所有标签和与标签相关联的类文件路径。

<?xml version="1.0"?>

<!--

	ADOBE SYSTEMS INCORPORATED
	Copyright 2005-2007 Adobe Systems Incorporated
	All Rights Reserved.

	NOTICE: Adobe permits you to use, modify, and distribute this file
	in accordance with the terms of the license agreement accompanying it.

-->

<componentPackage>

	<!-- airframework -->
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />

	<!-- charts -->
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />

    <!-- fds -->
    <component />

    <!-- framework -->
	<component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
	<component />
	<component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
	<component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
	<component />
	<component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
	<component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />

	<!-- rpc -->
    <component />
    <component />  
    <component />  
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />
    <component />    
    <component />
    <component />

</componentPackage>

中的id代表标签名，class表示类文件路径。

xmlns:comp="comps.*" 定义一个命名空间，因为使用了通配符“*”，comps目录下的所有MXML和AS类（不包括子目录的文件）都被包括在comp命名空间下。如comps下有Login.mxml，则在程序中可这样调用：

<comp:Login></comp:Login>

Application 还有一个属性layout ，定义了该节点下元素的布局方式，也就是程序的总体布局方式。absolute 表示绝对定位，所有子元素将按照各自的x、y坐标来定位。

2. 使用组件

<mx:Button></mx:Button> 定义一个按钮组件

如果组件中未包含其他子元素可这样写：<mx:Button />

 

组件分类：

布局类：包括所有的容器组件，如：HBox、Panel等，Spacer、HRule、VRule不是容器，但是主要用于布局。

导航类：菜单条、按钮条等各种导航功能的组件。

交互类：内容展示、数据交互相关组件，如：按钮、下拉框、图片、视频等。

IDE中的组件面板列出了所有的可视化组件，可直接拖入编辑区使用。

通过IDE的代码提示输入<mx:跟进可以列出mx下的所有对象。

3. 自定义MXML组件

基于组件开发模式是Flex的一个特色，程序中所有的MXML和AS类文件，都被当作用户自定义的组件。

我们来建一个MXML组件：

New->MXML Component

在弹出的窗口输入组件的文件名Filename，并选择扩展哪一种组件Based on，我们这里选择Image对象。然后Finish。

然后点击Image组件，在属性面板的Source属性设置图片的路径。

Xml代码

<?xml version="1.0"encoding="utf-8"?>
<mx:Imagexmlns:mx="http://www.adobe.com/2006/mxml"source="pic/9.jpg">
</mx:Image>

然后在程序中就可以使用该自定义的组件，将其从用户面板拖入到编辑区，图片显示正常。

Xml代码

<?xml version="1.0"encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" xmlns:ns1="*">
<mx:Script>
<![CDATA[
internalfunction doClick():void{
privatefunction _btn_click(event:MouseEvent):void{
tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
} }
]]>
</mx:Script>

<mx:Buttonx="41" y="90" label="Hello Flex"click="doClick()"/>
<mx:Label/>
<ns1:imageEnbogax="205" y="90"/>
</mx:Application>

<ns1:imageEnboga x="205"y="90"/>就是我们拖入的自定义组件，程序自动添加了ns1命名空间。我们改变自定义组件的位置放到view文件夹，代码变成：<view:imageEnboga x="205"y="90"/>

4. 编写ActionScript

MXML文件经过编译最后也是被转换成AS来执行，在一个Flex程序中，主程序会被转换为Application对象的子类，自定义对象会被转换为父级对象的子类。

4.1 在MXML中使用AS

在组件的事件属性中使用AS来处理事件

比如Xml代码

<mx:Button  x="41"  y="90" label="Hello Flex"  click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"/>

上面代码中的click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"会被编译为

private function_btn_click(event:MouseEvent):void{
tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
}

这个函数被注册为按钮的点击事件侦听器，一旦点击事件触发，函数就会被调用。

在MXML中插入AS块

Xml代码

<mx:Script>
<![CDATA[
//这里是AS代码
]]>
</mx:Script>

此标签可以放在根节点内的任何位置，同时必须用CDATA将代码包起来。CDATA不能嵌套使用。

AS中的注释是 //单行注释

MXML中的注释和XML一样<!-- 注释-->

4.2 创建外部AS文件

New->ActionScript file 可以创建一个外部AS文件

Xml代码

<mx:Script source="my.as"/>在程序中可以使用上面的代码导入。

4.3 创建AS类文件

New->ActionScript Class 可以创建一个AS类文件

Xml代码

package
{
public class Test
{
function Test(){
trace("Test");
}
}
}

上面代码创建了一个Test类，在构造函数Test()中在控制台打印Test。

在主程序中可调用：

Xml代码

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

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"applicationComplete="initApp()">

<mx:Script>
<![CDATA[
internalfunction initApp():void{
var myTest:Test = new Test();
}
]]>

</mx:Script>
</mx:Application>

applicationComplete是Application对象的一个事件，程序初始化后触发此事件。

var myTest:Test = new Test()这个代码的作用是创建一个Test对象，创建对象用new关键字。

5 编辑非可视化对象

创建数据

Xml代码

 <fx:Array >
   <fx:String>Flexdeveloper</fx:String>
   <fx:String>Flashdeveloper</fx:String>
   <fx:String>Webdeveloper</fx:String>
   <fx:String>Mobiledeveloper</fx:String>
 </fx:Array>

定义1个包含4个字符串元素的数组，相当于下面的代码

Xml代码

<mx:Script>
<![CDATA[
publicvar array_data:Array = new Array();
array_data.push("Flexdeveloper");
array_data.push("Flashdeveloper");
array_data.push("Webdeveloper");
array_data.push("Mobiledeveloper");
]]>
</mx:Script>

定义好数组之后，可以作为List或者其他组件的数据源dataProvider

<mx:List x="20" y="20" dataProvider="{array_data}"width="180"></mx:List>

Xml代码

 <fx:XML >
   <node label="资料">
    <node label="Music">
     <node label="古典"/>
     <node label="摇滚"/>
     <node label="民歌"/>
   </node>
   <node label="Movie">
    <node label="法国"/>
    <node label="美国"/>
   </node>
          </node>
  </fx:XML>

创建一段XML做为Tree树型组件的数据源。

<mx:Tree x="20" y="190" labelField="@label" dataProvider="{myData}" width="180"> </mx:Tree>

用MXML语句创建类实例

<view:Test></view:Test>

这样就创建了之前定义的Test类的实例。相当于用AS new一个出来

相关文章：

  • 2022-12-23
  • 2021-05-27
  • 2022-02-10
  • 2021-09-22
  • 2021-04-18
  • 2021-10-29
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-12-03
  • 2022-12-23
  • 2022-12-23
  • 2021-08-30
  • 2021-07-04
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode