About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Jan

    19

    DefaultListItemRenderer 与 DefaultGroupedListItemRenderer 分别是 List 与 GroupedList 默认的项渲染器,在定义列表类组件的外观样式时,它们是主要操作的目标,因为它们扩展自同一个类,所以基本功能与用法都相似(“幕后”代码有不同的地方不用管,毕竟名称不一样么 - -!!),直接用 DefaultListItemRenderer 指代两者了。

    默认项渲染器 DefaultListItemRenderer 除了能显示文字、 icon 外,甚至还能添加额外的显示对象,也包括提供了其它一些常用的方法,比如 labelFactory() 方法可以用于动态格式化 / 处理文本内容。

    a、DefaultListItemRenderer 的常用字段是 labelField、iconSourceField,如下代码:

    var groceryList:ListCollection = new ListCollection(
        [
            { text: "Milk", thumbnail: textureAtlas.getTexture( "milk" ) },
            { text: "Eggs", thumbnail: textureAtlas.getTexture( "eggs" ) },
            { text: "Bread", thumbnail: textureAtlas.getTexture( "bread" ) },
            { text: "Chicken", thumbnail: textureAtlas.getTexture( "chicken" ) },
        ]);
    list.dataProvider = groceryList;

    list.itemRendererProperties.labelField = "text";
    list.itemRendererProperties.iconSourceField = "thumbnail";

    DefaultListItemRenderer 对应字段的对象都是动态创建的,比如上面 labelField 字段对应创建了一个文本渲染器组件,iconSourceField 字段对应的创建了一个 ImageLoader 对象。如果不设置 iconSourceField 字段的值,DefaultListItemRenderer 不会动态的创建 ImageLoader ,这样使的性能大大提高了。

    因为 DefaultListItemRenderer 的 iconSourceField 创建的是一个 ImageLoader 对象,实际上也可以直接给它符值为 URL 字符串,它会提供给 ImageLoader  的 source 属性。

    b、DefaultListItemRenderer 还包含了不常用的字段 accessoryField ,能把其它显示对象作为子对象显示(包括 Starling 对象),这种 accessory 显示对象在列表中可以与用户单独交互的(不同于 icon 默认是没有效互能力的),如果有 accessory 显示对象,最好关闭列表的 isSelectable 功能。

    c、还有一些不常用的如 accessoryLabelField、iconLabelField 等是一些文本渲染器对象。

    d、iconField 字段可以显示 Feathers 或 Starling 对象,如下代码:

    var slider:Slider = new Slider();
    //对 Slider 对象进行属性设置,用于下面的control 字段
    list.dataProvider = new ListCollection(
    [
        { label: "Example Label", control: slider }
    ];
    //此时项渲染器在 icon 位置创建的就是 Slider 对象
    renderer.iconField = "control";

     这里需要记住的是当项渲染器或 list 对象被销毁(disposed)的时候,它是不会自动被销毁的。如果确定对象不需要了,需要手动销毁它(无论是通过 data 或 ListCollection 对象),防止内存泄漏。

    可以不通过数据提供者修改数据,直接对 icon 进行皮肤设置,比如当项渲染器被选中的时候, icon 会作出外观上的改变(此时数据并没有变化),设置 itemHasIcon 为 false,然后通过 defaultIcon 属性和 setIconForState() 方法像设置普通按钮一样进行设置。

    e、DefaultListItemRenderer 中还可以显示一个额外(accessory)的显示对象,是直接作为可交互的子对象添加的(不同于 icon 对象默认没有交互功能),所以最好将列表组件的 isSelectable 功能关闭,避免用户在操作时有冲突产生。

    1、accessorySourceField、accessoryLabelField 是为了开发时灵活与方便性存在的,额外的显示纹理图或文本。

    2、accessoryField 和前面使用 iconField 一样,可以显示任何 Starling 显示对象,但这种子对象不会自动随着 List 与项渲染器的销毁而销毁,同样需要手动销毁。

    3、也可以将额外的显示对象变成不可交互的类似 icon 的部件,itemHasAccessory 设为 false,通过 defaultAccessory 属性和 setAccessoryForState() 方法进行设置。

    DefaultListItemRenderer 类其实是一个 ToggleButton 类的子类,所以 ToggleButton 上能用的样式与功能,在 DefaultListItemRenderer 类上基本上都能用。

    Jan

    19

    Feathers3 GroupedList 一些备注

    • 0 Comments
    • Flash Platform

    GroupedList 的数据源是通过 HierarchicalCollection 包装的,虽然官方的帮助资料中写了可以包装任何类型的数据,但实际上“即时”可用的只有 Array 类型(在 IHierarchicalCollectionDataDescriptor 帮助页面中实现的类只有 ArrayChildrenHierarchicalCollectionDataDescriptor)。

    每个数组元素对象需要类包含 children 字段(也可以自定义字段,还可以包含其它字段如 header、footer,但其它字段后面需要手动指定给对应的属性),类似如下结构:

    var groceryList:HierarchicalCollection = new HierarchicalCollection(
    [
        {
            header: { text: "Dairy" },
            children:
            [
                { text: "Milk", thumbnail: textureAtlas.getTexture( "milk" ) },
                { text: "Cheese", thumbnail: textureAtlas.getTexture( "cheese" ) },
            ]
        },
        {
            header: { text: "Bakery" },
            children:
            [
                { text: "Bread", thumbnail: textureAtlas.getTexture( "bread" ) },
            ]
        },
    ]);
    list.dataProvider = groceryList;

    如果要使用其它类型的数据比如 XMLList 作为被包装源对象,首先就要实现“IHierarchicalCollectionDataDescriptor”接口,然后再将实现类生成的对象先赋值给 HierarchicalCollection 对象的 dataDescriptor 属性,然后再将 HierarchicalCollection 对象赋值给 GroupedList 对象的 dataProvider。

    为 XML 数据类型报不平:AS3 是至目前为止,唯一一个严格遵守 ECMAScript4 标准的语言,AS3 也是至目前为止唯一一个实现 E4X 语法的语言,所有的 AS3 运行时环境都提供了 E4X 解析器,在许多 AS3 开发者手中却被白白的浪费了。操作 XML 数据是极其方便的,仅类似 SQL 语法的谓词过滤这一功能,就可以干死所有其它数据类型,不服你咬我啊?其它附属的特点也相当多,如层次结构清晰、索引功能、文本换行、通配符操作、命名空间、内置的注释、独立的属性等等一堆优势,而作者却没有给出可以即时使用的实现,元芳,你怎么看?……)。

    然后,将字段的名称赋值给对应的属性值,就可以显示 children 的项渲染器了(注意:这里没有任何指定 children 字段相关的操作,如果是其它字段就需要手动指定,如后面马上会看到的对 headr 字段的操作),

    list.itemRendererProperties.labelField = "text";
    list.itemRendererProperties.iconSourceField = "thumbnail";

    labelField、iconSourceField 基本上与 List 组件一样,这里先省略了,在整理 DefaultListItemRenderer 与 DefaultGroupedListItemRenderer 时再备注。

    header 字段相当于组名,footer 相当于对组的描述备注或者其它的一些附属的信息。它们一起使用 DefaultGroupedListHeaderOrFooterRenderer 类,可以用来显示文字,纹理图,或其它任何 Starling 显示对象。

    list.headerField = "header";

    不同于 children 字段,header 字段需要手动指定给属性。剩下的操作与 children 类似了。

    list.headerRendererProperties.contentLabelField = "text";

    header 与 footer 字段对应的对象可以稍稍简化一些,省去 contentLabelField 属性值的设置,它被使用的时候更像是对这个字段提供的对象调用了 toString() 方法:

    所以数组的元素被修改成这样也可以:

    {
        header: "Bakery",
        children:
        [
            { text: "Bread", thumbnail: textureAtlas.getTexture( "bread" ) },
        ]
    }

    程序化的选择项渲染器(数据源是被包装的类似“二维”的层次结构的对象,索引是从0开始的,所以下面的代码是选中第1组中第5个渲染器):

    list.setSelectedLocation(04);

    如果这里两个参数都传入 -1,那么表示取消选择。

    GroupedList 外观修改基本上和 List 一样,就是背景与布局,大多数情况下,开发者需要修改的实际上是项渲染器的外观。在整理外观主题、皮肤相关的资料时再备注。

    GroupedList 虚拟化布局、滚动条显示与滚动策略等基本上都跟 List 一致。

    GroupedList 与 List 不一样的地方,是每一组的第一个项渲染器(顶部圆角)、最后一个项渲染器(底部圆角),以及当组中仅有一个项渲染器(顶和底都是圆角)时可以分别进行不同的设置:

    firstItemRendererType
    firstItemRendererFactory
    lastItemRendererType
    lastItemRendererFactory
    singleItemRendererType
    singleItemRendererFactory

     这些属性的使用方法与 itemRendererType、itemRendererFactory都类似。

    header、footer 都有与 itemRendererType、itemRendererFactory类似的属性。

    不常用的一些功能,比如每一项的项渲染器有可能因为数据不同而不同,可以使用“多个项渲染器工厂”。

    Jan

    19

    Feathers3 List 一些备注

    • 0 Comments
    • Flash Platform

    1、List 的数据源通过 ListCollection 包装可识别的对象提供的,可以是 Vector、Array、XMLList 对象(但它们不是必须的,也可以是自定义的数据对象)。

    2、设置 List 的背景皮肤时,会自动填充满 List 的宽与高。

    3、List 组件的布局可以是水平的、垂直的、拼贴块的等等,也可以是自定义的。

    4、交互模式、视觉效果等可以是为桌面优化的或为移动开发优化的。

    a、滚动条是不是可交互的,通过 interactionMode 属性设置(更多的滚动行为备注资料)。

    b、比如常见的移动开发,列表拖动允许超过内容的底部,放开触屏后,会有一个自动缓冲返回到最底部,通过 hasElasticEdges 属性就可以设置。

    c、比如移动开发的滚动条滚动时浮动显示,停止滚动时会自动隐藏,通过 scrollBarDisplayMode 属性设置

    这个属性有可能被滚动策略属性设置覆盖,除非意图明确,否则应避免与 ScrollPolicy 冲突。

    d、比如常见的分页显示内容,通过 snapToPages 属性设置。

    5、组件原生的一些样式相关的布局功能。最常见的就是 padding 了,也可以四个边不相同。

    a、它的 padding 是指列表内部整体(所有渲染器)与列表边缘的间距。

    b、gap 渲染器与渲染器之间的间距。

    6、与性能有关的属性非常多,但有些属性可能很多时候用不上,或无法使用,这主要还是看编程的意图了。

    a、useVirtualLayout 属性,与性能有最大关系的估计就是虚拟化布局了。

    b、clipContent 属性,设为 false 的时候可以提高性能(比如在移动设备上可以把 List 放在下面,其它 UI 组件放在上面遮挡)。

    c、isQuickHitAreaEnabled 设为 true,可以优化点击(把渲染器当作一个矩形碰撞检测,而不是当成一个显示对象检测)。

    不过这只适用于项渲染器中没有额外的显示对象用于交互作用,只用于显示的时候,唯一的交互可以是项渲染器只有当作“选择(selected)”进行交互。

    d、autoHideBackground 设为 true,在满足一定的条件下,可以少渲染皮肤对象。

    条件就是:所有项渲染器都是完全不透明的、并且没有 padding 和 gap 神马神马的,完全遮挡皮肤的情况下。

    e、manageVisibility 属性,这是一个已经消失的属性。在 Feathers 2.x 中可以设置单个的项渲染器不可见,这在虚拟化布局被禁用时会很有用,可以防止在列中渲染它们。

    PS:Feathers 2.x 中存在,但在 3.x 中不存在了。

    Jan

    19

    屏幕导航的资料中提到了屏幕导航相关的类 transition 属性是一个函数类型;内置的过渡动画类相关的类提供了大量的静态方法,可以利用这些方法直接创建过渡动画,基本上用不上动画管理器。

    但也提到了“动画管理器类(TransitionManager)也可以用于页面切换时的过渡动画效果控制”,而且它能控制更多的细节,但在 Feathers 3.x 似乎弱化了动画管理器类,在 feathers.motion.transitions 包中默认只剩下了一个 TabBarSlideTransitionManager 类,在 Feathers2.x 中还包含了 OldFadeNewSlideTransitionManager、ScreenFadeTransitionManager、ScreenSlidingStackTransitionManager。

    虽然这些动画管理器类最终也会包含一个过渡动画函数,签名与内置的过渡动画类的静态方法签名相同:接收一个旧的 oldScreen 对象用于消失,一个新的 newScreen 对象用于显示,还有一个动画结束时调用的一个回调函数 onComplete动画管理器类可以方便的控制两个新旧对象。比如,允许在动画过程中可以只有一个屏幕对象(动画启动时,调用了 clearScreen() 进行清除,只留下了一个画面)但不会两个对象同时都为 null。

    在使用动画管理器类时需要注意的一些事项(都是与性能相关的涉及动画过渡时视觉上的平滑效果):

    1、在 Feathers2.x 中,Screen 对象的 initialize() 方法中不要使用 flatten() 方法。

    2、不要上传纹理至 GPU,理想的情况是在动画开始之前就创建好需要的纹理对象。

    3、不要创建不必要的显示对象,不要处理不必要的数据,尤其是“长时间”运算的数据。

    4、避免创建大量的临时对象,如push、unshift、splice 等从一个数组对象中进行操作,因为这会产生一个临时对象,随时触发垃圾回收器进行回收操作。

    这些都有可能产生丢帧 / 跳帧的卡顿现象。

    Jan

    19

    TiledRowsLayout 类 与 TiledColumnsLayout 类用法和功能相似(我中文称它们为拼贴或拼贴块,也有看到别人称它们为磁砖),一个从左向右显示多行排列容器中的子对象,一个是从上往下排列容器中的子对象。它们都支持水平或垂直分页显示,都支持子对象之间的间距、对齐方式设置。

    useSquareTiles 属性用于设置 Tile 块是否为矩形或正方形。

    padding 属性以像素为单位,设置子对象与容器边缘的间距。

    paddingTop、paddingRight、paddingBottom、paddingLeft 可以特殊处理每一个不同的边距。

    gap 属性以像素为单位,设置 Tile 块之间的间距。

    horizontalGap、verticalGap 属性也能分别设置水平与垂直方向不同的间距。

    horizontalAlign、verticalAlign 属性分别决定对齐方式。

    tileHorizontalAlign、tileVerticalAlign 属性分别决定 Tile 块对齐方式。

    requestedColumnCount 属性决定 TiledRowsLayout 类的指定拼贴块的列数。

    a、如果容器的尺寸过小,布局可能会无法容纳指定的列数;但只要尺寸够大,就会显示指定的列数。举个列子:

    layout.requestedColumnCount = 3;

    如上列数设为 3 列时,如果容器的尺寸可以容纳3列以上,它也只会显示3列;但如果容器的尺寸如果只能容纳1列或2列,那么它会按容器的最大可容纳的列数显示,而不会是 3。

    b、需要注意的是,如果容器的宽度没有手动设定大小,layout 布局将会自动计算容器的宽度以匹配 requestedColumnCount 的设置的值。 

    requestedRowCount 属性决定 TiledColumnsLayout 类的指定拼贴块的行数.

    基本与 requestedColumnCount 属性对 TiledRowsLayout 类的意图类似,只不过一个是针对列的,一个是针对行的。

    manageVisibility 属性,这是一个已经消失的属性。决定视图区域(view port)外的拼贴块是否可见,如果设为 true ,这可以提高渲染性能,特别是在虚拟化布局时(但这样一来,所有拼贴块就无法再单独设置 visible 属性了)默认值为 false。

    PS:Feathers 2.x 中存在,但在 3.x 中不存在了。

    paging 属性可以设置分页功能(分页可以是水平的也可以是垂直的)每个页面会有边缘 paging(缩进/填充)。

    a、TiledRowsLayout 类会自动启用垂直对齐;TiledColumnsLayout  类会自动启用水平对齐。

    b、如果是在滚动容器与列表类(ScrollContainer、List)组件中, snapToPages 属性需要设为true;如果值为 false,可以停留在任何位置。

    c、可以与 PageIndicator 类结合使用,以给用户预显示当前所处的位置,也可以用于快速导航页面。

    最后,与其它布局类一致的提示,需要注意性能问题。如果能够使用虚拟化布局就尽量使用虚拟化布局(LayoutGroup 与 ScrollContainer 是没有虚拟化布局的,在它们的子类中查看 useVirtualLayout 是否存在)。

    Jan

    18

    Feathers3 ProgressBar 一些备注

    • 0 Comments
    • Flash Platform

    ProgressBar 可以是水平或垂直的。

    var backgroundSkin:Image = new Image( backgroundTexture );
    backgroundSkin.width = 150;
    progress.backgroundSkin = backgroundSkin;

    var fillSkin:Image = new Image( fillTexture );
    fillSkin.width = 20;
    progress.fillSkin = fillSkin;

    上面的代码中,先设置了皮肤文件的宽度值为 150 像素,然后再把它赋给 progress 对象的 backgroundSkin 属性,这种情况下,这样做出来的进度条的初始宽度是至少150像素宽,但可以通过对 progress 的宽度值重新进行更大或更小值的设置。如果不手动设置尺寸, 进度条的尺寸会按 backgroundSkin 自动计算出来。

    对于 fillSkin 属性,我们希望它的宽度最小不要小于 20 像素,比如说是一个圆角矩形,如果小于 10 像素会产生重叠或扭曲,为了避免这种情况出现,我们对 fillSkin 设置宽度为 20 就相当于告知 progress 进度条的最小值对应的就是 20 像素。比如进度条的最小值是 0,那么 20 像素宽度对应的就是 0 值;而当进度条的值到达 100 时,对应的宽度就是 150 像素。

    padding 属性可以设置填充部份与轨道边沿的距离。

    Jan

    18

    SimpleScrollBar ScrollBar,它们之间并没有继承关系,但使用方式和功能类似,意图都是为了滚动容器类或列表类滚动时有一个视觉效果(甚至交互效果)。

    SimpleScrollBar 一般用于移动开发,是沿着一个不可交互、不可见的轨道滑动的;

    ScrollBar 一般用于桌面开发,是带有可见的轨道、可拖动的滑块等。它们都可以放在滚动容器的外部,minimum、maximum、step 、value等属性都可以正常工作(就好像一个 Slider 组件被绑定到了滚动)。

    Slider 组件跟 ScrollBar 基本类似(就好像一个脱离了滚动容器的滚动条)。

    Jan

    18

    Feathers3 WebView 一些备注

    • 0 Comments
    • Flash Platform

    WebView  是 flash.media.StageWebView 的包装类,它的主要功能是将对象的坐标都转换成了本地坐标,不再需要手动去计算坐标了(坐标与尺寸使用的都是像素值,不是屏幕的物理点数)。

    Jan

    18

    Feathers3 Label 一些备注

    • 0 Comments
    • Flash Platform

    Label 可以通过 wordWrap 属性决定是否可换行的、还能有背景纹理之类的、还内置了 padding 样式属性设置。

    默认情况下,Label 通过全局的 FeathersControl.defaultTextRendererFactory() 静态方法创建文本,如果想要一个指定的文本渲染,类似这样:

    label.textRendererFactory = function():ITextRenderer
    {
        return new TextBlockTextRenderer();
    };

    只要 textRendererFactory 属性不为 null,它就会取代 FeathersControl.defaultTextRendererFactory() 静态方法。fontStyles 会对不同的文本引擎一起工作。

    Jan

    18

    Feathers3 TabBar 一些备注

    • 0 Comments
    • Flash Platform

    TabBar 是一组水平或垂直布局的开关按钮组,一次只能选项一个(类似 Flex 中的 LinkBar)。侦听按钮切换 Event.CHANGE 事件:

    tabs.addEventListener( Event.CHANGE, tabs_changeHandler );

    direction 属性决定排列的方向。

    gap 属性决定每个按钮之间的间隙的距离。

    firstGap 和 lastGap 属性分别决定第一个和最后一个间隙的距离。

    distributeTabSizes 属性决定按钮组是否使用一个方向上的全部尺寸。