Flex 简单培训

Flex 培训大纲1、简介2、AS3语言基础与JSON格式3、简单组件的编写（常用组件）4、复合组件的编写与打包swc5、Css的设置与动画6、前后台传输7、sprite图形绘图8、一些小经验/开发规范一、简介Flex 通常是指Adobe Flex，是最初由Macromedia公司在2004年3月发布的，基于其专有的Macromedia Flash平台，它涵盖了支持RIA的开发和部署的一系列技术组合。

现在flex使用的脚本是ActionScript3.0，并且建立起类似于java swing的类库和相应的UI 组件。

Flex是通过java或者.net等非Flash方法，解释.mxml文件生成相应的.swf文件。

Flex 的组件和flash的组件很相似，但是有所改进增强。

目前Macromedia公司已经被ADOBE（奥多比）收购。

当前的最新版本为flex4，常用版本为flex3，flex4目前中文资料很少，了解的还不深入，所以目前还用flex3。

运用flash是完全可以做到flex效果的，相应的，flex也可完成flash的功能特效，它们在底层是相通的，只是开发工具与开发标准的不同，都被解释为As来运行（个人观点），所以我认为flex在效果上达的的目标是实现flash的各种功能的同时还可快速的组件式开发。

它能更好的为用户一种不同与html+js的交互方式，得到较好的用户体验。

AIR 是flex基础上的桌面应用，它可以开发出脱离浏览器之外的桌面应用，与本地数据库交互，操作本地文件，调用exe文件，从而调用dll（动态链接库）文件等操作。

LCDS：Flex和Java通信，一般来说使用LCDS（LiveCycle Data Service），不过这个是收费的，所以就用免费的BlazeDS代替。

BlazeDS是官方从LCDS中分离出来的开源数据服务中间件。

为什么来说一般来说是用LCDS，也就是说不一定非要用LCDS，因为LCDS提供的功能完全可以自己实现，而且除了RemoteObject方式，还有WebService、HTTPService等等。

简而言之，使用LCDS使FLEX与后台的通信更多的便捷和特性。

BlazeDS：,BlazeDS是基于服务器的JA V A远程控制和WEB消息传递技术，使得在浏览器上运行的Flex应用程序和远端的JA V A应用程序之间互相通信。

其它的通信方法，已知的有OpenAmf等，原理就是实现了一个AS与java数据格式之间的互相转换，传输时使用AMF的转化格式，实现序列化与反序列化的操作，也有使用自己开发的通信框架来传输数据的。

二、AS3语言基础与JSON格式As是ActionScript的简称，它是flex与flash的脚本语言，它和java有些类似，与js又有些相同。

以下就是常用知识，如果有不全的地方，请找AS语言书籍来学习。

1、as中的变量声明是以var开头，注意是小写，与js相同。

2、as中的常量、变量都是以变量：类型来组成，也就是用:来区分类型与声明。

3、同java与js中相同，都是以’.’来访问对象的属性与方法，可以用点来表示包的路径。

4、函数的声明，Private function showAlert(text:String=’无’):void以public或private等声明来开头，function跟随其后，然后是函数名（），内部写参数，如果是默认参数，则要写上默认值，最后跟返回参数类型。

5、使用const声明常量。

6、AS的包与java的包相同，都是以目录来分层的,如com.ui.Button，都是相同的概念7、AS包的导入与java相同，都是import mx.core.UIComponent;以上是AS语言的几点知识，其它具体知识，在书中以及网上都能得到。

JSON(javaScript Object Notation)是一种轻量级的数据交换格式，易于阅读与编写，并且比xml 体积小，能更多的存贮数据，是一咱理想的数据交换语言。

它由对象(Object)与数组(Array)，值来组成对象(Object)的写法为{}，一个{}就是一个对象数组(Array)的写法为[]，一个[]就是一个数组，值的写法为变量名:值，值的类型为常见的数值与字符串，和其它类型的类举一个常见的例子：Var arr:Array = [{name:’one’,code:123}];这是一个数组的JSON写法，它要转成代码就是：Var object:Object = new Object(); = “one”;object.code = 123;var arr:Array = new Array();arr.push(object);所以可以看出，JSON的写法大大简化的代码的编写，并且它用来存放数据也更加方便。

大家可能问，如果name后面是一个类怎么办，那么，类也要拆分成一个个属性，由于我们只是存储，所以不涉及类的方法，所以这个类又可以表示为{属性1，属性2，。

}，我们这样写[{ name:{code1:1,code2:2}}];三、简单组件的编写（常用组件）1.新建工程单击菜单中的File->New->Flex Project来新建工程，或是在项目窗口空白处点击右键菜单。

File菜单右键菜单软件会弹出一个新建工程的窗口，如下图：‘Project name’新建的工程名，Web application 网页应用，也就是我们常用的开发类型，还有一种，Desktop application 桌面应用，就是我们所说的AIR，可独立安装运行的桌面程序开发。

