随笔:12 文章:3 评论:69 引用:0
小胖&大胖
Art is long , and time is fleeting.
首页
发新文章
联系
聚合
管理
Flex学习笔记(一)
Flex简介
Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。
---Adobe
如果让我来形容的话,只有一句话说"Flex is the future!"。
FB的安装我就不说了,可以直接从adobe网站上下载,然后从下面找个号码注册一下就欧了。
1377-4364-8105-1017-5779-4100
1377-4864-2155-4708-3713-2066
1377-4561-2389-2527-0543-9076
1377-4167-2588-8404-4842-4168
1377-4469-0634-7084-5700-9553
一、Flex基础
1)Flex程序一般是由mxml文件,as文件(actionScript文件),css文件组成的。
2)通过mxml文件(mx:application)来调用as文件和css文件。
3)mxml文件的命名规则
①mxml区分大小写。
②mxml文件名不能用"Application"命名(application倒是可以使用)。
③mxml文件名不能和程序中任何一个组件的ID的名字相同。
比如有一个名叫test.mxml的文件,它的代码如下
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
>
3
<
mx:Button
name
="applications"
id
="test"
/>
4
</
mx:Application
>
报出一个error:
1
'test': identifier and class may not have the same name.
二、MXML文件结构
1)先看一个最简单的mxml文件
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
>
3
</
mx:Application
>
①version:声明xml语法的版本号。
②encoding:声明xml的字符集。
③mx:Application:文件主入口的标志,一个工程可以有多个mxml,但只能有一个mx:Application。
④xmlns:mx:定义了xml的命名空间。
我们打开Flex builder\sdks\3.0.0\frameworks\flex-config.xml,看到这样一段话
1
<
namespaces
>
2
<!--
Specify a URI to associate with a manifest of components for use as MXML
-->
3
<!--
elements.
-->
4
<
namespace
>
5
<
uri
>
http://www.adobe.com/2006/mxml
</
uri
>
6
<
manifest
>
mxml-manifest.xml
</
manifest
>
7
</
namespace
>
8
</
namespaces
>
可以看到flex通过
http://www.adobe.com/2006/mxml
这个资源标识符,对应了一个xml文件
我们打开同一目录下的mxml-manifest.xml文件,里面列出了mxml中所有标签以及与其相关联的类。
1
<
componentPackage
>
2
3
<!--
airframework
-->
4
<
component
id
="FileSystemComboBox"
class
="mx.controls.FileSystemComboBox"
/>
5
<
component
id
="FileSystemDataGrid"
class
="mx.controls.FileSystemDataGrid"
/>
6
。。。。。。
7
8
</
componentPackage
>
9
⑤layouy:定义了页面的布局方式。'absolute'表示使用绝对位置,它内部包含的所有子元素都是通过x,y坐标来定位布局的。
三、MXML组件学习
1)mxml组件按照它的作用和功能可以分为三大类
①容器类(提供页面布局)
②导航类(菜单,导航器等)
③交互类(button,checkbox等)
2)自定义组件的访问
语法格式如下:
自定义组件所在的命名空间:自定义组件名(mxml文件名)
eg.我们来声明一个名叫"test.xml"的自定义组件,代码如下
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Button
xmlns:mx
="http://www.adobe.com/2006/mxml"
/>
3
然后我们在主mxml中调用它
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
xmlns:buttons
="*"
>
3
<
buttons:test
/>
4
</
mx:Application
>
四、ActionScript文件
1)所有mxml文件经过编译后,都会编译成as文件。
2)mxml文件中通过<mx:Script>标签来访问内部as代码块。不过在xml中'<'和'&'是禁止使用的。所以应该用如下的方式访问
1
<
mx:Script
>
2
<![CDATA[
3
4
5
]]>
6
</
mx:Script
>
3)访问外部的ActionScript文件
1
<
mx:Script
source
="XXXX.as"
/>
4)关于注释
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
xmlns:buttons
="*"
>
3
<
buttons:test
/>
4
<
mx:Script
>
5
<![CDATA[
6
// 单行注释
7
/*
8
多行注释
9
*/
10
]]>
11
</
mx:Script
>
12
<!--
MXML注释
-->
13
</
mx:Application
>
进入下一章《 Flex学习笔记(二) 》
好了,第一章先到这里吧,有不对的地方欢迎大家指摘问题。
2008年7月20日22:59:59
Alps Wong
发表于 2008-07-20 22:59
Alps Wong
阅读(3238)
评论(11)
编辑
收藏
所属分类:
Flex
评论
#
re: Flex学习笔记(一)
很好,期待阅读你的后续文章
#
re: Flex学习笔记(一)
不错,支持个先。
#
re: Flex学习笔记(一)
你好,文章看过,很不错哦。
我能不能转载啊?
#
re: Flex学习笔记(一)
@shellway
Enjoy it! ^_^
#
re: Flex学习笔记(一)
写的好,想请教下Flex主要应用在什么场景?楼主使用Flex开发的web application会不会觉得存在Performance问题?
#
re: Flex学习笔记(一)
@ANTI CPC
性能确实是一个瓶颈,不过有很多办法来优化我们的程序。
您可以看一下这篇文章,写的很不错。^_^
http://wmcai.blog.163.com/blog/static/480242007824431259/
#
re: Flex学习笔记(一)
谢谢楼主。
#
re: Flex学习笔记(一)
great!
I,m learning flex,too.
#
re: Flex学习笔记(一)
很好,学习中......
#
re: Flex学习笔记(一)[未登录]
很清晰 易懂 谢谢了
#
re: Flex学习笔记(一)
写的非常好,言简意赅,通俗易懂,非常适合入门.
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
Flex学习笔记(五)
Flex学习笔记(四)
Flex学习笔记(三)
Flex学习笔记(二)
Flex学习笔记(一)
CALENDER
<
2008年7月
>
日
一
二
三
四
五
六
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
公告
静 水 流 深
留言簿
(5)
给我留言
查看公开留言
查看私人留言
随笔分类
Cloud(2)
(rss)
Extjs(3)
(rss)
Flex(5)
(rss)
Linux(3)
(rss)
Open Source(2)
(rss)
随笔档案
2011年8月 (3)
2010年9月 (2)
2009年6月 (1)
2009年4月 (1)
2009年3月 (2)
2008年8月 (2)
2008年7月 (4)
文章分类
Ext
(rss)
Flex
(rss)
Open Source
(rss)
Struts2.0
(rss)
最新评论
1. re: Flex学习笔记(三)
675210029@qq.com
Thanks a lot!
--Eons
2. re: Flex学习笔记(三)
michaelcrystallee@126.com
--crystallee
3. re: Extjs 初探(1)[未登录]
sw
--aa
4. re: Flex学习笔记(一)
写的非常好,言简意赅,通俗易懂,非常适合入门.
--一江东水
5. re: Flex学习笔记(三)
楼主,很好的学习笔记,太感谢,能够将您做的东东给我发一份?谢谢。
--ht
阅读排行榜
1. Mantis安装及配置手顺(10104)
2. Flex学习笔记(二)(4588)
3. Flex学习笔记(四)(4459)
4. Extjs 初探(2)(4294)
5. Extjs 初探(1)(3602)
评论排行榜
1. Flex学习笔记(三)(40)
2. Flex学习笔记(一)(11)
3. Mantis安装及配置手顺(6)
4. Flex学习笔记(二)(4)
5. Flex学习笔记(五)(3)
Powered By:
博客园
模板提供
:
沪江博客