Flex从入门到精通 第4章
- 格式:ppt
- 大小:274.00 KB
- 文档页数:2
第一章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。
了解提示点可在编码期间将提示点嵌入Adobe F4V 或FLV 视频文件。
过去,在影片中嵌入提示点是为了给放映员提供了一个可视信号,以指出胶片盘中的胶片即将放完。
在Adobe F4V 和FLV 视频格式中,提示点的作用在于:当视频流中出现提示点时,在应用程序中触发一个或多个其他动作。
您可以对Flash 视频使用几种不同类型的提示点。
可以使用ActionScript 与在创建视频文件时嵌入其中的提示点进行交互。
• 导航提示点:您可以在编码视频文件时,将导航提示点嵌入到视频流和元数据包中。
使用导航提示点可以使用户搜索到文件的指定部分。
• 事件提示点:您可以在编码视频文件时,将事件提示点嵌入到视频流和元数据包中。
还可以编写代码来处理视频播放期间在指定点上触发的事件。
• ActionScript 提示点:ActionScript 提示点只对Flash FLVPlayback 组件有用。
ActionScript 提示点是您使用ActionScript 代码创建和访问的外部提示点。
您可以编写代码来触发这些与视频播放有关的提示点。
这些提示点的精确度要低于嵌入的提示点(最高时相差1/10 秒),因为视频播放器单独跟踪这些提示点。
如果您计划创建一个应用程序,希望用户能在其中导航至提示点,则应在编码文件时创建并嵌入提示点,而不应使用ActionScript 提示点。
您应将提示点嵌入FLV 文件中,因为这些提示点更加精确。
由于导航提示点会在指定的提示点位置创建一个关键帧,因此可以使用代码将视频播放器的播放头移动到该位置。
您可以在视频文件中设置一些希望用户搜索的特定点。
例如,视频可能会具有多个章节或段,在这种情况下您就可以在视频文件中嵌入导航提示点,以此方式来控制视频。
有关使用提示点对Adobe 视频文件进行编码的详细信息,请参阅《使用Flash》中的“嵌入提示点”。
您可以通过编写ActionScript 来访问提示点参数。
第三章Flex基础Flex是基于组件来进行开发的,为了更有效率地设计和开发应用程序,你应该熟悉这些开发模式以及操作步骤。
第一节创建一个Flex应用程序应用程序模型Flex创建一个应用程序时,你使用组件(容器/containers和控件/controls)来描述用户的操作界面。
例如,容器可以是一个用来进行数据输入的表格容器,如一个盒框/Box或一个栅格/Grid;而控件就是该表格中的元素,如一个按钮/Button或文本输入栏/Text Input field。
举个例子,在随后的图例中显示了两种不同的盒子容器,它们分别包含了三个按钮控件和一个ComboBox控件:Flex的MVC模型为了增强系统的复用性和可维护性,应该采用具有良好体系架构的模型,即Model-View-Controller(MVC)。
1. 模型/Model组件封装了数据和与数据相关的行为。
2. 视图/View组件定义了应用程序的用户界面。
3. 控制器/Controller组件则负责处理程序中的数据连接。
web服务器的运用通常地,会涉及到的web服务器类型有:1. 纯web服务器,它们仅将用户的请求回复一个简单的静态HTML页面。
在这种情况下,你需要将Flex应用程序的SWF文件嵌入到一个HTML页面中。
2. web应用服务器,如JRun、ColdFusion或者PHP,它们可以动态地生成页面。
在这种情况下,你将使用到与服务器技术相关的库,并动态地处理它们的内容。
3. J2EE应用服务器或servlet容器。
向一个J2EE应用服务器或servlet容器发出请求,如JRun、Tomcat或WebSphere,通常你需要使用Flex Data Services。
程序开发的通常步骤开发Flex应用程序,通常会采用如下的步骤进行:1. 在一个文本编辑器或集成开发环境(IDE)中,如Adobe Flex Builder、Eclipse或IntelliJ 中插入MXML根标签。
Flex4之事件详解第一、Flex事件简介事件贯穿于Flex应用开发的全过程。
事件是ActionScript3.0中最重要的部分之一,也是Flex应用程序开发的核心基础。
本章将在DOM 3的基础上详细讲解ActionScript3.0和Flex中的事件机制。
第二、一切从事件开始利用事件处理,可以方便地响应和处理用户输入和系统事件。
Flex 事件模型不仅方便,而且符合标准,新的事件模型基于文档对象模型(DOM,Document Object Model)第3级事件规范,为Flex程序员提供了强大而直观的事件处理工具第三、事件简介什么是事件呢?我们去商店里买鞋子时,选择好鞋子后,告诉销售人员鞋子的款式、号码、付款,然后服务员将符合购买要求的鞋子交给我们。
这样就完成了一个事件的流程。
但是如何找到售货员买鞋子,售货员拿什么样的鞋子给客户,都是事件要处理的事情。
对于Flex而言,其重要的部分就是与用户进行交互。
用户的操作,例如键盘输入、鼠标点击等引起界面的响应,然后在内部进行一系列的操作,最终返回用户需求的信息。
简单的过程,即包含了事件的核心思想。
用户的操作触发了某个事件,同时产生该事件的信息,通知相关的对象进行处理。
其中,如何发起消息、传递消息是Flex非常关键的问题。
第四、DOM3事件机制DOM3的事件模型是非常简单的,符合我们日常思考的习惯。
在上一节开头所举的买鞋的例子中,买鞋的人(客户)可以看作事件发送者(Event Dispatcher),买鞋的过程可以看作事件,而销售人员即事件侦听器(Event Listener)。
买鞋可以看作事件的类型(Type)。
买鞋的个人即事件的目标(Target)DOM3事件机制包含4个部分:注册事件侦听器、发送事件、侦听事件、移除事件侦听器。
这4个部分贯穿整个事件的发生和结束。
第五、ActionScript3.0中的事件机制在Flex的事件机制中ActionScript扮演了非常重要的角色。
译者声明1.请大家在转载和使用时保持本文的完整性。
2.本文所有资料均来自Flex官方文档,其英文版权归Adobe公司所有。
3. 文中某些内容根据译者的理解稍作改动,因此与原版英文在文字上不完全一致。
同时,由于译者水平有限,翻译不妥之处请大家多多见谅。
重庆大坪刘刚第四章Flex编程入门教程本章节将提供一系列的课程教授你如何开发Flex应用程序。
第一节创建你的第一个应用程序本节将向你展示如何使用Adobe Flex Builder编译和运行一个简单的Flex应用程序。
其中涉及的重点内容包括Flex Builder项目的概念。
在Flex Builder中,所有的程序都被包含在项目/projects里。
创建一个项目在Flex Builder中创建一个Flex应用程序之前,你必须首先要创建一个项目。
当创建好项目文件时,主MXML程序文件就已经准备好。
然后你就可以在项目中添加各种资源,如MXML组件文件、ActionScript文件等等。
其主要操作步骤有:1. 启动Flex Builder并从主菜单中选择File > New > Flex Project,出现新项目向导/New Flex Project wizard。
2. 在打开的屏幕中,选择基础数据选项/Basic data option并点下一步/Next。
接下来会询问你指定保存项目文件的目录。
3. 在项目名称栏中输入Lessons。
在项目内容区域,确保使用默认目录选项/Use Default Location option被选定。
默认的目录是C:\Documents and Settings\your_user_name\My Documents\Flex Builder 2。
Flex Builder将在该目录下创建Lessons文件夹。
4. 点击完成/Finish。
Flex Builder创建好新的项目并在导航视图中进行显示。
新建项目向导将自动生成项目配置文件,存放被编译SWF文件的输出目录,以及主程序文件Lessons.mxml。
第一章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。
flex4mxml文件就是.MXML的xml文件actionscript文件.as 编写代码编译成swf文件flex4 应用程序需要使用flash builder4的软件来创建flash catalyst事件数据绑定1、基础知识介绍1.1、了解fl ex和flash平台开发工具—flash builder开源框架---flex内嵌组件扩展组件语言---ActionScript3.0类库(符合ECMA标准的脚本语言,主要用来实现业务逻辑)语言---MXML(基于XML的描述式语言,主要用来描述UI布局的)Flex SDKFlex框架软件开发包---编译器---调试器Flash Builer开发工具Flex SDK所有的功能提供一些额外的特性提高生产力---上下文的代码提示---一个可交互的逐步调试器---一个可视化的设计环境(布局和样式)---连接到服务器端数据的数据服务向导---内存和性能检测---自动测试支持及更多的特性Flash Builder版本:---标准版---增强版:致力用创建关键业务应用,包含了标准版所有特性,并添加了一些企业及的特性在里面,包括内存和性能检测以及自动测试。
增强版的数据可视化支持你创建图表和丰富的可视化面板。
1.2、了解flash Bulid er 和flex项目默认的工作空间位于:Document and settings→user directory→adobe flash builer beta2.metadata和configuration目录包含了flash builder工作空间的设置。
默认情况下,flash builder会把我的flex应用程序编译到我的项目文件夹下面的一个名为“bin-debug”的目录下。
源文件将会保存在项目目录中的“src”目录下。
组件设置:MX+Spark(同时使用两个库)MX only(这个mx库比较老)修改编辑器中的字体大小:General→Appearance→Colors and fonts→basic→text font改变代码间距:Flash builder→indentation→actionscript.并且取消方法中的对齐参数。
RIA 是什么?RIA 是富网络应用(Rich Internet Application)的缩写,也即丰富互联网应用程序。
它只是一种技术形式而不是具体的技术。
RIA 出现的背景在 RIA 出现之前,软件开发都是基于 C/S(Client/Server)或 B/S(Browser/Server)架构,但两者各有缺点。
C/S 的主要缺点:1.开发、部署成本高传统 B/S 结构的软件需要针对不同 OS 开发对应的版本,且软件更新换代的速度越来越快自然成本会很高。
2.维护成本高服务器和客户端都需要维护管理,工作量较大且技术支持复杂。
B/S 的主要缺点:1.受限于 HTML 技术,很难像 C/S 那样产生丰富,个性的客户端界面;2.存在浏览器兼容性差问题;3.Server 端负荷较重,响应速度慢;绝大多数处理都集中在 Server 端,并且每次响应都要刷新页面(利用 Ajax 技术会有所缓解)。
随着软件的飞速发展,此时需要出现一种能够摒弃上诉缺点的新的技术形式– RIA 出现了。
目前比较流行的 RIA 技术▪Adobe 的Flex▪微软的Silverlight▪Sun 的JavaFX以上三种技术各有优势,本教程只关注目前应用较广泛的 Flex。
Flex 和 Flex SDK 是什么?Flex 是一个开源、免费的框架,用于构建在Adobe® Flash® Player 或Adobe AIR® runtimes 环境内运行的跨浏览器、桌面和操作系统的富网络应用。
Flex SDK(Flex Software Development Kit)除了包括 Flex 框架以外还包括 compilers(编译器)和debugger(调试器)等开发工具。
(这也意味着没有 Flash Builder 等 IDE 同样可以开发 Flex 应用,但效率会很低。
)授权Mozilla Public License, version 1.1 (MPL)开发语言Flex Framework : Action Script 3.0开发者Adobe Systems IncorporatedFlex 应用运行环境–Adobe® Flash® Player 和Adobe AIR® Runtimes两者都是运行环境,前者基于浏览器,后者基于桌面。
<mx:Application>标签看起来就象这样:<mx:Application xmlns:mx="/2006/mxml"layout="absolute" creationComplete="createListener();">6. 保存文件,编译后运行。
7. 输入价格并点击“Convert to Yen”按钮。
TextInput控件下方的Lable控件将以人民币为单位进行显示。
在本节中,你学习了为按钮控件编写一个事件监听器,然后使用两种方法将它与按钮单击事件相关联。
在第一种方法中,你通过指定按钮控件的MXML标签里的click属性来进行关联。
在第二种方法中,你使用ActionScript 功能函数来进行关联。
第六节使用行为Adobe Flex行为使你可以为应用程序添加动画和运动,来对用户和编程活动作出反应。
行为,是由一个触发器和一种效果组合而成。
触发器是一种活动,如鼠标在组件上点击,组件获得焦点,或组件可见。
效果是在目标组件上的可视性或可听性上的某种变化,以毫秒计算。
效果的例子包括淡出,尺寸变化,或者组件发生移动。
本节将教授你如何在Flex用户界面中添加行为。
具体内容包括如何使用MXML去创建行为,如何从不同的组件调用一种效果,以及如何组合多种效果以产生合成效果。
创建一个行为你打算创建一个行为,当按钮被用户点击时变成绿色,维持一秒半以后,离开按钮时变成淡绿色以表明它已经被点击过。
1. 在导航视图中选择Lessons项目,选择File > New > MXML Application并创建名叫Behaviors.mxml的文件。
2. 将Behaviors.mxml设置为被编译的默认文件,并在关联菜单中选择Set As Default Application。
3. 在MXML编辑器源代码模式中,在<mx:Application>标签后定义绿色效果:<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>绿色效果开始时十分饱满,然后逐步变得透明,但不完全透明。
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。
序任何人写书时都会遇到麻烦,我在编写本书时遇到的麻烦则格外多。
具体来讲,本书诞生于2008年年底,当时我同时遭遇了三重打击:Ruboss框架没能作为商业产品;Enterprise Flexible Rails终未成书;Hello! Flex 3的版式失败。
用嘻哈巨星弗里德里希·尼采(Friedrich Nietzsche)的话说:"只要没杀死我们,就会让我们变得更坚强。
" 2008年年底这场失败风暴绝对让我变得更坚强,甚至也让本书变得更好。
上面只是简略的描述,如果你想知道得更多,请继续往下看……就在Manning出版公司于2008年年初出版Flexible Rails一书不久,我开始在自己的公司Ruboss全职工作,并招募了合作创始人Dima Berastau。
我们一边做咨询,一边启动了一个产品,即Ruboss框架。
Ruboss框架使用GPL v3许可和一个商业许可,所以它的Flex版本免费,AIR版卖499美元。
我想通过写书来推销Ruboss框架,所以我与Manning出版公司的Mike Stephens探讨为Flexible Rails写本姊妹篇,书名就叫Enterprise Flexible Rails,这本书将延续Flexible Rails,带领读者使用Ruboss框架来开发他们的Flex项目。
在我同时开发Ruboss框架和撰写Enterprise Flexible Rails期间,2008年年初Mike找到我,让我推荐一个人来为Manning出版公司写Hello! Flex 3。
该出版商新开发了一个系列,名为"Hello! X"。
这个系列希望采用明快有趣的形式介绍某个主题,并配上漫画插图。
我想都没想就说:"我推荐我自己。
"我认识J. D. Frazer(即Illiad,网络漫画User Friendly的作者),所以我建议Manning出版公司在"Hello!"系列中使用User Friendly漫画,然后我为他们作了介绍。
Flex学习笔记4之layout和自定义布局组件用于列表形式有四种1.Tree2.Menu3.DataGrid4.Titlelist and horizontalist上次遗留了一点小问题:关于layout属性Layout属性有三个值:absolute(默认属性),horizontal,vertical故名思意:absolute :各个组件相对独立Horizontal:水平对齐Vertical:垂直对齐实际情况:如果设置除了absolute的其他属性,即使你的组件XY坐标设置了,那么也会按照其相应的对齐方式显示组件。
1.Form类通过Form 容器,您可以控制表单布局、将表单字段标记为必填或可选、处理错误消息以及将表单数据绑定到Flex 数据模型以执行数据检查和验证。
通过它,您还可以使用样式表这里有三个组件:组件 标签 DescriptionForm <mx:Form>定义整个表单(包括整个表单布局)的容器。
使用 FormHeading 控件和 FormItem 容器定义内容。
您也可以在 Form 容器中插入其它类型的组件。
FormHeading <mx:FormHeading> 在表单中定义标题。
可在一个 Form 容器中拥有多个 FormHeading 控件。
FormItem <mx:FormItem> 包含一个或多个水平或垂直排列的表单子项。
子容器可以是控件,也可以是其它容器。
一个 Form容器可以容纳多个 FormItem 容器。
2.Canvas 类布局容器定义一个矩形区域,您可以在其中放置子容器和控件。
只有在此容器中,您才可以使用各子项的 x 和 y 属性明确指定各子项的位置。
<mx:Canvas></mx:Canvas>3.Box 类容器在单个垂直列或单个水平行中排列其子项。
direction 属性确定使用垂直(默认)布局还是水平布局。