3ti-Flex技术培训-FLex基础

page1 page1 3ti技术培训资料 3tiSolutions Flex基础 page2 page2 MXML语言FirstApplication Flex基础篇 第一部分 page3 page3 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 第二部分 page4 page4 MXML语言FirstApplication Flex基础篇 page5 page5 Adobe是把Flex作为一个ActionScript类库实现的 这个类库包含了组件 容器和控件 manager类 数据服务类 以及具有其他特性的类 可以通过使用带有类库的MXML和ActionScript语言来开发应用程序 MXML是一种可以在Adobe Flex 中定义和描述用户界面组件的XML语言 用户可以使用MXML声明来定义程序中的非可视化组件 比如对服务器端数据源的访问以及用户界面组件和数据源之间的数据绑定 MXML语言 page6 page6 第一个可视化组件mx 命名空间 MXML语言 page7 page7 编译与运行编辑器 notepad FlexBuilder3文件名 MyFirst mxmlSDK Flex运行环境Flex编译器 mxmlc exe 存放在 FlexSDK HOME 3 0 0 bin设置 FlexSDK HOME 3 0 0 bin到系统变量Path中mxmlc strict true file specsMyFirst mxml strict选项设为true来强制编译器执行strict模式 编译器对代码有更严格的检查 比如 检查是否为变量定义了类型 file specs用来定义需要编译的MXML文件编译结果 MyFirst swf查看工具 AdobeFlashPlayer9 MXML语言 page8 page8 MXML语言 page9 page9 提示 AdobeFlexBuilder3是一个含有一个可视化设计视图的开发Flex的集成开发环境 IDE MXML语言 page10 page10 MXML标签与ActionScript类或者类中的属性是相对应的 当编译Flex应用程序的时候 Flex编译器会解析MXML标签并且生成相应的ActionScript类 然后这些ActionScript类会被编译成SWF字节码存储到一个SWF文件中 生成ActionScript中间文件mxmlc strict true keep generated actionscript file specsMyFirst mxmlmx中的mx前缀是一个命名空间 它是通过在Application标签中使用一个独一无二的URL来声明的 mx前缀把在mx命名空间中的每个组件映射到它的完全限定类名 从而Flex编译器可以在找到与mx命名空间中的MXML标签相对应的ActionScript类 MXML语言 page11 page11 使用ActionScript来创建一个Button控件 MXML语言 page12 page12 提示 基于标签的 而且具有声明式语法的MXML是极大的方便了组件的展现和布局 MXML语言 page13 page13 MXML语言FirstApplication Flex基础篇 page14 page14 XML声明MXML文件就是一个普通的XML文件标签定义了Application容器 是每一个Flex应用程序的根标签 标签定义了一个面板容器 包含有一个标题栏 一个标题 一个状态信息 一个边框 以及用来放置子容器或空间的内容区域 title 标题 属性的值被设定为 MyApplication 标签定义了一个Label控件 简单的显示文本的用户界面组件 它的text属性被设定为 Hello World 标签的fontWeight和fontSize属性改变了字体的样式 也可以使用CSS给组件加上样式 FirstApplication page15 page15 代码示例 FirstApplication page16 page16 FirstApplication page17 page17 基础控件容器与布局组件事件主题样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page18 page18 在Adobe Flex 模型 视图设计模式中 视图是由用户界面组件展现的 MXML语言支持两种类型的用户界面组件 控件 control 和容器 container 容器是屏幕上包含控件或者其他容器的矩形区域 控件是表单元件 比如按钮 文本域 以及列表框 基础控件 page19 page19 说明用来显示文本并 或接收用户的文本输入 text 基于属性 用来设置要显示的文本 常用类型LabelTextTextAreaTextInputRichTextEditor 基础控件 基于文本的控件 page20 page20 基础控件 基于文本的控件 page21 page21 基础控件 基于文本的控件 page22 page22 基础控件 基于文本的控件 page23 page23 说明用来接受用户的界面操作 产生事件 常用类型ButtonLinkButtonCheckBoxRadioButtonPopupButton 基础控件 基于按钮的控件 page24 page24 Button控件经常被使用的矩形按钮 文本标签 图标 两者都有普通Button控件在鼠标按在它上面的时候会一直处在被按下的状态 开关Button控件在被点击之后处于被按下的状态 直到再次被点击 鼠标点击会触发一个click事件和一个buttonDown事件LinkButton控件支持图标的单行超文本链接没有边框的Button控件打开一个URL 基础控件 基于按钮的控件 page25 page25 CheckBox控件选中标记 未选中标记值不相互排斥一个文本标签作为标签显示RadioButton控件选中标记 未选中标记值相互排斥同一groupName的两个或两个以上RadioButton控件组成PopUpButton控件常用用法是使弹出按钮弹出一个列表框或者一个Menu控件来改变主按钮的功能或者标签 基础控件 基于按钮的控件 page26 page26 基础控件 基于按钮的控件 page27 page27 基础控件 基于按钮的控件 page28 page28 说明用来一组数据 以列表形式展现ListBase 基于类控件从数据提供器 dataprovider 来获得数据常用类型ComboBox List HorizontalList DataGrid TileMenu数据提供器定义一个Array或者Collection作为该控件的子标签在MXML中内联地定义数据提供器 对静态数据和创建原型来说很适用 将列表控件通过数据绑定的形式和ActionScript创建好的Array或者Collection建立关联 用来显示从服务器端获取的数据和绑定 基础控件 基于列表的控件 page29 page29 Bindable privatevarsubscriptions ArrayCollection newArrayCollection data 0 label Print data 1 label Website data 2 label RSS text data 3 label Podcast 基础控件 基于列表的控件 page30 page30 基础控件 基于列表的控件 page31 page31 基础控件容器与布局组件事件主题样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page32 page32 Flex容器是Adobe Flash Player的绘图表面的一个矩形区域 在容器内 可以定义希望出现在容器内的组件 包括控件和容器 在容器内定义的组件称为容器的子级 AdobeFlex提供范围广泛的容器 包括简单的框 面板 表单以及在子容器之间的导航组件 如折叠式导航器或选项卡式导航器 Container类是所有Flex容器类的基本类 扩展Container类的容器添加它们自己的功能以进行子组件布局 容器与布局 page33 page33 常见布局容器Hbox 其内的每一个控件或容器只能按照水平的顺序排列Vbox 其内的每一个控件或容器只能按照垂直的顺序排列Panel 是一个具有标题和边框等的容器 常常用来容纳其他的容器HDividedBox 对子组件进行水平布局 除了在子级之间插入一个可调整的分割线之外 它与HBox容器很相似VDividedBox容器对子组件进行垂直布局 而且也在子级之间插入一个可调整的分割线Tile 以多行或多列的形式排列其子级Form 以标准的表单格式排列其子级ApplicationControlBar 容纳提供全局导航和应用程序命令的组件 并可以停靠在Application容器的上边缘ControlBar 将控件置于Panel或TitleWindow容器的下边缘 容器与布局 page34 page34 容器与布局 page35 page35 容器与布局 page36 page36 常见导航容器Accordion 定义一个子面板序列 但一次仅显示一个面板 若要导航容器 用户会单击与他们需要访问的子面板相对应的导航按钮 使用Accordion容器 用户可以按任何顺序访问子面板以在表单中前后移动 TabNavigator 创建和管理一组选项卡 使用它们可在其子级中间导航 其子级是其他容器 TabNavigator容器为每个子级创建一个选项卡 当用户选中某个选项卡时 TabNavigator容器会显示相关联的子级 ViewStack 由彼此堆叠在一起的子容器的一个集合组成 一次只有一个容器是可见的或活动的 ViewStack容器不为用户定义切换当前活动容器的内置机制 您必须使用LinkBar TabBar ButtonBar或ToggleButtonBar控件或自己在ActionScript中构建逻辑让用户来更改当前活动的子级 容器与布局 page37 page37 Flex容器用来自动定位其中的定义的所有的子组件 如果使用Canvas容器 或者layout属性被设定 absolute 的Application或Panel容器 可以为它们的子组件进行绝对定位 或者使用基于约束的布局 三种方法来定位组件使用自动定位使用绝对定位使用基于约束的布局 容器与布局 page38 page38 多数容器按照该容器的布局规则自动定位它的子组件布局方向 容器的补白 padding 容器中子组件之间的间隔自动定位的容器 直接设定子组件的x属性或y属性 无效调用move 方法 无效设定layout属性 有效 horizontal vertical 和 absolute horzontalAlign 有效 left center 或者 right verticalAlign 有效 top middle 或者 bottom 容器与布局 自动定位 page39 page39 容器与布局 自动定位 page40 page40 容器与布局 自动定位 page41 page41 三种容器Application容器 layout属性为 absolute Panel容器 layout属性为 absolute Canvas容器绝对定位的容器通过子组件的X属性和Y属性设定控件的位置 通过约束的布局来设定子控件的位置 子控件缺省坐标为绝对定位容器内的 0 0 坐标 容器与布局 绝对定位 page42 page42 容器与布局 绝对定位 page43 page43 容器与布局 绝对定位 page44 page44 锚定侧边以相对于其所在容器的相应边缘的偏移量 以像素为单位 来锚定一个组件的一个或多个边缘 当容器改变大小的时候锚定的子组件的边缘同该容器的边缘会一直保持同样的距离 样式属性top bottom left 和right以像素为单位定义了该组件的边缘同相应容器边缘的距离 锚定中心以相对于其所在容器中心的像素偏移量来锚定一个子组件的水平或者垂直中心 或者两者都锚定 如果使用了基于百分比的大小设定 否则该组件不会改变原本设定的大小 样式属性horizontalCenter和verticalCenter定义了在指定方向上 水平或垂直 组件中心与其所在容器中心的距离 负数值会使组件相对于中心偏左或者偏上 容器与布局 基于约束的布局 page45 page45 锚定边缘 容器与布局 基于约束的布局 page46 page46 拉伸组件 容器与布局 基于约束的布局 page47 page47 锚定组件中心 容器与布局 基于约束的布局 page48 page48 综合布局 容器与布局 基于约束的布局 page49 page49 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page50 page50 什么是事件用户与界面组件交互 如鼠标单击按钮等组件的外观或者生命周期发生重要改变 如大小改变 组件创建 销毁等用户没有直接与应用交互也可能产生事件 比如 数据装载完毕等Flex 以事件为驱动接收事件通知 在MXML中注册事件处理器在MXML中创建内联 inline 的事件处理器通过ActionScript注册事件处理器 组件事件 page51 page51 Click事件处理器Button Label Pannel 组件事件 page52 page52 组件事件 page53 page53 组件事件 page54 page54 创建内联 inline 的事件处理器速率较快 代码较少影响代码的易读性 可维护性和可扩展性 组件事件 page55 page55 组件事件 page56 page56 addEventListener 事件类型 处理方法名 组件通过调用addEventListener 方法来注册事件监听器事件类型 MouseEvent CLICK 处理方法名 clickHandlercreationComplete 程序开始运行的时候 在Application的外观和它的子组件初始化完毕之后 Application的creationComplete事件就会发生 组件事件 page57 page57 组件事件 page58 page58 组件事件 page59 page59 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page60 page60 说明改变单个组件的外观改变所有组件的外观实现方式使用本地样式定义使用外部样式表使用内联样式使用setStyle 方法 样式 page61 page61 CSS CascadingStyleSheets 级联样式表 Flex中并非所有的组件可视化属性都支持CSS 像UIComponent类的x y width和height这种属性并不是样式属性 当然也不能在CSS中设定 一个主题是定义了Flex程序外观的一个样式集 一个主题可以定义比如程序的颜色设计或通用字体这样简单的东西 也可以将程序中所用到的组件的皮肤全部重写 主题通常是一个SWC文件 但是 主体也可以是一个嵌入了图形资源 比如SWF文件中的元件 的CSS文件 样式 page62 page62 标签符合CSS2 0语法样式表定义作用到当前文档以及当前文档的所有子文档 样式 使用本地样式定义 page63 page63 solidBorder border style solid solidBorderPaddedVertically padding top 12 padding bottom 12 border style solid 样式 使用本地样式定义 page64 page64 样式 使用本地样式定义 page65 page65 themeExternal css solidBorder borderStyle solid solidBorderPaddedVertically borderStyle solid paddingTop 12px paddingBottom 12px 样式 使用外部样式表 page66 page66 样式 使用外部样式表 page67 page67 样式 使用外部样式表 page68 page68 优先级内联样式定义在组件特有的属性上 其优先级比其它方式的样式定义的优先级都高 除setStyle 方法之外 例如 通过使用标签的paddingTop和paddingBottom属性 设定一个Box容器的边框和内容之间的补白 padding 使用borderStyle属性来定义一个组件边框的外观 样式 使用内联样式 page69 page69 样式 使用内联样式 page70 page70 样式 使用内联样式 page71 page71 说明优先级最高粒度更细最动态代码量最高 不易维护setStyle 两个参数 样式名称和样式的值 样式 使用setStyle 方法 page72 page72 样式 使用setStyle 方法 page73 page73 样式 使用setStyle 方法 page74 page74 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page75 page75 添加皮肤就是通过修改或替换组件的可视化元素来更改组件外观的过程 这些可视化元素可能是图像 SWF文件 或者一个包含了DrawingAPI方法的类 皮肤定义了组件在各种状态下的的全部或者部分外观 例如 一个Button空间有多个皮肤 每一个皮肤都表现了Button的一个状态 使用downSkin upSkin 以及overSkin样式属性定义的皮肤表现了当一个Button被按下 释放和当鼠标放在它上面时的外观 定义方式使用样式和主题来定义使用图形的方式添加皮肤使用编码的方式添加皮肤 皮肤 page76 page76 说明在Flex程序中嵌入图像文件 但是如果调整组件的大小图像可能会变形用可视化工具来创建组件皮肤而不需要了解ActionScript最终生成的SWF文件中嵌入外部的图像或者SWF文件 可能会占用更多的空间需要将每个皮肤看作一个类 例如 设定了一个Button控件的upSkin属性的值为 myimage jpg 实际上是将对当前皮肤类的引用更改成了对这个新类的引用 皮肤 使用图形的方式添加皮肤 page77 page77 Button upSkin Embed assets box closed png overSkin Embed assets box png downSkin Embed assets box new png 皮肤 使用图形的方式添加皮肤 page78 page78 皮肤 使用图形的方式添加皮肤 page79 page79 scale 9嵌入图像作为皮肤的一个缺点就是 如果调整组件的大小图像可能会变形 可以使用一种叫做scale 9的技术来创建皮肤 当组件大小改变的时候皮肤也不会变形 使用scale 9特性 图像的四个角的比例不会缩放 水平边框的只是在水平方向进行比例缩放而垂直边框只是在竖直方向进行比例缩放 scale 9栅格属性scaleGridTopscaleGridBottomscaleGridLeftscaleGridRight 皮肤 使用图形的方式添加皮肤 page80 page80 说明使用ActionScript代码来绘制编码式皮肤控制更多样式和图形作不到的效果 Button控件边角的弯曲度对程序开发者要求更高而和UI设计者无关效果佳 效率低 皮肤 使用编码的方式添加皮肤 page81 page81 com threeti demo CustomBorder皮肤扩展自RectangularBorder基础类 ProgrammaticSkin的子类 集成drawRoundRect 方法varcornerRadius Number getStyle cornerRadius varbackgroundColor int getStyle backgroundColor varbackgroundAlpha Number getStyle backgroundAlpha graphics clear 重画背景drawRoundRect 0 0 unscaledWidth unscaledHeight tl 0 tr cornerRadius bl cornerRadius br 0 backgroundColor backgroundAlpha 阴影if dropShadow dropShadow newRectangularDropShadow 皮肤 使用编码的方式添加皮肤 page82 page82 皮肤 使用编码的方式添加皮肤 page83 page83 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page84 page84 视图状态可以使程序的内容和外观多样化 尤其是在响应用户动作的时候 当视图状态发生改变的时候 Flex将会同时执行对程序所做的所有可视更改 由于所有对视图状态的更改是同时发生的 在用户看来程序是从一个状态突然跳跃到了另一个状态 状态更改是在一段时间内发生的 从一个状态到另一个状态的平滑的可视变动 称之为过渡 Transition 过渡就负责定义视图状态的改变 使之看起来像在屏幕上一步步发生的一样 一个过渡就是当视图状态发生改变的时候播放的一种或组合到一起的多种效果 过渡并不是要取代效果 可以将某个效果应用到一个组件上 然后使用一个效果触发器或者playEffect 方法来调用它 使用标签来创建一个过渡并使用该标签的fromState toState和effect属性来自定义过渡 fromState定义了过渡的起始视图状态 toState属性则定义了过渡要到达的视图状态 而effect属性则指向要播放的Effect对象 也可以使用和标签来使一些效果同时播放或者顺序播放 状态 page85 page85 缺省窗口 状态 page86 page86 状态改变 状态 page87 page87 过渡效果 状态 page88 page88 状态 page89 page89 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page90 page90 效果 effect 一小段时间内组件发生的一些改变 包括淡入淡出 大小改变 以及移动等可以将效果作为控件或容器的属性来应用 Flex提供了一系列具有默认属性的内置效果行为 behavior 一个效果 唯一的ID 和一个触发事件可以向程序中添加动画 移动 以及声音来响应一些用户或者程序的动作 效果 page91 page91 效果的方法pause resume end 效果的事件startEffect事件endEffect事件 效果 page92 page92 效果 page93 page93 效果 page94 page94 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page95 page95 提示 Flex提示为用户提供有帮助的信息 当用户将鼠标移动到图形化组件的上方时 包含文本信息的工具提示就会弹出 使用工具提示来引导用户使用程序或者自定义它们来提供其它的功能 每一个继承自UIComponent类 UIComponent类实现了IToolTipManagerClient接口 Flex所有可视化组件都支持toolTip属性 设定tooltip属性的值为一个字符串 当鼠标移动到该组件上方的时候这个字符串就会出现 page96 page96 换行符ActionScript n转义符MXML 工具提示文本和文本提示框的外观样式用级联样式表 CSS mx styles StyleManager 提示 page97 page97 ToolTip fontFamily Arial fontSize 19 fontStyle italic color FFFFFF backgroundColor 33CC99 提示 page98 page98 提示 page99 page99 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page100 page100 光标 Flex光标管理器可以控制光标的形状 例如 如果程序在处理请求的时候需要用户一直等待到处理结束 可以更改光标的图像 比如改成一个沙漏 这样就可以暗示用户需要等待 也可以通过更改光标来为用户提供反馈 告诉用户可以执行哪些动作 例如 可以使用一个光标图像来暗示用户可以输入 使用另外一个来暗示输入已经被禁用了 CursorManager类管理着一个带有优先级的光标列表 具有最高优先级的光标就是当前显示的光标 如果光标列表中有多个具有同样优先级的光标 光标管理器会显示最近创建的那个 缺省的忙碌光标缺省的忙碌光标图像是一个动画时钟使用CursorManager类中的方法设定或者移除忙碌光标 使用SWFLoader WebService HttpService以及RemoteObject类中的showBusyCursor属性来动态显示忙碌光标 page101 page101 缺省的忙碌光标缺省的忙碌光标图像是一个动画时钟使用CursorManager类中的方法设定或者移除忙碌光标 使用SWFLoader WebService HttpService以及RemoteObject类中的showBusyCursor属性来动态显示忙碌光标 光标 page102 page102 光标 page103 page103 忙碌的光标 光标 page104 page104 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page105 page105 渲染 条目渲染器 Flex中有几个控件可以用来显示条目列表 这些控件可以显示滚动条目列表并从中选择一个或多个条目 所有Flex列表组件都继承自ListBase类 它们是 DataGrid HorizontalList List Menu TileList和Tree 一个列表控件从一个数据提供者 dataprovider 那里获取数据 数据提供者就是一个对象的集合 数据提供者可以看作是一个模型 model 而Flex组件就是模型的视图 view 通过将模型和视图分离 可以在修改模型或视图的时候不必修改另外一个 每个列表控件都有一个缺省的机制来控制数据或者视图的显示 可以覆写这个缺省机制 如果不想使用缺省的机制 就需要创建一个条目渲染器 创建和使用条目渲染器使用缺省的条目渲染器使用drop in条目渲染器创建内联条目渲染器创建可重用的内联条目渲染器使用自定义组件作为条目渲染器 page106 page106 使用drop in条目渲染器组件必须实现IDropInListItemRenderer接口已实现了IDropInListItemRenderer接口的Flex组件 CheckBoxDateFieldImageLabelNumericStepperTextTextAreaTextInput 渲染 条目渲染器 page107 page107 渲染 条目渲染器 page108 page108 TheWallartwork1 jpg2505BlueFlakeartwork2 jpg4002Butterflyartwork3 jpg37517 渲染 条目渲染器 page109 page109 渲染 条目渲染器 page110 page110 基础控件容器与布局组件事件样式皮肤状态 效果提示光标渲染拖放弹出窗口 Flex基础篇 page111 page111 拖放 Flex应用程序中 拖放行为是指实现从一个组件到另一个组件移动数据 或者移动一个组件 这体现了RIA程序独特的优点 通过该行为 在可视的应用程序中 用户可以在数据列表之间拖放数据 在容器之间拖放控件 在容器之间拖放组件 来进行重新布局 通常可视化的开发环境允许编程者使用鼠标选择某个对象 并且在屏幕上进行拖动 Flex的拖放行为可以选择一个对象 如一条在数据列表中的选择 或者是一个容器中的图像控件 并拖放它们放入到另一个容器中 在Flex中 可以在使用的组件上实现拖放 有一些控件例如列表 树结构和数据列表 这些列表类组件 已经自动实现了拖放 可以直接使用 拖放操作的基本要求必须是可拖放的控件源控件dragEnabled true目标控件dropEnabled true源控件和目标控件的数据源必须是相符合 page112 page112 已定义拖放操作的控件控件列表数据列表 DataGrid 水平列表 HorizontalList 列表 List 打印数据列表 PrintDataGrid 排列列表 TileList 树结构 Tree 定义组件中的属性dragEnableddragMoveEnabled 除了树结构控件 所有的列表类默认值都为false dropEnabled 拖放 page113 page113 拖放操作的过程开始阶段用户通过使用鼠标选中一个组件或组件中的元素 然后按住鼠标移动组件或元素移动 来发起一个拖放操作 例如 用户用鼠标选择一个List控件的元素 然后按住鼠标左键移动几个像素 这个被选择的组件就叫做 拖动开始点 draginitiator 拖动阶段当按住鼠标按键 用户在Flex应用程序中移动鼠标 Flex显示一个表示正在拖放的图片 这个图片代表拖放对象 就叫做 拖动代理 DragSource对象包含被拖动的对象 放下阶段当一个用户移动 拖动代理 划过一个Flex组件的时候 这个组件就有可能变成 放下目标 放下目标 可以检查 拖动源 然后决定这个数据是否是一个 放下目标 droptarget 可以接受的格式 如果是 则允许用户把数据放到它的上边 如果不是 那么就不允许放到它上边 拖放 page114 page114 放下目标时的事件dragEnter事件该事件在带有 拖动代理 dragproxy 鼠标从外部进入 放下目标 的时候分发 一个组件要作为 放下目标 必须定义这个事件监听器 dragExit事件该事件在用户鼠标没有在 放下目标 上放下 而是移除鼠标的时候分发 如果在dragEnter或其他事件中修改了 放下目标 的外观 可以在这个事件中恢复到正常的外观 dragDrop事件该事件在用户在 放下目标 上放开鼠标的时候分发 可以使用这个事件监听器向 放下目标 中增加drag的数据 拖放操作的功能通过拖放操作复制元素通过拖放操作移动元素双向拖放功能手工添加的拖放功能 拖放 page115 page115 拖放 page116 page116 拖放 page117 page117 拖放 page118 page118 自定义拖privatefunctiondragIt event MouseEvent value uint void 获得事件的目标对象 源对象 定义拖动开始点 vardragInitiator Image event currentTargetasImage 创建拖拽源对象 vardragSource DragSource newDragSource 在拖拽源对象内添业务加数据dragSource addData value value 创建拖拽代理对象vardragProxy Image newImage dragProxy source event currentTarget so