• 1. Flex入门Prepared by:梁小江 Email:liangxj@tfsp.cn
  • 2. 目录Flex 的基础架构 HelloWorld示例 实现flex程序的可交互 Flex事件处理 Flex数据绑定 布局和组件定位 样式和主题 自己定义组件 集合 XML Flex与服务器通信 Flex与浏览器通信 Flex常用框架介绍
  • 3. Flex 的基础架构关于 flex 基本上常被问到的不外乎就是“如何可以学好它?”, 要了解这个问题的答案基本上只要看懂下面这个图就OK了。
  • 4. ActionScript3.0简介ActionScript(以下简称AS)是flash的内置编程语言。是一种面向对象的编程语言,其基本语法与面向对象的语言很相似。 AS功能非常强大,可以完成以任务: ★ 加载图像 ★ 播放音频和视频 ★ 用编程方式绘图 ★ 加载各种数据,如XML文件 ★ 响应用户事件,如鼠标点击事件 ★ 与服务器和浏览器进行通信 ★ 对象共享
  • 5. ActionScript基础语法 AS语法与面向对象编程语言的语法非常相似。有过面向对象编程经验的人学习起来都非常的容易,这里就简单的介绍一下。 ★ AS的变量的定义 我们知道在JAVA中定义一个变量的规则是 数据类型 变量名称 ; 比如: int i; 而在AS里面我们这样定义一个变量 var 变量名:数据类型; 比如: var str:String ;
  • 6. ActionScript基础语法★ AS的常量定义 在JAVA中定义一个常量规则是: public static final 数据类型 常量名=值; 如:public static final String HELLO = “hello”; 在AS中定义一个常量规则是: public static const 常量名:数据类型=值; 如:public static const NAME:String=“test” ;
  • 7. ActionScript基础语法★ AS的条件语句 AS的条件语句和大多数编程语言一样。 AS的条件语句有以下几种句型 if..else if..else if switch 其语法与其他的编程语言的语法几乎一样,这里就不介绍了
  • 8. ActionScript基础语法★ AS的循环语句 AS的循环控制语句也与其他的编程语言很类似,主要还是有for,while,do..while 三种循环语句。值得注意的是AS还提供了几个比较特殊的循环控制语句。 for..in 用于循环访问对象属性例如,可以使用 for..in 来循环访问通用对象的属性或数组元素。举个例子 (注: trace函数相当于java中的打印函数在debug模式下才能使用)
  • 9. ActionScript基础语法var myObj:Object = {x:20, y:30};//定义一个对象有两个属性x=20,y=30 for (var i:String in myObj) { trace(i + ": " + myObj[i]); } // 输出: // x: 20 // y: 30 还可以循环访问数组中的元素: var myArray:Array = ["one", "two", "three"]; for (var i:String in myArray) { trace(myArray[i]); } // 输出: // one // two // three
  • 10. ActionScript基础语法for each..in 用于循环访问集合中的项目,它可以是 XML 或 XMLList 对象中的标签、对象属性保存的值或数组元素。例如,如下面所摘录的代码所示,您可以使用 for each..in 循环来循环访问通用对象的属性,但是与 for..in 循环不同的是,for each..in 循环中的迭代变量包含属性所保存的值,而不包含属性的名称,例如:
  • 11. ActionScript基础语法var myObj:Object = {x:20, y:30}; for each (var num:Number in myObj) { trace(num); } // 输出: // 20 // 30 还可以循环访问 XML 或 XMLList 对象,如下面的示例所示: var myXML:XML = Jane Susan John ;  for each (var item:String in myXML.fname) { trace(item); } /* 输出 Jane Susan John */可以循环访问数组中的元素,如下面的示例所示: var myArray:Array = ["one", "two", "three"]; for each (var item:String in myArray) { trace(item); } // 输出: // one // two // three
  • 12. ActionScript基础语法★ AS的函数 AS的函数定义也与JAVA的方法有一些区别 在JAVA中我们是这样定义一个方法的: 返回值类型 方法名(参数列表){ //方法体} 如:void method1(){//do something} AS中定义函数规则为: function 函数名(参数列表):返回值类型{//函数体} 如:function function1():void{// do something}
  • 13. MXMLMXML 是用于为 Adobe® Flex™ 应用程序进行用户界面组件布局的 XML 语言。 您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。 例如, 您通过使用下面的 MXML 语句, 使用 标签来创建 Button 控件的实例: 您设置 id 属性以赋予 Button 实例一个唯一的名称, 以后可以使用该名称引用到它。 label 属性设置在 Button 实例上显示的标签的文本。 下面的示例显示创建显示 Button 控件的 Flex 应用程序所需的完整代码:
  • 14. Component 组件Component 是整个 flex framework 的基础,几乎80% 的元素都是由 UIComponent 继承而来,例如最根本的它本身就是一个 UIComponent,因此,熟悉 component 就成为学好 flex framework 最根本也最重要的基本功 Flex 内建了 二十几个 UI controls, 例如 Button, DataGrid, HBox等,以种类来分,这些 components 可以大概分为三大类: Controls(控件): Button, DateChooser, Slider… Containers(容器): Box, DividedBox, Panel… List(集合): DataGrid, Tree, TileList…
  • 15. manager 是什么flex 里有很多的 managers,负责做各种不同的工作(废话…),几个比较重要的包含: SystemManager: 它是每个 flex 程序的根源,最先被下载,也最早启动,由它进行一连串的 app boot流程 StyleManager: 它负责整支app 的 css style 套用与 skin 生成,如果想玩动态 css 载换也靠它 DragManager: Flex最大的卖点就是 drag and drop(拖放),这个 manager 就是背后的英雄,初学者至少要学会怎么处理 drag 行为的五个事件,以及如何在不同元件间做拖放;进阶的玩家则应该深入研究这支 manager 是怎么写成的,详细阅读它的 source 会得到意想不到的无穷乐趣 ModuleManager: 使用 Flex 开发大型应用程式时,往往会将程式切割成许多小的 module, 这个 manager 就是负责载入并管理所有的 module (包含它的 class partition),初心者或许用不到,但有志深入的玩家一定要很熟。 CursorManager: 这个用到的时机不是很多,但偶尔要换一下 cursor 时还是会用到,初学者至少要知道怎么用指定的图案去换掉系统cursor。
  • 16. Style/Skin 的重点CSS style 与 skinning 是 Flex 最大的卖点之一,也是开发过程中较为麻烦也最耗时的部份。 初学者应该要彻底了解如何使用 CSS style 来打点一支 flex app 的外观,换颜色、素材,使用外部 assets 修饰介面。 中阶玩家则应该了解 skinning 的系统,包含 programmatic skinning 与 graphical skin,它们俩的差别?使用时机?如何客制化? 更高阶的玩家则应该熟悉整个 Styling system 的运作模式,外加如何动态载入 css 在 runtime 换掉整个介面。 简而言之,flex app 写的好不好,外行人其实看不太出来,但一支 app UI 美不美则是一翻两瞪眼,比较漂亮的那就先加十分
  • 17. 第一个Flex例子:Hello World!下面开始我们的第一个例子,在讲例子之前先说说IDE:Flash Builder 之前的版本称为Flex Builder ,从4.0开始就被命名为Flash Builder。 安装Flash Builder: 到Adobe 的官方网站下载最新的Flash Builder版本 有两种类型 一个标准版本,一个Eclipse的插件版本,这个根据大家的喜好自己选择。具体如何安装就不介绍了,相信大家都是非常熟悉的。
  • 18. 第一个Flex例子:Hello World!下面开始我们的第一个例子。 首先打开Flash Builder我使用的是Eclipse插件版 将视图切换到Flash Builder视图 然后新建一个Flex项目
  • 19. 第一个Flex例子:Hello World!所有的选项都和 我的一样, 然后点击Finish 就OK了,项目 建立完成后, 目录结构为
  • 20. 第一个Flex例子:Hello World!打开HelloWorld.MXML.选择设计面板. 然后在组件面板将看到以下内容 自定义:放置自己写的组件 控件:对页面内容进行控制的组件.如文字,图片等 布局:页面布局所用的 导航器:与用户交换时使用的组件. 图表:数据以图表的形式进行显示时使用的组件 打开控件文件夹,将Label控件拖动到MXML设计面板 双击”标签” 输入“Hello World”保存文件
  • 21. 第一个Flex例子:Hello World!到这里我们的Hello World就完成了,然后是运行我们的程序。 两种方式: 1、在包资源管理面板里鼠标右键点击HelloWorld.mxml>> Run As >>2Web 应用程序 2、或者菜单栏的Run >> Run As >>2Web 应用程序 运行结果:在浏览器上我们看到 这样的效果
  • 22. 让程序变得可交互刚才的例子给出了一个显示静态文本的例子。那么如何才能让我们的Flex程序可以和用户交互呢?那就需要我们添加事件了,我们简单的修改一下刚才的例子 首先将原来的Label删掉 然后从组件面板里面拖一个TextArea到MXML设计面板,在属性面板里其id 设置为:ta_1 再拖 一个Button到MXML设计 面板,在属性面板里其id 设置为:btn_1 将视图切换到源代码模式
  • 23. 让程序变得可交互写入如图所示代码 找到标签写上click=“clickHandler(event);” 如图所示: 到这里改造就结束了。我们保存文件并运行程序,点击按钮看上面的TextArea里面是不是多了一行文字”你点击了按钮”。
  • 24. Flex事件处理 Flex应用程序是事件驱动的。事件让程序员知道用户何时与界面组件交互, 以及在组件的外观或生命周期中何时发生重要的变化, 如组件的创建或破坏或调整其大小。 当组件的实例发出某个事件时, 会通知您注册为该事件的监听器的对象。您在 ActionScript 中定义事件监听器 (也称为事件处理程序) 来处理事件。您在组件的 MXML 声明中或者在 ActionScript 中注册事件的事件监听器。 接收事件通知有三种方式: • 在 MXML 中注册事件处理程序 • 在 MXML 定义中创建线上事件处理程序 • 通过 ActionScript 注册事件监听器
  • 25. 在 MXML 中注册事件处理程序获得事件通知的第一个和使用最广泛的方法是在 MXML 中定义事件发生时会调用的事件处理程序。 刚才我们修改的这个例子就实现了在MXML 中注册事件处理程序,我们在函数clickHandler中设置id=ta_1的控件的文本。 通过给按钮添加click= “clickHandler(event)”调用事件处理程序。
  • 26. 在 MXML 定义中创建线上事件处理程序有时, 对事件作出响应最容易的方法是在组件的 MXML 定义中完全地定义事件处理程序。 这也称为使用线上事件处理程序。 我们将刚才的例子稍作修改就可以实现了,将Button里面的click=“clikcHandler(event);”修改为 click=“ta_1.text=‘你点击了按钮!’”; 如图所示: 然后再运行,其结果和刚才的一样
  • 27. 通过 ActionScript 注册事件监听器 还可以通过使用 ActionScript注册事件处理程序来对事件作出响应。 这里我们会使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。 还会使用Application 容器的 creationComplete 事件的来使程序一开始运行就给相应的组件注册事件。
  • 28. 通过 ActionScript 注册事件监听器我们在刚才的项目里面新建一个MXML应用程序 打开刚刚新建的mxml文件切换到设计视图,还是拖动一个TextArea和一个Button到设计面板。分别设置id为ta_1 和 btn_1
  • 29. 通过 ActionScript 注册事件监听器新建两个函数 在Application添加creationComplete="initListener(event);“ 如图所示: 保存文件并运行,看到结果还是一样。
  • 30. 数据绑定数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。数据绑定为在应用的不同层之间传递数据提供了便捷方法。数据绑定需要一个源属性,一个目的属性,以及用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时,对象发出触发事件。 Flex 提供三种方法用于指定数据绑定: MXML 中的大括号({})语法; MXML 中的标记; ActionScript 中的 BindingUtils 的系列方法。
  • 31. MXML中的“{}”实现数据绑定示例代码: 运行结果: 我们在第二个文本框里面输入任何值,第一个文本框的值都会随着改变,并且保持和第二个文本框的值一致。
  • 32. MXML 中的标记示例代码: 运行结果 同样的我们在第二个文本框里面输入任何值,第一个文本框的值都会随着改变,并且保持和第二个文本框的值一致。
  • 33. 两者的区别同大括号语法相比,用标记能够将视图(用户界面)同模型完全分离。标记也能实现将多个源属性绑定到一个相同的目的属性,这是因为能够定义多个具有相同的 destination 属性的标记。”
  • 34. ActionScript 中的 BindingUtils 的系列方法示例代码: 运行结果 同样的我们在第二个文本框里面输入任何值,第一个文本框的值都会随着改变,并且保持和第二个文本框的值一致。
  • 35. 创建用作数据绑定源的属性 当创建一个用于绑定表达式源的属性,那么在源属性值发生变化时 Flex 就能自动将值拷贝到所有的目的属性。为了让 Flex 执行拷贝,必须使用[Bindable]标记来向 Flex 注册这个属性。 The [Bindable] 元数据标记有以下语法: 如果忽略了事件名称,Flex 自动地创建一个名为 propertyChange 的事件,并且在属性发生变化时,由 Flex 发出这个事件以触发所有以这个属性作为源的数据绑定。[Bindable] /[Bindable(event="eventname")] var testStr:String=“Hello World”;
  • 36. Flex 组件的定位和布局当我们新建一个flex应用的时候默认的布局方式就是绝对定位(layout=“absolute”),这里的“absolute”和CSS里的一样,任何控件或者容器都是依据x,y坐标来定位的,你对组件有绝对的控制权,你想让多个组件重叠在一起显示都没问题,如果你有使用过Fireworks或者是 Flash你可以将这个想像成画布一样的东西。打开Flex Builder切换到设计模式,现在我们可以设计界面了,很简单咯,直接选择一个控件,拖放到画布上,设置一下在大小,嗯 ,就OK了。
  • 37. Flex 组件的定位和布局1如图我在画布的中间放了一个按钮, 在x= 293,y=223的位置。  
  • 38. Flex 组件的定位和布局大多数时候,我们希望应用程序能自适应屏幕大小,不管整个窗口如何变化多端,按钮都能使终处在右下角的位置,这种情况下可以使用强制约束布局的方式,如图: 不管整个应用的窗口(浏览器...)如何变化,按钮将将使终被固定在离窗体右边67px,窗体底部150px的地方。
  • 39. Flex 组件的定位和布局使用布局容器 在现实的应用当中,我们经常需要动态的,添加,删除各种组件元素,这个时候就需要考虑使用Flex中的容器组件,像是:HBox,VBox,Panel等等。这些个容器,主要的作用就是指出,元素之前的排列关系,代替这前提到的用X,Y的绝对定位布局方式。 使用布局控件 这类组件在布局的时候起一些辅助作用,看它的名字就晓得,这是一个空白组件,虽然也有width,hieght等属性,但是不会显示,是用来占位的,比如说将两个靠得太紧的控件对象,分开一点。还有就是用来显示一条水平或垂直的直线。像是你需要在Form里区分一下不同的区域,要以用这个。
  • 40. 样式和主题 样式对于定义 Flex应用程序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一组件的外观, 或在所有组件上应用它们。在 Flex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算。和HTML一样在 Flex 中, 可以使用以下几种方法将样式应用到控件: •使用本地样式定义 •使用外部样式表 •使用线上样式 •使用 setStyle() 方法
  • 41. 自定义组件Flex给我们提供了很多基本的组件,但是在实际的开发中这些组件是不能满足我们的需求的,这就需要我们自己利用Flex提供给我们的这些基本组件,来组合成能满足我们需要的组件。而这些组件往往是能够重复使用的,这也就是我们的自定义组件
  • 42. 集合集合是ActionScript 中功能强大的基于索引的数组组件,添加了如对内容进行排序等功能,操作数组的读取位置,创建经过排序的数组视图。集合也能通知其任意事件监听器监听其数据是否改变,以及任何数据项被添加到源数组时可执行自定义逻辑。Flex中经常使用的集合有ArrayCollection 类和XMLListCollection 类
  • 43. ArrayCollection 类ArrayCollection 是Array 的包装类,提供更方便的如添加和移除数据项以及能够创建游标启用要轻松地存储数组中的最后读取的位置等方法。 ArrayCollection常用函数: ArrayCollection几个属性的说明 length: ArrayCollection的长度 soure: ArrayCollection 中的数据源。以数组形式返回 sort: 设置ArrayCollection 的排序方式,设置完成后必须调用refresh()方法 filterFunction:设置ArrayCollection 的过滤方式,筛选需要的数据函数名描述addItemAt(obj:Object,index:int)在指定位置添加元素getItemAt(index:int)获取指定位置的元素setItemAt(obj:Object,index:int)设置指定位置的元素值addAll(list:IList)向当前列表添加一组项目,将它们按传入顺序放置在列表的末尾addItem(obj:Object)向当前列表添加一组项目,将它们按传入顺序放置在列表的末尾contains(obj:Object)是否包含某个元素removeItemAt(index:int)删除指定位置元素addAllAt(list:Ilist,index:int)向当前列表添加一组项目,将它们放置在传递给函数的索引指定的位置。这些项目按接收顺序放置在索引位置。
  • 44. XMLListCollection 类XMLListCollection 是XML 对象的包装类,提供的功能有:根据索引访问数据,添加新对象以及游标等方法。XMLListCollection 对于处理XML 对象以及经常需要解析XML 为数组时特别有用。 常用函数(很多函数和ArrayCollection 类似,这里只说XMLListCollection特有的)函数名描述attribute(name:Object)调用 XMLList 中的每个 XML 对象的 attribute() 方法,并返回与给定的 name 相匹配的结果 XMLList。attributes()调用 XMLList 对象中的每个 XML 对象的 attributes() 方法,并返回每个 XML 对象属性的 XMList。child(name:Object)依次调用 XMLList 中的每个 XML 对象的 child() 方法,并返回包含具有指定属性名称的子项的 XMLList。children()调用 XMLList 中的每个 XML 对象的 children() 方法,并返回包含结果的 XMLList。elements(name:String=“*”)调用 XMLList 中的每个 XML 对象的 elements() 方法。name 参数会传递给 XML 对象的 elements() 方法。如果未指定参数,则字符串“*”将传递给 elements() 方法。
  • 45. XMLFlex Framework 及 ActionScript 3.0 定义了两个级别的对象来处理 XML 语言: XML 和XMLList 对象。XML 对象代表单一的 XML 元素, 一个XML 文档或该文档中的一个单值元素。XMLList 则代表一组跟其他组同级的 XML 元素。
  • 46. 数据服务和服务器通信使用 Flex 最重要的部分之一 就是和服务器以及数据库的通讯。这里简单介绍配置一个 Flex 应用程序来与服务器通讯以及处理从服务器发到应用程序的数据,这些数据从三种主要的服务器应用之间的通讯方式传送。Flex 提供了三个类来与服务器通讯: HTTPService,RemoteObject 以及 WebService。下面简单介绍一下HTTPService和RomoteObject
  • 47. 通过HTTPService与服务器通信HTTPService 对象提供了所有 HTTP 上跑的通讯。它包含了通过 GET 或者 POST 方法发送的信息,以及从 URL 请求上获取的信息,甚至静态的文件。HTTPService 对象可以设定 result和 fault 方法处理函数分别来接受 mx.event.ResultEvent 对象以及 mx.event.FaultEvent 对象 基本步骤(flex端) 1、新建一个HTTPService对象使用new HTTPService() 或 2、设置结果格式 resultFormat =“object|array|xml|e4x|flashvars|text" 3、 设置访问路径 和请求的方式 url=“” ; method=“GET|POST|HEAD|OPTIONS|PUT|TRACE|DELETE” ; 4、 设置请求的数据 如果使用标签 则设置属性 使用new HTTPService() 则使用如图方式 5、 send:执行HTTPService请求 6、添加监听器,如果使用标签 则设置属性 fault=“” result=“” 。 若是new HTTPService() 则使用如图方式 7、接收服务器响应数据
  • 48. 通过RemoteObject与服务器通信使用RemoteObject也可以轻松的实现Flex和服务器端的通信。下面我们介绍一下使用RemoteObject 实现的Flex和Java的通信。 Flex和Java通信,一般来说需要使用LCDS(LiveCycle Data Service),不过这个是收费的,所以就用免费的BlazeDS代替。什么是BlazeDS呢?BlazeDS是一个基于服务器的Java远程调用(remoting)和Web消息传递(messaging)技术,它能够使得后台的Java应用程序和运行在浏览器上的Flex应用程序相互通信。在各大搜索引擎里,关于BlazeDS的中文教程来来去去都是那几篇,而且都是使用Eclipse来开发Flex的(用Eclipse开发Flex跟Java很不错的)。 示例
  • 49. 与浏览器通信很多时候,我们可能发现应用程序需要和加载它的浏览器进行通信。与浏览器的通信能够让你建立一个可以超越 Flex 应用本身的应用程序。你可以连接到已有的地址,通过 JavaScript和其他应用程序通信,并且可以和浏览器的历史记录交互,作为开始。ExternalInterface 类让你能够调用加载 Flash 应用的浏览器,获取页面信息,并且调用 JavaScript 方法,同时也让 JavaScript 方法可以调用Flash 应用程序。 下面简单介绍一下Flex调用JS,和在JS里面调用Flex的AS
  • 50. Flex调用JSFlex的ExternalInterface 类封装了所有你在运行时可能使用到的与 JavaScript 通信的功能。你只需要简单的使用 ExternalInterface.call 方法来执行包含 Flex 应用程序的 HTML 页面里的 JavaScript函数方法。
  • 51. JS调用FlexExternalInterface 类不仅仅封装了运行时与 JavaScript 通信所需的功能,同时也包含了从JavaScript 内调用 ActionScript 方法所有功能。在 JavaScript 调用 ActionScript 方法之前,你需要为开放给 JavaScript 调用的 ActionScript 方法注册一个回调函数。回调函数通过 ActionScript 的 ExternalInterface 类来注册。回调函数为JavaScript 方法提供一个对 ActionScript 方法的映射。
  • 52. Flex常用框架介绍目前比较流行的Flex开发框架有以下几个 1、目前是adobe官方的,也是最早的 也是最早的flex开发框架cariagorm 。 2、 已经成型的PureMVC 3、目前还未正式发布的Guasax 4、目前处于alpha版的Model-Glue 下面简单介绍一下cariagorm 和PureMVC
  • 53. Cairngorm MVC 框架什么是Cairngorm?Cairngorm从根本上来说是将程序代码按照逻辑功能(按照数据、用户视图、以及起控制作用的代码)分块的一种方法论。这个方法论被归纳为MVC,或者说是Model(模型),View(视图),和Control(控制)。
  • 54. Cairngorm的各部分 Model Locator :在一个地方存储程序中所有的值对象(Value Objects,数据)并共享变量。它与HTTP Session对象很相似,不过它存储在Flex客户端,而不是存储在一个中间层程序服务器的服务器端。 View (视图):一个或多个Flex组件(button,panel,combo box,Tile等等)绑定到一起形成的一个特定的个体,使用Model Locator中的数据,并且针对用户的交互动作(点击,鼠标滑过,拖拽等)产生自定义的Cairngorm Events。 Front Controller (前端控制器):接收Cairngorm Events并且将它们映射到Cairngorm Commands。 Command (命令):处理业务逻辑,调用Cairngorm Delegates 和/或 其它的Commands,以及更新Model Locator中存储的值对象和变量。 Delegate (委托):由一个Command创建,它将远程过程调用(HTTP,Web Services等)实例化并且将结果返回给该Command。 Service (服务):定义连接到远程数据库的远程过程调用(HTTP,Web Services等)
  • 55. PureMVC框架PureMVC框架的目标很明确,即把程序分为低耦合的三层:Model、View和Controller。 降低模块间的耦合性,各模块如何结合在一起工作对于创建易扩展,易维护的应用程序是非常重要的。 在PureMVC实现的经典MVC元设计模式中,这三部分由三个单例模式类管理,分别是Model、View和Controller。三者合称为核心层或核心角色。 PureMVC中还有另外一个单例模式类——Façade,Façade提供了与核心层通信的唯一接口,以简化开发复杂度。
  • 56. PureMVC框架PureMVC示意图
  • 57. PureMVC 的各部分Model 与 Proxy Model 保存对 Proxy 对象的引用,Proxy 负责操作数据模型,与远程服务通信存取数据。这样保证了 Model 层的可移植性。 View 与 Mediator View 保存对 Mediator 对象的引用 。由 Mediator 对象来操作具体的视图组件(View Component,例如 Flex 的 DataGrid 组件),包括:添加事件监听器 ,发送或接收notification ,直接改变视图组件的状态。 这样做实现了把视图和控制它的逻辑分离开来。
  • 58. PureMVC 的各部分Controller 与 Comman Controller 保存所有 Command 的映射。Command 类是无状态的,只在需要时才被创建。 Command 可以获取 Proxy 对象并与之交互,发送 Notification,执行其他的 Command。经常用于复杂的或系统范围的操作,如应用程序的“启动”和“关闭”。应用程序的业务逻辑应该在这里实现。 Façade 与 Core Façade 类应用单例模式,它负责初始化核心层(Model ,View 和Controller),并能访问它们的 Public 方法。这样,在实际的应用中,你只需继承 Façade 类创建一个具体的 Façade 类就可以实现整个 MVC 模式,并不需要在代码中导入编写 Model,View 和Controller 类。Proxy、Mediator 和 Command 就可以通过创建的 Façade 类来相互访问通信。
  • 59. PureMVC 的各部分Observer 与 Notification PureMVC 的通信并不采用 Flash 的 EventDispatcher/Event ,因为PureMVC 可能运行在没有 Flash Event 和 EventDispatcher 类的环境中,它的通信是使用观察者模式以一种松耦合的方式来实现的。 你可以不用关心 PureMVC 的 Observer/Notification 机制是怎么实现的,它已经在框架内部实现了。你只需要使用一个非常简单的方法从 Proxy, Mediator, Command 和 Facade 发送 Notification,甚至不需要创建一个Notification 实例。
  • 60. PureMVC 的各部分Notification可以被用来触发Command的执行 Facade 保存了 Command 与 Notification 之间的映射。当 Notification(通知)被发出时,对应的 Command(命令)就会自动地由 Controller 执行。Command 实现复杂的交互,降低 View 和 Model 之间的耦合性。 Mediator发送、声明、接收Notification 当用 View 注册 Mediator 时,Mediator 的 listNotifications 方法会被调用,以数组形式返回该 Mediator 对象所关心的所有 Notification。 之后,当系统其它角色发出同名的 Notification(通知)时,关心这个通知的Mediator 都会调用 handleNotification 方法并将 Notification 以参数传递到 方法。
  • 61. PureMVC 的各部分Proxy发送,但不接收Notification 在很多场合下 Proxy 需要发送 Notification(通知),比如:Proxy 从远程服务接收到数据时,发送 Notification 告诉系统;或当 Proxy 的数据被更新时,发送 Notification 告诉系统。 如果让 Proxy 也侦听 Notification(通知)会导致它和 View(视图)层、Controller(控制)层的耦合度太高。 View 和 Controller 必须监听 Proxy 发送的 Notification,因为它们的职责是通过可视化的界面使用户能与 Proxy 持有的数据交互。不过对 View 层和 Controller 层的改变不应该影响到 Model 层。 例如,一个后台管理程序和一个面向用户程序可能共用一个 Model 类。如果只是用例不同,那么 View/Controller 通过传递不同的参数就可以共用相同的Model 类。
  • 62. Thanks !!