注意，这里有个Application server type选项，如果新建的项目工程不与服务器传输数据，这里是不用选的，如果需要，我们选择J2EE，如果不使用BalzeDs开发的话去掉Use remote object access service，如果是用BlazeDS开发后台的话选中。

在这里我们去掉选择。

如果不去掉，后面会在SDK选项上报错。

（可以试下）点击下一步，出现如下窗口，在这我们可以配制web Root，Rort URL，这里服务器的url一定要写正确。

修改完后点击Validate Configuration 来验证一下我们配制是否正确。

如果正确，我们在修改输出路径，改为所在工程的Flex输出文件夹。

然后点击完成，就可进入代码编辑窗口了。

2.工具栏简介，与代码调试第一项就是新建文件的快捷方式，保存，打印这就不多介绍了。

然后我们可以看到图标，它是用来运行程序的，下拉列表是当前项目中所有可执行文件的列表，如果不选择直接点击，就是运行当前文件。

注：默认文件的设置是在文件上点击右键，选择Set as DefaultApplication ，则图标变为设置成功。

第三项为Debug调试窗口，关于代码调试只做简单介绍，Debug窗口有着另一套运行界面，如果是选择了J2ee服务的话，运行Debug 调试窗口是不显示的。

trace()相当于java中的System.out.println();它可以在控制台打印出你所想要显示的内容，如果无法查看Debug，我们就用Alert.show来显示，虽然这种方法比较笨，但也能帮你找出错误原因。

其它的就不介绍了。

3. mxml文件简介：Flex 的mxml文件是一个扩展的xml文件，它以<?xml version="1.0" encoding="utf-8"?><mx:Application的结构开头。

Application也就是mxml的根节点。

它是一个容器。

也可以说是flash中的舞台。

在其它组件的最外层xmlns:mx=/2006/mxml这是声明命名空间，flex常用组件都是以mx:来开头的。

在Flex4中有其它的命名，写法也不相同。

如果使用其它自定义命名，也可在这声明 xmlns:core="com.outsmart.dock.core.*" <mx:Style>是css样式的写法，与html中的style相同。

<mx:Script><![CDATA[ script脚本的编写都要用<mx:script开头。

常用代码 [Bindable]，它是对目标做绑定用，对声明的变量自动更新已有目标组件的属性。

组件都有默认的属性 x y width height top left right bottom新建文件后，4.FLEX中的可视化编程：点击Design设计模式，可以看到设计界面。

然后如果窗口中没有Components组件窗口，则打开window->Components组件窗口打开组件窗口菜单5.组件简介：1、TextInput 文本输入框主要属性：text 输入内容主要事件：change 内容更改 keyDown 键盘按下 keyUp 键盘抬起主要样式：color 字体颜色，其它见帮助文件控件节图：练习：写一个只能输入数字的TextInput组件2、拉下列表ComboBox主要属性：text 显示内容 dataProvider 数据源 labelField 列表中的显示列selectItem 当前选中项 selectIndex 当前选中项的索引。

主要事件: change 内容更改节图：练习：通过一个下拉列表更新另一个下拉列表中的数据，山东，江苏 -> 济南，青岛上海，南京3、List 列表组件节图：练习：通过一个列表，添加到另一个列表中，也可拖动数据来完成操作。

4、树 TreeNode练习：点击树显示详细信息，增加删除树的节点，树的内容可以是省->市->区，内容可以是下拉列表1,2,3 对应省,市,区，可以删除节点，增加节点，增加节点时展开树。

5、DataGrid练习：制作一个DataGrid输入内容的窗口,可以有所引列，输入列，下拉选择列，和图标列6、日期组件练习：设置默认日期为今天7、微调组件8、组件练习：一组checkBox只能选中一个9、图片组件Embed 引入图片的几种方法10、文字显示组件11、按钮组件12、下拉按钮（组合控件）练习：下拉树，下拉数据窗口，下拉titleWindow13、多行文本组件，\n换行14、多行输入组件，htmlText属性，可显示html内容15、富文本编辑器htmlText属性16、单选按钮，练习：在一组值中只选择一个17、窗口组件练习：试着在窗口组件底部加入按钮，几个窗口位置之间切换动画 move18、与panel窗口相同，不同之处在于有关闭按钮，showCloseButton19、horizontalScrollPolicy滚动条是否显示，horizontalGap、verticalGap中间间隔大小20、有拖动栏的Hbox与Vbox练习：动态修改布局，布局之间切换动画21、表单格式排列22、ViewStack与TabNavigatorviewStack与TabNavigator的selectIndex属性，与它的切换效果23、使用PopUpManager弹出panel与Canvas或TitleWindow四、复合组件的编写1、新组件的编写与扩展Based on可以选择继承的组件，默认为Canvas，后面定义宽度与高度，组件也可以继承自定义的组件类。