Flex从入门到精通 第7章

Flex3基础知识菜花目录Flex3基础知识 (1)介绍、编译： (1)第一部分：AS3基本语法 (3)基本数据类型 (3)数组：复杂数据类型，有序的数据集合。

(3)String类型 (6)函数 (6)变量 (6)类 (6)接口（与Java相似） (7)继承（与Java相似） (7)第二部分：事件 (7)事件机制 (7)第三部分：容器与组件 (10)容器定位与布局： (10)导航容器： (11)第四部分：数据绑定 (11)第五部分：验证 (12)第六部分：控制管理 (12)第七部分：外部数据交互 (16)第八部分：Flash Player的安全机制 (17)第九部分：工具 (17)第十部分：数据模型 (19)第十一部分：样式与皮肤 (20)第十二部分：高级组件开发 (20)第十三部分：实例 (20)介绍、编译：Flex=ActionScript+mxml；Mxml基于xml之上的实现，与jsp和servelt相似，jsp首先会被容器先转换成servlet文件；同样，mxml文件也会先被转换成ActionScript文件，再进行加载。

Mxml的方式与html相似。

ActionScript类似Java，为面向对象语言，ActionScript 的核心底层遵循ECMA-262标准协议，与javascript一致。

Mxml文件会被转换为两个文件：一是mxml文件有部分转换成ActionScript脚本。

二是mxml文件按文件名被转换成对应名称的AS类。

Flex工程src目录下的文件也会编译到swf文件中，还有flex的架包。

第一部分：AS3基本语法基本数据类型1.Boolean2.Int3.Null：只有一个值null，是String和复杂类型（包括Object类）的默认值。

4.Number：最大值Number.MAX_VALUE和最小值Number.MIN_VALUE。

5.String：16位字符序列，内部存储为Unicode字符，使用UTF-16格式。

Flex快速入门介绍一、Flex简介：Flex是一个针对企业级富互联网应用的表示层解决方案，是一种应用程序框架。

Flex系列产品包括编译工具和IDE，通过编写MXML和ActionScript代码，用编译器来生成swf文件，使用浏览器的Flash Player插件就可以进行观看。

MXML代码与jsp 很像，主要是用于布局和显示，ActionScript代码和javascript很像，语法也有很多相似之处。

总的来说，使用java的程序员很容易入手学习flex。

二、Flex与ActionScript基础：一个Flex应用程序有ActionScript和MXML两种语言代码组成。

从3.0开始ActionScript已经从基于原型脚本语言进化到完全面向对象的。

MXML则是一种标记语言，非常类似于大家所熟悉的超文本标记语言(HTML)，扩展标记语言(XML)。

如何把MXML和ActionScript相互关联起来呢？对于编译器来说，解析这两种语法后最终被翻译成同一个对象，比如：<mx:Button id="btn"label="My Button"height="100"/>和Var btn:Button=new Button();bel="MyButton";btn.height=100;产生的是同一个对象，两者的主要不同是，ActionScript创建的对象(上面第二个例子)除了Button就没有别的了，而MXML中创建的对象将Button添加到包含MXML代码的任何组件上。

Flex框架根据MXML中的对象描述来调用构造函数，然后将其添加到父对象上或设置其为父对象的某个属性。

MXML文件中可用<mx:Script>标签包含ActionScript，不过ActionScript文件是不能包含在MXML里的。

Flex入门教程编写日期：2009-02作者：Dason 主要讲3个主题:1.Flex是什么，用途和前景；2.Flex Builder基础；3.MXML基础；现在进入第1个主题：首先我们要明白，flex不是专门用来做网页的，它主要是用来做RIAs的RIAs=Rich Internet Applications富英特网应用程序Flex现在虽然是2.0，以前是1.0和1.5，但是不要担心1.0和1.5版本自己没有用过，因为2.0版本才是Flex真正的开始，首先，Flex2.0的技术基础很高，采用Action Script3.0为编程核心，以FlashPlayer9.0为平台它与以前版本的区别是FlashPlayer9.0采用全新的虚拟机,运行速度是8.0的10倍以上Flash8.0和Flex1.0,1.5，都是Action Script2.0用的FlashPlayer8.0，在性能上，跟Flex2.0的Action Script3.0和FlashPlayer9.0相差太远了我们现在处于RIAs浏览器时代，意思是，我们用Flex做的程序，必须要用浏览器打开，以网页的形式发布，明年，我们将步入下一个RIAs时代――桌面RIAs时代，我们现在所有用flex2.0做的程序,明年都可以被重新发布成桌面应用程序，就跟我们现在用的软件是一样了，到时候,我们的程序不再被浏览器限制了，flex能做的程序很多，比如QQ这样的即时聊天软件、论坛、股票软件、网络视频聊天、等等。

