- 浏览: 248204 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
1. MXML语法
MXML语言是专门用于Flex程序中,描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。
1.1 命名规范
MXML区分大小写,且文件名和变量标示名都区分大小写。
MXML文件以mxml作为扩展名,文件名要遵循AS中变量的命名规则。
所有的MXML都被视为用户自定义的组件,相当于对象,可以使用代码动态创建。
变量名必须以字母或下划线开始,且只能包含字母、数字和下划线。
不能命名为application ,application 是主程序文件的默认标记,不可再使用。
程序不能使用“mx”做为目录名,mx 是官方组件库的命名空间。
2.2 MXML 文件结构
MXML为标准的XML文件。
我们以一个MXML文件来说明:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ internal function doClick():void{ tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'; } ]]> </mx:Script> <mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/> <mx:Label id="tip_txt" x="41" y="41" text="你好,Flex" fontSize="12"/> </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 Builder2的安装路径下的Flex SDK 2\frameworks目录中找到。并找到如下代码。
<namespaces> <!-- Specify a URI to associate with a manifest of components for use as 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"?> <componentPackage> <component id="Accordion" class="mx.containers.Accordion"/> .................... .................... <component id="WebServiceOperation" class="mx.rpc.soap.mxml.Operation"/> <component id="RemoteObject" class="mx.rpc.remoting.mxml.RemoteObject"/> <component id="RemoteObjectOperation" class="mx.rpc.remoting.mxml.Operation"/> <component id="HTTPService" class="mx.rpc.http.mxml.HTTPService"/> <component id="Consumer" class="mx.messaging.Consumer"/> <component id="Producer" class="mx.messaging.Producer"/> </componentPackage>
<component id="Accordion" class="mx.containers.Accordion"/>
中的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 version="1.0" encoding="utf-8"?> <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" source="pic/9.jpg"> </mx:Image>
然后在程序中就可以使用该自定义的组件,将其从用户面板拖入到编辑区,图片显示正常。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"> <mx:Script> <![CDATA[ internal function doClick():void{ private function _btn_click(event:MouseEvent):void{ tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'; } } ]]> </mx:Script> <mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/> <mx:Label id="tip_txt" x="41" y="41" text="你好,Flex" fontSize="12"/> <ns1:imageEnboga x="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来处理事件
比如
<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块
<mx:Script> <![CDATA[ //这里是AS代码 ]]> </mx:Script>
此标签可以放在根节点内的任何位置,同时必须用CDATA将代码包起来。CDATA不能嵌套使用。
AS中的注释是 //单行注释 /*多行注释*/
MXML中的注释和XML一样<!-- 注释-->
4.2 创建外部AS文件
New->ActionScript file 可以创建一个外部AS文件
<mx:Script source="my.as"/>
在程序中可以使用上面的代码导入。
4.3 创建AS类文件
New->ActionScript Class 可以创建一个AS类文件
package { public class Test { function Test(){ trace("Test"); } } }
上面代码创建了一个Test类,在构造函数Test()中在控制台打印Test。
在主程序中可调用:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()"> <mx:Script> <![CDATA[ internal function initApp():void{ var myTest:Test = new Test(); } ]]> </mx:Script> </mx:Application>
applicationComplete是Application对象的一个事件,程序初始化后触发此事件。
var myTest:Test = new Test()这个代码的作用是创建一个Test对象,创建对象用new关键字。
5 编辑非可视化对象
创建数据
<mx:Array id="array_data"> <mx:String>Flex developer</mx:String> <mx:String>Flash developer</mx:String> <mx:String>Web developer</mx:String> <mx:String>Mobile developer</mx:String> </mx:Array>
定义1个包含4个字符串元素的数组,相当于下面的代码
<mx:Script> <![CDATA[ public var array_data:Array = new Array(); array_data.push("Flex developer"); array_data.push("Flash developer"); array_data.push("Web developer"); array_data.push("Mobile developer"); ]]> </mx:Script>
定义好数组之后,可以作为List或者其他组件的数据源dataProvider
<mx:List x="20" y="20" dataProvider="{array_data}" width="180"></mx:List>
<mx:XML id="myData"> <node label="资料"> <node label="Music"> <node label="古典"/> <node label="摇滚"/> <node label="民歌"/> </node> <node label="Movie"> <node label="法国"/> <node label="美国"/> </node> </node> </mx:XML>
创建一段XML做为Tree树型组件的数据源。
<mx:Tree x="20" y="200" labelField="@label" dataProvider="{myData}" width="180"></mx:Tree>
用MXML语句创建类实例
<view:Test></view:Test>
这样就创建了之前定义的Test类的实例。相当于用AS new一个出来
评论
[SWF] D:\Program Files\FlexDemo\bin\FirstFlexDemo.swf - 566,566 bytes after decompression
TypeError: Error #1034: 强制转换类型失败:无法将 "test" 转换为 flash.trace.Trace。
at com.longtop.myAs::Test()[D:\Program Files\FlexDemo\src\com\longtop\myAs\Test.as:9]
at FirstFlexDemo/initApp()[D:\Program Files\FlexDemo\src\FirstFlexDemo.mxml:10]
at FirstFlexDemo/___FirstFlexDemo_Application1_applicationComplete()[D:\Program Files\FlexDemo\src\FirstFlexDemo.mxml:3]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9156]
at mx.managers::SystemManager/preloader_preloaderDoneHandler()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2265]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/displayClassCompleteHandler()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\preloaders\Preloader.as:434]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::DownloadProgressBar/timerHandler()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\preloaders\DownloadProgressBar.as:1451]
at mx.preloaders::DownloadProgressBar/initCompleteHandler()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\preloaders\DownloadProgressBar.as:1503]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/dispatchAppEndEvent()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\preloaders\Preloader.as:291]
at mx.preloaders::Preloader/appCreationCompleteHandler()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\preloaders\Preloader.as:442]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9156]
at mx.core::UIComponent/set initialized()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:1167]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:701]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8565]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8508]
发表评论
-
如何使用Cairngorm3的导航库(Spring AS)
2011-08-29 17:39 2855一、概述 二、LIB库包配置 下载需要的LIB库 ... -
Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果
2008-09-28 16:47 37656.3.2 放缩效果和调整大 ... -
Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果
2008-09-27 22:33 31316.3.1 模糊效果和发光效 ... -
Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
2008-08-17 01:30 21796.1 认识行为对象 6.1.1 什么是行为对象 行 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32159.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 28329.2.1 函数和类级别的绑 ... -
Flex学习笔记_09 数据绑定_概念、使用
2008-07-21 23:32 20429.1 认识数据绑定 9.1.1 数据绑定的概念 ... -
Flex学习笔记_08 Flex的事件机制_高级应用
2008-07-16 23:11 31728.3 事件机制的高级应用 8.3.1 事件的优先级别和 ... -
Flex学习笔记_08 Flex的事件机制_事件工作流程
2008-07-15 09:05 26878.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex学习笔记_08 Flex的事件机制_事件架构
2008-07-14 08:54 24558.1 一切从事件开始 8.1.1 关于事件 事件有 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础_数据类型及其运算、程序流程
2008-07-13 19:21 46097.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 28537.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 25543. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_02导航类组件
2008-07-02 00:04 29622. 导航类组件 2.1 ToggleButtonBa ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(下)
2008-06-30 10:37 4576Flex学习笔记_06 使用组 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(中)
2008-06-29 22:50 3934Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(上)
2008-06-26 23:11 4490Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
2008-06-25 08:40 6681本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
2008-06-24 09:07 5070本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局
2008-06-23 23:52 5609本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ...
相关推荐
flex4+arcgis10的例子,和官网上的一样。。。方便大家研究,谢谢 。。。。。。。。。。。。。。。。。。。。。。
About MXML programming files and Flex usage.
3.3 MXML Module模块应用 16 3.4 表单 16 3.5 对话框 17 3.6 列表 18 3.7弹出菜单 19 3.8复杂用户交互应用结构 21 3.8.1 Tree高级应用 21 3.8.2 DataGrid 22 3.9导航容器,导航菜单 22 4.Flex美化应用 24 4.1使用组件...
MXML语言和ActionScript语言都是需要编译后才能运行的。Flash Builder 4开发环境中集成了两者的编译器,用户只需选择相应的编译运行命令。 本书在介绍第一个Flex程序“Hello World”程序时,简单地介绍了了如何编译...
pdf格式的flex的mxml语法,适合想学习flex的新手
This is a Flex UIComponent that can be used 谋n a FLEX 3 mxml application as component written in action script 3.0, provides you to create items that cab be filled from an XML or Query ResultSet or ...
Flex_4.0_RIA开发详解讲义,大概有600多页。
MXML语法.MXML flexview actionscript
一个上课用的ppt文档,更容易让你对mxml更为的了解。。
xml文件解析,可以实现XML文件的解析功能
minixml2.5最新的版本。 嵌入式xml 解析、查找、生成、遍历 功能,全部实现是标准c,移植很容易。 最新的2.5,修改了很多bug。 这个压缩包,里下载完了,直接就可以在liunx下编译安装。 如果是在windows下的话,只需要...
Web development mxml integrated in html
Flex4视频教程_02-02用mxml自定义事件.rar
Flex Chart+WebService由于发布时没有注意,忘了把MXML的源码打包。webservice采用的是Myeclipse自带的XFIRES,可自行添加。
MXML语言是专门用于Flex程序中,描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。
flex -MXML语法,介绍flex 的 mxml的基本语法构成,适合一般学习者使用
如果你的flex插件出现mxml无法打开的问题,请下载此文件,同时参考:http://www.tekool.net/blog/2008/06/28/flex-builder-3-plugin-dont-work-with-eclipse-34/或者:...
flex入门教程,主要介绍了mxml和ActionScript的简单应用,适合初学者,高手就没必要下载啦
一个用C语言实现的XML编解码软件,可用在Linux/Windows系统下。
flex+flash+mxml = 绚丽相册实现 简单精美欢迎下载