• 1. Flex技术 介绍
  • 2. 摘要Flex像什么 Flex开发流程 关键点 组件的生命周期 面向对象的设计方法 Flex绘图 范例 注意事项
  • 3. Flex示例在线Photoshop http://www.sumopaint.com/app/ Google财经 http://www.google.cn/finance?client=ob&q=SHA:000001 虚拟加油站模拟监控 http://www.effectivesoft.com/flexdemo/ 震撼的3D Flex http://www.papervision3d.org/
  • 4. Flex像什么MXML像 HTML:
  • 5. Flex开发流程1.使用一系统预定义组件(窗口,按钮等)来定义一个开发界面。 2.组织安排组件,现在用户自定义的界面设计。 3.使用风格和主题来定义可见设计。 4.增加动态动作,如应用程序之间的互动。 5.定义并在需要时连接上一个数据服务。 6.从源代码生成一个在Flash播放器中运行的SWF文件。
  • 6. 关键点Controls – 控件 Containers – 容器 Effects – 效果 Events – 事件 States – 状态 Charts – 图表 Styles – 样式 Skins – 皮肤
  • 7. 关键点 – 基类UIComponent UIComponent 类是所有可视组件(交互式和非交互式)的基类。 交互式组件可以参与 Tab 切换和其它几种键盘焦点处理,接受低级事件(如键盘和鼠标输入),还可以被禁用,以便该组件不能收到键盘和鼠标输入。这与非交互式组件(如 Label 和 ProgressBar)相反,非交互式组件只显示内容且不能由用户操作。 UIComponent 类不作为 MXML 标签使用,而作为其它类的基类使用。 如:Button、Label、DataGrid、Panel、Chart等
  • 8. 关键点 – 基类Container Container 类是组件的抽象基类,用于控制子组件的布局特征。您没有在应用程序中创建 Container 实例,而是创建 Container 子类之一的实例,如 Canvas 或 HBox。 Container 类包含用于滚动、剪裁和动态实例化的逻辑。它包含用于添加和删除子项的方法。它还包含 getChildAt() 方法和用于绘制容器背景和边框的逻辑。 如:Panel、Canvas、Grid等
  • 9. 组件的生命周期 Flex 生命周期的驱动力是 LayoutManager。看看节选自这个 Flex API 的描述:“LayoutManager 是 Flex 的度量和布局战略背后的引擎。布局通过 3 个阶段完成:提交、度量和布局。” 具体内容参见《创建Flex组件》
  • 10. 面向对象的设计方法 实际上,面向对象的编程包含两个部分。一部分是程序设计策略和技巧(通常称为“面向对象的设计”)。这是一个很广泛的主题,具体不对其进行讨论。OOP 的另一部分是在给定编程语言中提供的实际编程结构,以便使用面向对象的方法来构建程序。以下是OOP中的常见任务: ■ 定义类 ■ 创建属性、方法以及 get 和 set 存取器(存取器方法) ■ 控制对类、属性、方法和存取器的访问 ■ 创建静态属性和方法 ■ 创建与枚举类似的结构 ■ 定义和使用接口 ■ 处理继承(包括覆盖类元素)
  • 11. Flex绘图 绘图 API 是 ActionScript 中的一项内置功能的名称,您可以使用该功能来创建矢量图形(直线、曲线、形状、填充和渐变),并使用 ActionScript 在屏幕上显示它们。flash.display.Graphics 类提供了这一功能。您可以在任何 Shape、Sprite 或 MovieClip 实例中使用 ActionScript 进行绘制(使用其中的每个类中定义的 graphics 属性)。(实际上,每个类的 graphics 属性都是 Graphics 类的实例。) 常见任务: ■ 定义线条样式和填充样式以绘制形状 ■ 绘制直线和曲线 ■ 使用方法来绘制形状(如圆、椭圆和矩形) ■ 使用渐变线条和填充进行绘制 ■ 定义矩阵以创建渐变 ■ 将三角函数与绘图 API 配合使用 ■ 将绘图 API 与动画相结合
  • 12. Flex范例
  • 13. Flex范例应用皮肤的按钮应用皮肤的面板
  • 14. 注意事项a1. 事情经常是“异步”发生的 什么是“异步”?恩,就是说当你执行了一行代码,你不能假设这行代码会立刻起到实际的作用。Flex是一个充满着异步机制的框架。这不仅仅意味着你在使用WebService这样的组件时是异步的,甚至连为DataGrid这样的控件设置DataProvider也是异步的。 2. 分清Flex组件的属性和样式 Flex组件既有属性,也有样式。你需要了解这两者的区别。因为在ActionScript中设置组件和样式的方法是不同的。 3. CSS的样式和HTML不完全一样 虽然标准CSS使用连字符(例如text-font)格式来定义样式名称,但是Flex使用驼峰式的命名格式(例如textFont)。一个显而易见的原因是连字符不能出现在XML的属性中,所以你不能用这样的名字作为MXML标签的属性。 当然,如果你把样式定义在外部的CSS文件中或者Style标签中,你也可以使用连字符格式的样式名。另外,Flex定义了很多HTML中不存在的CSS样式。
  • 15. 注意事项b4. MXML和ActionScript其实是一回事,就算他们看起来很不一样 所有的MXML标签最终会被Flex编译器转化为ActionScript对象。你也可以在MXML中使用ActionScript。当你创建一个组件时,你可以选择使用ActionScript还是MXML。 5. Flex的代码隐藏(Code-behind)模式 MXML和ActionScript虽然通用,但是实际上有各自的职责,一般来说,MXML负责描述界面,而ActionScript用来完成功能。而代码隐藏是指MXML和ActionScript应该解耦,这样设计师可以直接修改MXML而不用接触代码,程序员则可以更好的组织和重用功能。
  • 16. Any Question?