Flex从入门到精通 第9章
- 格式:ppt
- 大小:123.50 KB
- 文档页数:24
第一章Flex 是如何工作的该部分文档的内容是为用户提供关于Adobe.Flex 工作机制的一个快速综述。
通过本章节的学习,你可以创建你的第一个Flex 应用程序,并将它与你以前所熟悉的Web 开发技术进行比较,以领会Flex 的内涵和精髓。
第一节构建并运行Flex 应用程序Flex 是一个提供开发设计和运行支持的架构,它可以使开发人员创建利用Adobe. Flash. Player 9 作为前台的“富客户端互联网应用程序/rich Internet applicati ons/RIA”,以满足用户更为直观和极具交互性的在线体验。
开发Flex 应用程序的典型步骤如下(通常是这样):1. 选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等)2. 布置组件以设计用户界面。
3. 使用样式和主题来增强视觉方面的设计。
4. 添加动态行为(例如程序部件之间的相互作用)。
5. 定义并连接所需的数据库服务。
6. 将源代码编译成SWF 文件,然后在Flash Player 中运行。
一个典型的Flex 应用程序包括如下元素:1. Flex frameworkAdobe. Flex 2 framework 包含了创建RIA 所需要的所有组件,它们是:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮);广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。
Flex framework 被包含在公用组件库(SWC)文件中。
2. MXML每个Flex 应用程序至少包含有一个MXML 文件,它被作为该程序的主文件。
MXML是一种标记语言,它是基于XML 的一种实现,用来创建Flex 应用程序。
你可以使用它去声明程序中所使用的标签结构的定义。
3. ActionScript 3.0你可以使用ActionScript 3.0 为应用程序添加动态行为,它是基于ECMAScript 的一种实现,类似于JavaScript。
Flex 快速入门无衣摘自/cn/ (版权归原作者所有)Flex 快速入门: 使用 MXML 和 ActionScript 进行编码Adobe® 将 Flex 实施为 ActionScript 类库。
该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。
您通过将 MXML 和 ActionScript 语言与该类库一起使用来开发应用程序。
MXMLMXML 是用于为 Adobe® Flex™ 应用程序进行用户界面组件布局的 XML 语言。
您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。
例如, 您通过使用下面的 MXML 语句, 使用 <mx:Button> 标签来创建 Button 控件的实例:<mx:Button id="myButton" label="I'm a button!"/>您设置 id 属性以赋予 Button 实例一个唯一的名称, 以后可以使用该名称引用到它。
label属性设置在 Button 实例上显示的标签的文本。
下面的示例显示创建显示 Button 控件的 Flex 应用程序所需的完整代码:<?xml version="1.0" encoding="utf-8"?><mx:Applicationxmlns:mx="/2006/mxml"horizontalAlign="center" verticalAlign="center"><mx:Button id="myButton" label="I'm a button!" /></mx:Application>在编写 Flex 应用程序之后, 您必须使用 Flex 编译器来编译它。
Flex设计师基础作者:Greg Goralski、LordAlex Leon译者:Chao(第九章)译者电邮:yuyongchao1986@ 版权声明:此译作纯属个人爱好学习之用,本书版权属于原作者。
在AIRIA论坛首发,欢迎散发文本、提出意见,相互交流,但拒绝以此进行任何形式的非学术非开源活动。
临时目录第九章Flex视频案例 (2)9.1 Flex中的拖拽 (3)9.2 列表控件的拖拽 (3)9.3 手动添加拖拽支持 (8)9.4 更改播放的视频 (12)9.5 编写拖拽处理函数 (15)9.6 本章总结 (18)第九章Flex视频案例--------------------------------------------------------------------- 本章我们将要涉及的内容:列表控件的拖拽手动添加拖拽播放视频本章将会使用到的文件:Assets folderdragAndDropCode.txt在上一章,你学到了如何通过XML创建一个图片库。
下一步我们建立的这个设计,把它提升到更高层次。
我们要做的不是使用按钮选择静止的视频,而是使用Flex内置的拖拽功能。
使用拖拽是一个很棒的方式,让你的界面更有触感,并允许用户在界面上拖动一个更加复杂对象到多个位置。
9.1 Flex中的拖拽Flex开发平台包含一个拖拽管理器,允许你将选择的一个组件拖过另一个组件的上部,并将其添加到该组件。
所有的Flex组件都支持拖拽,但有些组件额外的支持使拖拽更容易。
这些组件有例如:List、DataGrid等。
我们首先将使用组件的额外支持创建一个简单的例子,然后在继续更详细的例子。
第二个例子将使用手动拖拽的方法将一张照片放入画廊中,这是非常复杂的,但会让你拥有更多的互动控制。
拖拽有三个阶段●发起阶段,当用户第一次选择一个组件,并按住鼠标按钮,移动组件。
●拖着阶段,当组件被移动,在这段时间代表所选组件显示的被称为拖动图像代理,我们可以控制这个代理得到各种各样的效果,原始的组件被称为拖动源●放置阶段,当拖动的组件经过另一组件的上方,该组件为放置目标,Flex分析拖动组件数据信息判断是否可以放置,如果可以那么你释放拖动组件,他进入放置目标。
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入门教程编写日期: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:交叉轴的起点对齐。