加载中…
个人资料
夜雨盛唱
夜雨盛唱
  • 博客等级:
  • 博客积分:0
  • 博客访问:41,513
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

[转载]AIR/Flex学习笔记(6)

(2011-11-18 14:11:01)
标签:

转载

分类: 科技
Flex, 万恶的

    上一篇关于自定义AIR窗口外观的内容,其实是Flex4 spark架构新支持的核心功能,我们有必要来好好学习一下spark相关的概念和知识,充分发挥FLex4带给我们的便利。

    Flex4相对于之前的版本有很大改变,比如Catalyst工具支持等,但是核心还是spark。(关于Flex4的更新总结,可以参考这篇文章:Flex 4的十大变化。)

    1、spark到底是什么

    spark是Flex4推出的概念,它是Flex4提供的一套新的组件库,同时spark也代表Flex4新支持的组件外观设计架构。当初Adobe希望为外观设计人员支持一种直接将组件设计转换为MXML代码的工具(就是Flash Catalyst),这个想法的实现要求Flex组件库必须要实现组件的功能逻辑与外观布局的分离,于是spark顺势而生。spark将组件外观部分的开发从组件实现结构中剥离,使开发人员自定义组件外观时,不用再去考虑那么复杂的组件逻辑,这就是整个spark架构的原则和核心思想。

    2、spark架构

    根据spark架构的原则,spark组件被设计为包括两个部分:MXML代码实现的外观类 + ActionScript代码实现的组件类。正如我们上篇文章中的代码所展示的,外观类只关注组件可视化部分的皮肤和布局,组件类关注组件的功能逻辑。如果想自定义组件的外观,只需要重写MXML类,并指定组件的skinClass属性即可。那么表示同一个组件的这两个类怎样合作呢?spark架构设计了一套“skinning contact”,即外观合同,来定义他们之间的交互合作规范,形成了一套完整的架构。关于外观合同,后面再详细讲。

    3、spark与mx组件库的关系

    Flex4之前的组件集称为MX(Halo),而且spark和mx是可以在一起应用的,因为spark组件全部扩展自mx组件相同的基类:mx.core.UIComponent,在Flex程序中,只要引用了对应的组件空间,就可以将spark和mx结合应用了。需要注意的是,spark组件的一些特性如状态切换、动态布局等是不能用于mx的。

    4、spark支持的新功能

    除了组件逻辑与外观分离这个核心变革,spark还带来了一些新的功能支持。

    视图状态(view states)    通过视图状态的定义和切换,使得动态外观开发变得异常简单。参考文章:About view statesflex4组件_s:states

    spark布局(spark layout)    新的布局规则将布局从具体组件中分离出来称为独立的概念,使动态布局成为一件简单的事情。参考文章:Flex4 beta 的 Spark 布局

    spark特效(spark effects)    Flex4新增了一个特效引擎,使得spark的特效更吸引人,并且可以用于组件的组成部件。参考文章:Adobe Flex 4 beta 中的效果

    FXG 和 MXML Graphics    新的图形库和交换格式!

    5、spark外观合同(skinning contact)

    这部分稍微复杂,也是理解spark架构的重要基础。

    spark组件包含3个重要的元素:组件包含的数据、组件包含的组成部件及组件包含的状态,这3部分都是组件逻辑和外观需要操作的内容。这3个元素(数据、部件和状态)定义了组件的外观合同,换句话说,组件逻辑和外观的变化要求对组件的数据、部件和状态就行组织,那么组件类和外观类之间需要对这种组织做一个规范。

    外观设计合同中,3个元素在两种类中的声明规则见下图。[转载]AIR/Flex学习笔记(6)

    通过以上形式的表示方式,3个元素在两种类中就可以统一起来形成交互,我们可以分别在两个代码文件中访问对应的元素,对他们进行操作。关于这部分的详细信息请参考:介绍 Flex 4 beta 中的外观设计。关于skin parts的内容请参考:FLEX4 在Spark皮肤中定义与使用新的皮肤机制

    6、spark组件库

    Spark容器(支持子组件布局)

    Group  -  Flex4中的一个不可设计外观的容器类,它可以包含UIComponents等可视子代、Adobe Flash Professional中创建的Flex组件或图形元素;
    DataGroup  -  Flex4中的一个不可设计外观的容器类,它只能包含子代等非可视数据项。DataGroup 容器支持生成项呈示器(这是一种可视元素,它将数据项转换为可显示项)及其元素的虚拟化;
    SkinnableContainer  -  Group的可设计外观的版本;
    SkinnableDataContainer  -  DataGroup的可设计外观的版本;
    Application  -  针对基于浏览器的Flex应用程序、可设计外观的顶级容器(与 AIR 应用程序相反,后者使用下述 Spark WindowedApplication 容器);
    BorderContainer  -  支持边框和背景填充的CSS样式的一个可设计外观的容器(与 MX 容器支持的边框和背景样式类似);
    Panel  -  支持标题栏、题注和边框的一个可设计外观的容器;
    TitleWindow  -  与 Panel 类似、支持关闭按钮和可移动区域的一个可设计外观的容器。TitleWindow 将通过 PopUpManager 以弹出窗口形式弹出;
    Window  -  可用作 Adobe AIR 应用程序中的顶级应用程序窗口的一个可设计外观的组件;
    WindowedApplication  -  定义 Adobe AIR 应用程序中的应用程序容器的一个可设计外观的组件。

    按钮组件

    Button  -  可设计外观的矩形按钮;
    CheckBox  -  包含标签和支持复选标记的框、可设计外观的组件;
    RadioButton  -  用于跨一组相互排斥的单选按钮识别一个选择、可设计外观的组件。

    范围组件

    ScrollBar  -  用于控制给定内容区域中的数据显示量、可设计外观的组件;
    Slider  -  允许通过在一个滑块轨迹的两个端点之间拖动缩略图选择值、可设计外观的组件;
    Spinner  -  包含用于从一个有序集中选择值的向上和向下按钮、可设计外观的组件;
    NumericStepper  -  可设计外观的组件,它实质上是一个连接到Spark TextInput控件的Spark Spinner控件,允许选择和编辑数值。

    文本组件

    Label  -  显示单行统一格式文本、不可设计外观的控件;
    RichText  -  可显示多行富格式文本并支持嵌入图像、不可设计外观的控件;
    RichEditableText  -  可用于显示、滚动、编辑和选择多行富格式文本、不可设计外观的控件;
    TextArea  -  允许显示和编辑多行富格式文本、可设计外观的控件;
    TextInput  -  允许显示和编辑单行统一格式文本、可设计外观的控件。

    基于列表的组件

    List  -  显示数据项、可设计外观的组件。它支持生成项呈示器、单项和多项选择、拖放操作、虚拟化和可指定布局;
    DropDownList  -  允许用户从拖放打开的列表中选择值、可设计外观的组件; 
    ComboBox  -  可设计外观的组件,实质上是一个带有可编辑功能的 Spark DropDownList。

    导航器组件

    ButtonBar  -  支持从类似于导航器的一组按钮中选择一个按钮、可设计外观的组件;
    TabBar  -  支持从类似于导航器的一组选项卡中选择一个选项卡、可设计外观的组件。
    Spark 滚动组件
    Scroller  -  定义可滚动视图、可设计外观的组件,可支持垂直和水平滚动栏。

    Spark 媒体组件

    VideoPlayer  -  支持回放视频媒体、可设计外观的组件,它构建在开放源媒体框架之上。

    关于spark和mx组件库的比较,请参考:最详细比较 MX and Spark组件

 

    spark的相关内容就总结到这里,本文参考了文章Spark 架构和组件集的简要概述

0

  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有