Flex学习笔记Word下载.docx
- 文档编号:20210736
- 上传时间:2023-01-19
- 格式:DOCX
- 页数:117
- 大小:247.92KB
Flex学习笔记Word下载.docx
《Flex学习笔记Word下载.docx》由会员分享,可在线阅读,更多相关《Flex学习笔记Word下载.docx(117页珍藏版)》请在冰豆网上搜索。
遵从ECMAScript语言规范。
添加了正则表达式支持,提供了处理复杂字符串的技术支持。
增强处理运行错误的能力,更全面支持对象,支持二进制数据处理,支持Socket,提供FlashPlayerAPI等待。
FlexFramework2.0:
基于MXML和AS的应用开发框架。
是Flex2.0的核心,提供了一套丰富的可扩展的用户界面组件、一个用来控制布局和用户交互的灵活模型以及一个功能强大的基础架构。
FlexBuider2.0:
在Eclipse的基础上从头编写,并集合了FlexFramework和AS3.0的功能强劲的IDE。
FlexDataServices:
和Flex配合使用的数据服务器软件,提供了企业级的数据服务和即时通信的功能。
支持Remoting通信方式。
FlexChartingComponents2:
强大的图表组件。
FlashPlayer9.0:
改进虚拟机的脚本运行,包含AVM2(ActionScriptVirtualMachine)的AS虚拟机和AS3.0。
速度快,支持运行时报错,遵循业界标准的调试方式,执行AS的效率比以前高出10倍。
并兼容早期版本。
Flex学习笔记_02Flex的安装和开发环境的建立1.下载FlexAdobe官方网站(http:
/)SDK:
可独立安装,FlexFramework包含在SDK中。
SDK中配有Flex编译器。
FlexBuidler:
整合SDK,Flex强大的开发IDE。
30天免费。
$499。
另有一套功能强大的图标组件(FlexCharting),含该组件是$799。
书上说的是2.0版本。
现在官方已经发布了3.0版本。
至于FlexBuidler的下载,由于太贵了,俺们不可能购买。
我想你也不可能购买。
SO。
破解版本下载如下:
http:
/2.安装Flex以下免去安装硬件信息。
现在大部分机子都支持吧。
不支持的话。
你的PC可以扔了。
Windows平台java虚拟机:
1.4.2(FlexBuidler中已内置)或1.5插件安装模式下的软件要求:
Eclipse3.1/3.2版本,BEAWorkshop3.2.1,IBMRationalSoftwareArchitect7.0Macintosh平台java虚拟机:
1.5插件安装模式下的软件要求:
Eclipse3.2FlexBuidler2.0提供了两种安装模式独立安装不需要第三方软件支持,选择安装界面的第一个(FlexBuilderandFlexSDK)插件安装做为Eclipse的一个插件进行安装,需要选择安装的Eclipse路径。
选择安装界面的第二个(FlexBuilderPlug-inandFlexSDK)安装路径下的FlexSDK2文件夹,里面存放了Flex2最核心的内容bin和lib分别存放了Flex的编译程序和编译器的运行库文件frameworks:
包含所有的AS源文件。
sample:
大量的Flex实例源代码。
3.FlexBuilder独立安装的IDE界面和Eclipse类似。
有两种工作模式:
代码模式Source、设计模式Design。
组件面板Flex自带的组件:
Controls、Layout、Navigators、Charts图表用户组件:
Custom菜单File文件、Edit编辑:
控制文件和编辑操作Source源代码:
针对代码视图,用来格式化代码,插入注释块等Navigate导航:
提供了强大的文件定位功能,可以快速却换文件,查找文字位置Project项目:
包括编译项目,发布源文件等命令Run运行:
集合了所以的调试命令Window视图:
提供了控制界面上所有面板的命令接口Help帮助快捷键Help-KeyAssit可以看到所有快捷键列表。
如:
F11执行程序调试动作Ctrl+F11编译并运行程序Ctrl+D删除当前所在行Alt+UP组合键表示将所在行上移Alt+/代码提示Flex学习笔记_03HelloFlex1.可创建项目类型可通过FlexBuilder2.0创建下面3种类型的项目:
Flex2项目:
基于FlexFramework;
AS3.0项目:
创建ActionScript3.0,使用AS动态绘制界面等。
Flex库项目:
创建自己的库文件,将Flex组件或者其他资源封装在一起,形成一个SWC文件,FlexFramework就被封装为一个SWC文件。
可在任何地方使用。
2.创建Flex项目FlexProject选择菜单:
File-New-FlexProjectFlex学习笔记学习笔记_03HelloFlex1.可创建项目类型可通过FlexBuilder2.0创建下面3种类型的项目:
File-New-FlexProjectFlex有3种类型:
Basic:
一般配置,适用于以HTTP或者WebService等进行数据传送。
ColdFusionFlashRomotingService:
专用于和ColdFusion服务端进行FlashRemoting方式的通信。
用于FDS通信。
FDS是Flex2系列中的一个服务器端产品,提供了对Java对象的直接访问、实时通信等功能。
这里我们选择第一中类型输入项目的名称Projectname和存放的路径Folder配置程序的一些源代码和运行库环境。
默认,不用修改,点击Finish,完成创建等待Builder自动生成所有的基本文件(主程序文件、项目的库文件配置、HTML页面模板等),这时在左侧的导航式视图中,可以看到所有项目的文件结构:
bin:
用来存放程序编译后输出的SWF和HTML等一系列文件。
XML文件、图片、样式表等其他资源也放在这里。
html-template:
生成HTML页面的文件模板,包括检测用户浏览器插件版本的JS脚本和自动下载最新插件的SWF文件。
HelloFlex.mxml:
项目的主程序文件。
3.插入组件和代码却换到视图模式,在组件面板中分别把Button和Label拖入到编辑区。
却换到代码模式。
完整代码如下:
Xml代码1.2.3.4.5.10.11.12.13.14.mxml文件是一个标准的XML文件,只不过是以mxml为扩展名。
mx:
为flex的命名空间,以后出现的标签不能以mx为命名空间。
为程序的根标签。
代表一个应用程序。
一般对于应用程序的设置在这个标签下。
其他标签包含在里面。
更多关于Application下次再介绍。
包含在里面的代码是AS脚本,为XML标准输出,就是不管里面的代码是什么就输出什么,可以避免、&
等跟XML解析时冲突。
定义一个按钮,并绑定了click事件,触发AS定义的doClick方法定义了标签4.编译和运行程序点击工具栏的运行图标,开始编译。
如果程序有错误,将中止编译,并在错误面板中列出错误信息。
否则编译结束后将自动打开浏览器,来显示程序。
点击上面的按钮标签显示的文字变化。
trace(字符串);
调试模式在控制台输出。
Flex学习笔记学习笔记_04MXML语言简介语言简介1.MXML语法MXML语言是专门用于Flex程序中,描述界面表现的一中XML标记语言。
我们可以用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。
1.1命名规范MXML区分大小写,且文件名和变量标示名都区分大小写。
MXML文件以mxml作为扩展名,文件名要遵循AS中变量的命名规则。
所有的MXML都被视为用户自定义的组件,相当于对象,可以使用代码动态创建。
变量名必须以字母或下划线开始,且只能包含字母、数字和下划线。
不能命名为application,application是主程序文件的默认标记,不可再使用。
程序不能使用“mx”做为目录名,mx是官方组件库的命名空间。
2.2MXML文件结构MXML为标准的XML文件。
我们以一个MXML文件来说明:
Xml代码1.2.3.4.5.10.11.12.13.14.第一行声明XML文件采用的语法版本version和编码格式encoding(默认为utf-8)。
Application:
在每个Flex项目中,可能有多个MXML文件,mx:
Application为根节点标示程序入口的运行文件。
xmlns:
mx=http:
/mx定义为XML的命名空间,对应路径为http:
/的配置文件中将这个路径定义为一个全局资源标识符,并对应了一个列出mx命名空间下的所有标签的文件。
flex-config.xml中配置了命名空间。
该文件可在FlexBuilder2的安装路径下的FlexSDK2frameworks目录中找到。
并找到如下代码。
Xml代码1.2.3.4.5.http:
/6.mxml-manifest.xml7.8.从上面的配置发现,http:
/这个URI和mxml-manifest.xml文件对应,找到该文件,里面列出了所有标签和与标签相关联的类文件路径。
Xml代码1.2.3.4.5.6.7.8.9.10.11.12.13.14.中的id代表标签名,class表示类文件路径。
comp=comps.*定义一个命名空间,因为使用了通配符“*”,comps目录下的所有MXML和AS类(不包括子目录的文件)都被包括在comp命名空间下。
如comps下有Login.mxml,则在程序中可这样调用:
Application还有一个属性layout,定义了该节点下元素的布局方式,也就是程序的总体布局方式。
absolute表示绝对定位,所有子元素将按照各自的x、y坐标来定位。
2.使用组件定义一个按钮组件如果组件中未包含其他子元素可这样写:
组件分类:
布局类:
包括所有的容器组件,如:
HBox、Panel等,Spacer、HRule、VRule不是容器,但是主要用于布局。
导航类:
菜单条、按钮条等各种导航功能的组件。
交互类:
内容展示、数据交互相关组件,如:
按钮、下拉框、图片、视频等。
IDE中的组件面板列出了所有的可视化组件,可直接拖入编辑区使用。
通过IDE的代码提示输入MXMLComponent在弹出的窗口输入组件的文件名Filename,并选择扩展哪一种组件Basedon,我们这里选择Image对象。
然后Finish。
然后点击Image组件,在属性面板的Source属性设置图片的路径。
Xml代码1.2.3.然后在程序中就可以使用该自定义的组件,将其从用户面板拖入到编辑区,图片显示正常。
Xml代码1.2.3.4.5.11.12.13.14.15.16.就是我们拖入的自定义组件,程序自动添加了ns1命名空间。
我们改变自定义组件的位置放到view文件夹,代码变成:
4.编写ActionScriptMXML文件经过编译最后也是被转换成AS来执行,在一个Flex程序中,主程序会被转换为Application对象的子类,自定义对象会被转换为父级对象的子类。
4.1在MXML中使用AS在组件的事件属性中使用AS来处理事件比如Xml代码1.上面代码中的click=tip_txt.text=欢迎来到RIA的世界-开始Flex之旅会被编译为Xml代码1.privatefunction_btn_click(event:
MouseEvent):
void2.tip_txt.text=欢迎来到RIA的世界-开始Flex之旅;
3.这个函数被注册为按钮的点击事件侦听器,一旦点击事件触发,函数就会被调用。
在MXML中插入AS块Xml代码1.2.5.此标签可以放在根节点内的任何位置,同时必须用CDATA将代码包起来。
CDATA不能嵌套使用。
AS中的注释是/单行注释/*多行注释*/MXML中的注释和XML一样4.2创建外部AS文件New-ActionScriptfile可以创建一个外部AS文件Xml代码1.在程序中可以使用上面的代码导入。
4.3创建AS类文件New-ActionScriptClass可以创建一个AS类文件Xml代码1.package2.3.publicclassTest4.5.functionTest()6.trace(Test);
7.8.9.上面代码创建了一个Test类,在构造函数Test()中在控制台打印Test。
在主程序中可调用:
Xml代码1.2.3.4.5.11.12.applicationComplete是Application对象的一个事件,程序初始化后触发此事件。
varmyTest:
Test=newTest()这个代码的作用是创建一个Test对象,创建对象用new关键字。
5编辑非可视化对象创建数据Xml代码1.2.Flexdeveloper3.Flashdeveloper4.Webdeveloper5.Mobiledeveloper6.lt;
/mx:
Array定义1个包含4个字符串元素的数组,相当于下面的代码Xml代码1.2.9.定义好数组之后,可以作为List或者其他组件的数据源dataProviderXml代码1.2.3.4.5.6.7.8.9.10.11.12.13.创建一段XML做为Tree树型组件的数据源。
用MXML语句创建类实例这样就创建了之前定义的Test类的实例。
相当于用ASnew一个出来Flex学习笔记_05使用容器控制界面布局_01管理程序的布局1.管理程序的布局容器累组件都位于mx.containers包中。
Container类是UIComponent的子类,是所有Flex容器类的父类,每个容器类都在它的基础上添加自己的功能。
1.1控制Application的布局Application是一个特殊的容器,位于界面元素的根部,包含了整个程序的所有元素。
layout:
值为absolute时,horizontalAlign水平对齐和verticalAlign垂直对齐不起作用,界面上的元素将由各自的坐标决定。
值为vertical或horizontal时,元素的位置由horizontalAlign和verticalAlign控制。
width长,height高。
决定SWF文件的尺寸。
我们可以设置如下的属性,所有组件公有:
horizontalGap水平间距vericalGap垂直间距paddingTop顶部边距paddingLeft左边距paddingRight右边距paddingBottom底边距Constraintlayout约束布局,只能在layout属性值为absolute才能使用,具有这一特性的容器有:
Application、Canvas、Panel和Panel的子类TitleWingdow点击元素得到如下界面:
如果对某一组件使用了约束布局,它会被强制定位在相应的位置,设置的X,Y坐标会失效。
ApplicationContolBar是和Application相关的一个容器,通常用来提供全局导航。
有水平(默认)和垂直方向选择。
它的dock属性,表示是否强行停靠在Application的顶部。
默认false,被当作一个普通的组件。
true,始终在顶部,宽度为100%。
Xml代码1.2.5.6.7.8.9.10.11.1.2CanvasCanvas直接继承自Container,体积小,使用灵活。
在它里面的元素只能由X,Y来定位。
如果元素超出Canvas的区域范围,Canvas会自动增加滚动条。
每个容器默认情况下都会自动带滚动条。
可以通过horizontalScrollPolicy和verticalScrollPolicy的属性值来控制,on/off/auto。
在AS中对应ScrollPolicy.ON,ScrollPolicy.OFF,ScrollPolicy.AUTO。
1.3VBox和HBoxVBox和HBox都是Box的子类,和Canvas相比,Box对子级元素采取规则的布局方式,其中VBox内的元素垂直方向分布,而HBox水平方向分布。
通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。
Xml代码1.2.3.5.6.7.8.9.10.11.12.1.4用DividedBox分割界面DividedBox继承自Box类,它有两个子类:
HDividedBox和VDividedBox。
类似于HBox和VBox,多了在子级元素之间增加了可以拖动的分割块。
拖动分割块可以动态的调整分割块附近元素的长宽。
borderStyle是组件的样式之一,表示边框样式,默认:
none,表示无边框。
solid为实心线条。
liveDragging:
true表示在拖动时,在松开鼠标后,调整位置。
false拖动时调整。
Xml代码1.2.3.5.6.7.8.9.10.11.12.13.14.15.Flex学习笔记_05使用容器控制界面布局_02窗口布局2.窗口布局Panel组件就是这样一个窗口组件,它直接继承Container。
和它的子类TitleWindow都具有窗口程序的特点:
有标题条,可以放置其他内容,形成一个整体。
2.1Panel组件fontSize表示字体大小,默认是10.一般中文12显示较清晰。
title表示窗口的标题。
ControBarPanel的一个容器,位置不可调整总是在底部,布局模式跟HBox相同。
可以放置按钮等组件。
Xml代码1.2.3.5.6.8.9.10.11.为窗口添加关闭按钮:
Xml代码1.2.3.4.10.11.13.14.16.17.18.19.20.21.22.将上面的代码保存为MXML,然后使用下面的代码new一个实例出来:
Xml代码1.2.3.5.6.7.Application的applicationComplete事件会在主程序初始化后被触发。
接下来为窗口实现拖动功能,使用PopUpManager这个对象弹出Panel窗口,窗口将置于最上层,被称为Pop-Up弹出窗口。
Xml代码1.2.4.5.23.24.25.PopUpManager.addPopUp函数可以将对象置于父级对象的顶层,对应的removePopUp可以删除弹出的对象。
addPopUp有4个参数:
window:
IFlexDi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 学习 笔记