LimboNova

《Flex3权威指南》学习笔记 03

Posted on Jul 6, 2011

Lesson 16：自定义Flex应用程序的外观

  • 样式和皮肤；

  • 使用标签属性设置样式：如 color，disabledColor，fontSize，fontStyle，fontWeight，fontFamily … ; 也可使用 ActionScript 设置：mybButton.setStyle(“color”,”#00FF00”);

  • 样式继承： ASDoc中，每个样式有个 “CSS继承”(CSS Inheritance) 的属性。表示该样式是否可以从其父容器出继承；

  • <mx:Style> 设置样式约定：

    • 样式名小写，单词之间使用连字符隔开：background-color: #FFFFFF;
    • 也可使用大小写混合的方式： backgroundColor: #00FF00;

  • 类选择符：将一组样式属性定义为一个样式类。 .CustomCombo { color: #00FF00; selectedColor: #EA800C; } 组件可使用 styleName 调用：

      <mx:ComboBox styleName=”customCombo”/>

  • 类型选择符 ComboBox { color: #FF0000; selectedColor: #EA800C; } 这样设置，将影响所有叫 “ComboBox”类的样式；

  • 使用 Flash Builder 编写 CSS，只要打开CSS文件编辑即可；

  • 使用CSS文件设置样式，将文件编译到应用程序中，就必须重新编译应用程序；

    • 运行时修改CSS：无须重新编译和部署应用程序。
    • 可以从CSS文件创建SWF；

  • 用 StyleManager加载 CSS的SWF StyleManager.loadStyleDeclaration(“flexGrocer.swf”); //加载 StyleManager.unloadStyleDeclaration(“flexGrocer.swf”);//卸载

  • 多个样式的加载规则：若某个样式在多个样式表中定义，那么程序将使用最后被加载的样式；

  • 皮肤组件：图形皮肤

    • MXML标签中设置： <mx:button upskin="@Embed(’/assets/up.jpg’)" />
    • 在CSS块(或文件)中设置皮肤： Button { overSkin: Embed("/assets/over_skin.gif"); }
    • 使用ActionScript 设置皮肤： [Embed("/assets/down.gif")] var ds:Class; private function initApp():void { myButton.setStyle(“downSkin”,ds); }

  • 导入皮肤：可通过Flash Builder导入在 Adobe CS5中创建的皮肤；

  • 皮肤组件：可编程的皮肤：使用 Flash Player 的API绘制皮肤，可以获得更多的控制力和更好的灵活性。 皮肤类：

    • ProgrammaticSkin：轻量级的皮肤基类；
    • Border：添加对 BorderMetrics 边框支持；
    • RectBorder： 添加对backgroundImage支持；

  • 主要工作：重写 updateDisplayList();

  • 重写 updateDisplayList 的主要步骤：

    1. 创建皮肤类，选择合适基类继承；
    2. override updateDisplayList():
      • 样式处理
      • graphics.clear() ; //清楚之前绘制的元素
      • graphics.beginFill(); // 设置背景色
      • graphics.draw(); //绘制元素
      • graphics.endFill(); //完成填充
      • 完成皮肤类
    3. 在 CSS的SWF文件中创建自定义样式，使用 ClassReference()指令指定皮肤： .mySkin { upSkin: ClassReference(‘skins.yourSkinClass’); }
    4. 在MXML标签或其它方式下，指定控件的样式为CSS中自定义的样式
    5. 保存，测试，运行……

Lesson 17：使用Web服务

  • 服务器通信名词
    • RPC：Remote Procedure Calls
    • CORBA：Common Object Request Broker Architecture
    • RMI：Remote Method Invocation (java)
    • AMF：Action Message Format (Flash)
  • WebService 三种使用方式：
    • 完整声明：使用 operation.request标签定义操作及参数；
    • 声明方法：只用 operation 标签，不定义参数，使用 wsdl 自行验证参数；
    • 不声明方法：查找 wsdl 自行验证方法和参数；
  • 可使用 WebService Introspection 向导导入根wsdl在web服务端的接口，实现自动生成代码；

Lesson 18：访问服务器端对象

  • RemoteObject 与 WebService的区别：
    • RemoteObject ：AMFWebService：基于XML的SOAP
    • RemoteObject需要一个配置文件来确定远程服务的位置；
    • 可用RemoteObject将已定义的类映射到服务器上相同定义的类；
  • RemoteObject配置文件
    • 技术适配器(adapters)：设置采用何种技术，id，class……
    • 通道：chanel-definition
    • 目的地句柄：destination
  • 更新Flex编译命令services_config.xml ：如果最终server位于不同开发环境，最好创建单独的配置文件。

Lesson 19：第19课 可视化数据

  • 二维图：条状，柱状，饼状……
  • Flex3 图标特性：
    • 能够在图表与其他组件之间拖放数据；
    • 填充颜色的灵活性高；
    • 改进项目标签和数轴呈现器，可在自定义图表中使用更多的控制。
  • 图表类型：
    • Area
    • Bar
    • Bubble
    • CandleStick
    • Column
    • HighLowOpenClose
    • Line
    • Plot
  • 定义格式
  • 添加图例
  • 添加图表交互
  • 鼠标经过事件
  • 单击事件
  • 选中事件
  • 添加动画
  • SeriesInterpolate
  • SeriesSlide
  • SeriesZoom

Lesson 20：第20课 创建模块化的程序

  • Flex3模块化程序，可以在运行时加载/卸载模块；
  • RSL(Runtime Shared Libraries) 运行时加载库，使用RSL可以减少多个程序的总大小而不是单个程序(*.swf)的大小；
  • Flash 程序编译流程：MXML，AS源代码 —- flex编译器 —-> 字节码 —- 链接器(link) —-> 可执行文件(swf)
  • 使用Flex框架RSL方法：Flash Buidler 菜单 —> 工程 —> Flex Build Path —> “Library Path”标签 —> “Framework linkage”选择“RSL”
  • 创建库项目