你能想到的基本都能做出来，Flex的前景是一片明朗的，而且越往后越会被广泛采用，这一切都从Flex2.0开始，所以，对于我们来说，这是个前所未有的好机会。

现在学flex的人很少很少，如果你等到他已经大面积普及,那就没有竞争力了。

好，现在提问时间，马上要进入下一主题：Flex是纯面向对象语言，C是面向过程语言，ActionScript3.0相对2.0,改动太大了，如果有2.0基础,对3.0帮助不大，所以，如果你第一次接触的就是3.0，也不要紧，3.0删除了很多2.0的东西，而且增加了很多新类，3.0跟JAVA基本没什么区别了，所以，有JAVA基础的人，学起来更快。

flex布局⼊门总结——语法篇⼀ Flex布局？Flex全名Flexible Box即弹性布局，基本⽤法：display:flex;⾏内元素：display:inline-flexwebkit内核的浏览器必须加上-webkit前缀.box{display: -webkit-flex; /*safari */display: flex;}注意，设为 Flex 布局以后，⼦元素的float、clear 和vertical-align 属性将失效⼆基本概念采⽤ Flex 布局的元素，它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项⽬"。

容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）三容器属性(即外层盒⼦属性)1. flex-direction属性 : 决定主轴的⽅向(项⽬的排列⽅向).box {flex-direction: row | row-reverse | column | column-reverse; /* row是默认值 */}2. flex-wrap属性 : 默认项⽬都排在⼀条轴线上，flex-wrap决定项⽬换⾏⽅式.box{/* nowrap默认值不换⾏； wrap换⾏，第⼀⾏在上⽅； wrap-reverse换⾏，第⼀⾏在下⽅。

*/flex-wrap: nowrap | wrap | wrap-reverse;}3. flex-flow属性 :flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap.box {flex-flow: <flex-direction> || <flex-wrap>;}4.justify-content 属性 : 项⽬在主轴上的对齐⽅式, 具体对齐⽅式与轴的⽅向有关.box {justify-content: flex-start | flex-end | center | space-between | space-around;/* 依次是左对齐 ; 右对齐；居中； 两端对齐，项⽬之间的间隔相等； 每个项⽬两侧的间隔相等(项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍)*/}5.align-items 属性: 项⽬在交叉轴上如何对齐, 具体的对齐⽅式与交叉轴的⽅向有关.box {align-items: flex-start | flex-end | center | baseline | stretch;}flex-start：交叉轴的起点对齐。

第一章Flex是如何工作的该部分文档的内容是为用户提供关于Adobe®Flex工作机制的一个快速综述。

通过本章节的学习，你可以创建你的第一个Flex应用程序，并将它与你以前所熟悉的Web开发技术进行比较，以领会Flex的内涵和精髓。

第一节构建并运行Flex应用程序Flex是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用Adobe®Flash®Player9作为前台的“富客户端互联网应用程序/rich Internet applications/RIA”，以满足用户更为直观和极具交互性的在线体验。

开发Flex应用程序的典型步骤如下（通常是这样）：1.选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）2.布置组件以设计用户界面。

3.使用样式和主题来增强视觉方面的设计。

4.添加动态行为（例如程序部件之间的相互作用）。

5.定义并连接所需的数据库服务。

6.将源代码编译成SWF文件，然后在Flash Player中运行。

一个典型的Flex应用程序包括如下元素：1.Flex frameworkAdobe®Flex2framework包含了创建RIA所需要的所有组件，它们是：用于应用程序布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式。

Flex framework被包含在公用组件库（SWC）文件中。

2.MXML每个Flex应用程序至少包含有一个MXML文件，它被作为该程序的主文件。

MXML是一种标记语言，它是基于XML的一种实现，用来创建Flex应用程序。

你可以使用它去声明程序中所使用的标签结构的定义。

3.ActionScript3.0你可以使用ActionScript3.0为应用程序添加动态行为，它是基于ECMAScript的一种实现，类似于Jav aScript。

