Flex 3 基础教程(7)
flex 的用法
flex 的用法“flex”的用法“flex”是一种用于实现响应式布局的CSS工具。
它是“Flexible Box Layout”的缩写，也称为flexbox。
flexbox提供了一种灵活的方式来布置、对齐和分布元素，以适应不同的屏幕尺寸和设备类型。
在本文中，我们将一步一步回答以下关于“flex”的用法的问题：1. 什么是“flex”？2. 如何使用"flex"创建一个简单的布局？3. 如何在flex容器和flex项目中设置属性？4. 如何进行flex项目的对齐和分布？5. 如何在媒体查询中使用“flex”？6. 一些常见的“flex”应用示例。
7. “flex”的浏览器兼容性。
1. 什么是“flex”？“flex”是一种CSS布局技术，用于创建响应式布局。
它基于flexbox模型，其中包含一个flex容器和flex项目。
flex容器是一个包含flex项目的容器，而flex项目则是flex容器中的子元素。
2. 如何使用"flex"创建一个简单的布局？要创建一个简单的flex布局，首先需要创建一个flex容器。
我们使用`display: flex;`来将一个元素设置为flex容器。
接下来，我们可以使用其他属性来设置容器的方向、换行、对齐等属性。
css.container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}在上面的示例中，我们将一个元素的类名设置为“container”，然后使用`display: flex;`将其设置为flex容器。
接下来，我们使用`flex-direction: row;`设置容器内项目的排列方向为水平方向，使用`justify-content: space-between;`设置项目之间的间距，使用`align-items: center;`设置项目在容器中的垂直方向上的对齐方式。
Flex学习笔记
1.Flex简介和开发环境Flex 3是Adobe出品的开发RIA(Rich Internet Applications)的工具,包括Flex 3 SDK, Flex Builder和Flex整合的服务产品.Flex Application:用flash.swf文件格式封装的发布在HTML网页中的应用程序,需要在客户端安装Flash Player 9.开发者可以完全访问Flash绘画API,应用程序使用ActionScript 3,很类似于Java,过渡起来很容易.创建Flex应用程序的步骤如下:选取预定义的可视化组件；在用户界面上添加组件；使用styles和skins自定义应用程序界面；增加事件处理和脚本处理代码，控制应用程序行为；连接数据和通讯服务；Bulid和Run应用程序.接下来提供一点Flex的相关资源./flex3/componentexplorer/explorer.html这个很重要，其实就列出了组件的使用方法，本身就是用flex写的，不过不能下载，但有人整理过；/devnet/flex/;.在生成的文件中，有个html文件，里面设置了播放编译好的swf文件的要求等，所以如果我们想要把swf放在其他项目中，最好也把它一块儿拷贝过去.实际上还存在一个templete 文件夹，提供了模板文件，编译生成的一些文件就是参照它，然后进行了相应的修改.所以如果大家可以事先修改模板文件达到某种特殊效果，比如上边界留白.2.ActionScript语法我们常常使用import和export命令,导入导出工程,并且可以对相应选项进行设置,比如需不需要看到源文件,是导入工程文件夹还是zip压缩文件等等.<![CDATA[ ]]>字节对可以避免它里面的脚本和整个mxml一起编译。
在编译的时候mxml是要被转换为as的。
整个程序创建完后会去调用initApp（）。
trace（）是调试的时候使用的，但必须安装flash的调试版本，我们也可以引用一个textarea 控件，将关心的内容显示出来，如:txt.text=txt.text+”/n”+num.toString();在as里面有三种for 循环形式：第一种是常规的数字控制循环次数；第二种是var student:Object = new Object(); =”eric”; student.age=20; student.type=”本科”; for(var prop:String in student) {txt.text=txt.text+”\n”+prop+”:”+student[prop].toString();};注意这样打印出来的顺序和原来的输入顺序不一定对应，这要依赖底层存储实现方式；第三种是for each(var value:* in student) {txt.text=txt.text+”\n”+value.toString();};continue出现之后后面语句不被执行，直接进行下次循环；而break是直接跳出本层循环。
Flex3教程
组件分类 可视化控件
容器是指可以含有其他对象的可视化组件。 控件是指显示信息或提供应用程序用户交互功能的可视化组件。 示例代码
<mx:Canvas> <mx:VBox> <mx:Label text="This is Label 1"/> </mx:VBox> </mx:Canvas>
e-mail：wanggq@
运算符和表达式
名称
算术运算符 关系运算符 逻辑运算符 赋值运算符
种类
+、-、*、/、%、++、->、<、>=、<=、==、！= &&、||、! 简单赋值：= 复合算术赋值：+=、-=、*=、 /=、%=
表达式格式
标达式 算术运算符 表达式 关系运算符 表达式 表达式 逻辑运算符 表达式 标识符 赋值运算符 表达式
注：可以将MXML描述为ActionScript3 的一种“方便语言”，用它编写应用 程序比完全用ActionScript3 编码更加简单和快速。
Flex3基础篇—编译和发布
e-mail：wanggq@
Flex3基础篇—熟悉开发环境
e-mail：wanggq@
Flex Builder 用户界面 MXML 编辑器 ActionScript 编辑器 Flex Builder 视图 Flex Navigator 视图 Outline 视图 Problems 视图 Design 视图 调试视图
Flex3基础篇—熟悉开发环境
e-mail：wanggq@
Boolea n
Int Int Array Array Boolea n
Flex3.0学习笔记总结入门者必看
Flex3.0学习笔记总结Flex 3.0 布局控件, 样式(css), 皮肤(skin)介绍演示Flex 3.0 中的布局控件的应用，样式和皮肤的应用∙布局控件 - Flex 中常用的布局控件一览∙样式 - 通过css 控制Flex 中各个控件的样式∙皮肤 - 使用Flash 开发的swf 做控件的皮肤在线DEMO/webabcd/archive/2009/11/09/1598980.html1、布局控件一览Layout.mxml<?xml version="1.0" encoding="utf-8"?><mx:Panel xmlns:mx="/2006/mxml" layout="absolute"title="Layout 常用布局控件一览" width="476" height="427"><mx:Script><![CDATA[import mx.controls.Alert;private function submitForm(e:MouseEvent):void{Alert.show("Item1: " + item1.text, "Alert框");}]]></mx:Script><!--HBox - 水平线性布局VBox - 垂直线性布局--><mx:HBox x="10" y="10" width="438" horizontalGap="50" borderThickness="1 " borderStyle="solid"><mx:Label text="HBox - Label1"/><mx:Label text="HBox - Label2"/></mx:HBox><!--HDividedBox - 在 HBox 的基础上，以垂直方向显示分隔条VDividedBox - 在 VBox 的基础上，以水平方向显示分隔条--><mx:HDividedBox x="10" y="36" width="438" borderThickness="1" borderStyl e="solid"><mx:Label text="HDividedBox - Label1"/><mx:Label text="HDividedBox - Label2"/></mx:HDividedBox><!--Panel - 面板。
Flex3界面布局教程
Flex3界面布局教程国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
对于一个拥有丰富组件的GUI设计工具来说，界面的布局技术成为界面美化的一个重要方面。
Flex从控件的功能上大致提供了两种方法：容器（控制布局），组件（提供GUI实质功能处理）。
使用容器分层次管理GUI是当前的趋势,Flex 也使用了此种方式,主观上我们认为它把我们界面上的组件通过容器进行了分组或分类布局管理。
接下来，我将通过简单的示例逐个介绍各种界面布局的设计。
容器Canvas的界面布局，它定义了一个矩形框架的区域，用来放置用户的容器和控件。
不像其他的组件，你不能放任Flex的控件。
你必须指定absolute或者constraint-based来指定组件的位置。
Absolute模式必须指定x,y坐标。
Constrain-based必须指定side, baseline,或者center anchors. 接下来具体介绍两种布局方式：模式：你可以指定x,y坐标来指定每个组件的在容器的位置。
坐标的是相对canvas 容器的左上角来设计的。
即容器的左上角坐标为(0,0). X.y可以为正负值，如果是负值的话，组件就会放在超出容器可是范围的位置。
当然可以利用Actionscript 来完成移动的操作，这就涉及到的event事件。
效果如下图：模式：这个分别介绍canvas 的Vbox以及Hbox的两种组合。
Canvas通常有x,y 指定组件的位置，x,y默认的应该是0.所以你如果不指定x,那么将把组件放在x=0,的位置。
这样有可能出现重叠现象。
当然也可以指定其他模式的布局，比如Vbox,或者Hbox。
这样就可以不指定x,y了。
效果如下图：Vbox或者Hbox 布局前面介绍的把Vbox或者Hbox嵌入Canvas。
其实他们本身都是一个容器，可以独立使用的。
FLEX技术之三——控件和容器
知识回顾——控制应用程序的外观 知识回顾
2.嵌入图像：可以嵌入具有 PNG、JPEG 和 GIF 文 件格式的图像, SWF 文件, 具有 MP3 文件格式的声 音文件, SVG 文件和字体。
@Embed 指令在 Flex 应用程序中嵌入只希望显示一次的图像
知识回顾——控制应用程序的外观 知识回顾
<?xml version="1.0" encoding="utf-8"?> <states> <state name="四 川"> <city name="成 都"> <region name="成华区" /> <region name="武侯区" /> Flex提供简洁的语法来实现组件间的、或与数据模型的绑定。 <region name="高新区" /> 3.获取XML外部数据绑定 </city> <city name="绵 阳"> <region name="游仙区" /> <region name="北川县" /> <region name="平武县" /> </city> <mx:XML id="dp" source="xmlData.xml" format="e4x" /> </state>
实战任务
1 2 3 4 5 6 7 完成实例之一accordion导航容器组件任务 完成实例之一 完成实例之二ButtonBar导航容器组件任务 完成实例之二 如何创建Flex播放器 50 如何创建文本编辑器 52 如何创建菜单栏 57 如何创建弹出菜单 59 如何创建不可拖动的Alert对话框 63
如何学习Flex 简明教程!对于初学者太有用啦!
如何学习Flex 简明教程！对于初学者太有用啦！阅读次数: 356次发布时间: 2011-07-26 18:32:48发布人: xiangkun来源: ITeye原来有人问我：怎样学好Flash？我的回答一般就是：仔细看帮助、多做练习、多看优秀的源码、多上专业论坛参加讨论。
可是Flex来了，于是又有人问：怎样学好Flex？我不知如何回答，因为我也是Flex新手，也在“仔细看帮助、做练习、看源码、上论坛……”。
现在d.CAT 的这篇优秀的文章，详细的回答了这个问题。
下面的文章转自d.CAT RIA Blog，由于原文是繁体中文的，所以转载过来的时候我对文章的繁体字部分进行了替换，对一些词语进行了修改以符合简体中文语言习惯，对一些术语进行了注释。
最后，文中所有第一人称处所指的都是原文作者而不是“我”，有麻烦可以找他以下为转载：==================================================================＊Flex 的基础架构关于flex 基本上常被问到的不外乎就是“如何可以学好它？”，要了解这个问题的答案基本上只要看懂下面这个图就OK了。
＊Actionscript 该学的重点从最底层看起，最下面的actionscript 3是一切的基础，它是flash/flex 编程使用的唯一程式语言，因此任何人想学好flex 第一件事绝对是先摸熟actionscript 这个语言，包含：1.它的基本语法与结构(array, hash, loop, if else…)2.DisplayList (DisplayObject, DisplayObjectContainer)与Event system(bubbling,propagating…)3.Sound, Video, NetConnection 与Graphics class掌握as3 的精华后，接下来就可以进入flex framework。
flex3基础知识
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格式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
了解FABridge 了解FABridge
官方实例,看看FABridge都能做些什么 官方实例,看看FABridge都能做些什么 补充些JavaScript知识 补充些JavaScript知识 JS中类的定义方法 JS中类的定义方法 Eval()函数 Eval()函数
பைடு நூலகம்
FABridge技术分析 FABridge技术分析
Flex 3 基础教程(7) 基础教程(7
—FABridge技术详解 FABridge技术详解
郑岩峰 20082008-8-5
FABridge简介 FABridge简介
FlexFlex-Ajax Bridge技术是Adobe公司提供的一种服 Bridge技术是Adobe公司提供的一种服 务技术.通过Flex务技术.通过Flex-Ajax Bridge技术可达使用 Bridge技术可达使用 JavaScript控制Flex应用程序. JavaScript控制Flex应用程序. FlexFlex-Ajax Bridge技术包括两个文件FABridge.as Bridge技术包括两个文件FABridge.as 和FABridge.js文件.FABridge.as文件中定义了 FABridge.js文件.FABridge.as文件中定义了 Flex客户端的各种属性和方法.FABridge.js文件 Flex客户端的各种属性和方法.FABridge.js文件 定义了JavaScript客户端的各种属性和方法. 定义了JavaScript客户端的各种属性和方法. D:\Program Files\Adobe\Flex Builder D:\ Files\Adobe\ 3\sdks\3.0.0\frameworks\javascript\fabridge\src\ sdks\3.0.0\frameworks\javascript\fabridge\src\ bridge
FABridge.js分析 FABridge.js分析 App_xxx.js分析 App_xxx.js分析
实例分析
1. FABridgeSample分析 FABridgeSample分析 2. SimpleSample分析 SimpleSample分析 命名大小写敏感 如何嵌套swf文件 如何嵌套swf文件 如何获得flex应用程序 如何获得flex应用程序 使用getCompenentID()获取组件 使用getCompenentID()获取组件 使用getPropertyName()获取属性值 使用getPropertyName()获取属性值 使用setPropertyName()设置属性值 使用setPropertyName()设置属性值 为组件添加监听事件 调用Flex中的函数 调用Flex中的函数
利用IDE添加FABridge支持 利用IDE添加FABridge支持 IDE添加FABridge
FABridge.as分析 FABridge.as分析
IMXMLObject, IMXMLObject,initializeCallbacks ExternalInterface, ExternalInterface,addCallBack <fab:FABridge xmlns:fab="bridge.*" />