目录1. Flex 基础学习 (2)1.1 Actionscript该学的重点 (2)1.2 Flex framework 的重点 (2)1.3 Component 该学些什么 (2)1.4 manager 是什么 (2)1.5 Style/Skin 的重点 (3)1.6 学完基本功后下一步 (3)2. Flex 在项目中的创建 (3)2.1使用mxml文件简单介绍 (5)2.2在应用程序中动态加载模块的方法 (6)2.3 Flex中使用tree组件 (7)2.4 Flex 中关于Tree 的详解介绍 (7)3.如何使用封装好的组件 (11)3.1 以QdpHTTPService组件为例说明 (12)3.2 以树中封装好的组件为例 (12)4.Flex 调试 (13)4.1 增加断点 (13)4.2调试程序 (13)4.3调试设置 (13)4.4调试方法 (15)5. Flex的使用 (16)5.1 Flash Builder 4常用快捷键 (16)5.2 使用Flex帮助 (17)6.ActionScript 3.0概述 (17)6.1 使用ActionScript 3.0 (17)6.2创建第一个ActionScript 3.0应用程序 (18)6.3数据类型 (18)7.Flex 组件 (19)7.1 为什么要创建自定义组件 (19)7.2 怎样创建自定义组件 (19)7.3 如何在项目中使用自定义组件 (22)7.4 Flex 组件的文件类型 (22)7.5 对于MXML 和ActionScript 文件 (23)7.6 对于SWC 文件 (23)7.7 对于RSL 文件 (24)8.Flex 代码示例 (24)1. Flex 基础学习1.1 Actionscript该学的重点从最底层看起，最下面的 actionscript 3是一切的基础，它是 flash/flex编程使用的唯一程式语言， actionscript 这个语言，包含：它的基本语法与结构(array, hash, loop, if else…)2 DisplayList (DisplayObject, DisplayObjectContainer)与 Event system(bubbling, propagating…)Sound, Video, NetConnection 与 Graphics class1.2 Flex framework 的重点基本上 flex framework 就是用 actionscript 写成的框架，flex Framework 整个体系非常博大精深，通常一般人不太可能完整把它学完，只需要针对最常用到的部份熟悉就好，图中列出的那三块(component, managers, style/skin)就是我个人认为所有初学者最优先该学会的。

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等等。

Flex 入门教程[来源：蓝色理想| 作者：Robert Crooks | 时间：2008-03-24 | 点击：1912 | 收藏本文【大中小】]创建第一个Flex应用程序作者：Robert Crooks (Macromedia培训小组)翻译：MoonFun.qhwa轉載請註明來自藍色理想在本教程中，你可以阅读到Flex的简单介绍，还可以利用MXML创建一个简单的分类购物车，从而学习到Macromedia Flex应用程序的基本构成。

你将会学到：创建一个应用程序、添加一个布局的容器、添加控件、创建与控件关联的简单数据模型，以及利用ActionScript对事件进行处理。

本文是Robert Crooks编写的四步Flex入门系列的第一部分，Robert Crooks现就职于Macromedia客户培训部门Flex 入门（2）：创建一个Flex计算器Flex 入门（3）：使用容器Flex 入门（4）：使用数据模型点击这里下载整个系列教程：Flex入门系列(144KB)如果你需要更加详细的信息，Macromedia客户培训小组提供了为期两天的在线培训课程：《利用Flex开发丰富的互联网应用程序》，教你快速学习Flex应用程序开发。

让我们开始吧！如果你是一个XML新手，请记住下面的基本规则如同所有的XML语言一样，在MXML中，标签和属性都是区分大小写的；所有的属性值必须用双引号(")或单引号(包含所有的标签必须是闭合的。

没有子标签的标签可以以斜杠直接结束，而无需额外的结束标签：<mx:Label text="Hello"></mx:Label>或<mx:Label text="Hello"/>如果你是一个ActionScript新手，你可以发现它的语法和你熟悉的语言的语法很相近，比如JavaScript或者Java。

Flex布局总结之flex的主要属性及参数⽤法这篇笔记是系统学习flex时所记，适合复习使⽤，新⼿学习还是要配合图⽰和代码来学习更容易理解。

flex布局模型：弹性盒⼦（ Flexible Box 或 flexbox），是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。

引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。

⾸先要弄清楚⼏个重要概念：flex-container：弹性盒⼦容器flex-items：flex-container⾥⾯的直接⼦元素叫做flex-items主轴：main axis：main start & main end & main size交叉轴：cross axis：cross start & cross end & cross size⽤在flex container上的CSS属性：flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content应⽤在flex items上的CSS属性：flex、flex-grow、flex-basis、flex-sshrink、order、align-self开启flex布局：.box { display:flex or inline-flex; } // 块级元素或⾏内元素1. flex-direction ：决定了main axis主轴⽅向，默认沿着main axis主轴从main start开始从main start开始往main end⽅向排布。

row---默认从左⾄右, row-reverse----从右⾄左, column----从上⾄下, column-reverse----从下⾄上2. justify-content：决定了flex items在主轴上的对齐⽅式flex-start-----默认与main start对齐， flex-end------与main end对齐， center-------居中对齐space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离⼀半3. align-items：决定了flex items在cross axis上的对齐⽅式normal------效果相当于stretch-----当flex items在cross axis⽅向的size为auto时，会⾃动拉伸⾄填充flex containerflex-start----默认与cross start对齐， flex-end------与cross-end对齐， center------居中对齐， baseline------基线对齐，第⼀⾏⽂本底部为基线4. flex-wrap：默认nowrap，不换⾏；wrap，换⾏。