About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Feb

    4

    关于 Feathers 皮肤外观、子组件相关的旧资料备注

    • 0 Comments
    • Flash Platform
    • 发布:古树悬叶
    • 引用:0
    • 浏览:

    现在的新版 本 Feathers 为了改善开发者的体验,已经大大简化了外观、子组件相关部份的 API,虽然下面的这些旧资料并不一定适用于新版本(是 Feathers 1.0 开始提供的),但很多资料信息依旧完全适用于新版本,所以一并整理下来备注了。

    首先不用说的一点就是 Feathers 强烈推荐使用主题文件,主题类可以集中设置皮肤相关的代码,便于将来的维护和更新,以及替换新的主题而不影响旧有的功能业务。主题的另外最大的好处就是能自动化给组件添加皮肤(既便是相同类型的组件提供不同的皮肤)。

    但 Feathers 也同时提供了不使用主题、或在主题文件外直接设置组件外观以及子组件的 API。关于新版本的皮肤备注资料,已在博客中单独提供了备注。下面也整理了旧版的 Feathers 资料中一些通用的与皮肤外观、子组件相关的资料。

    子组件工厂:

    子组件可以通过一个“工厂”设置皮肤,这里的“工厂”只是一种设计模式的叫法,跟其它什么“事件侦听器”、“样式提供程序”一样,其实就是个普通的函数在不同情况下叫法不一样。当一个组件需要子组件时调用这个函数,但这个函数不接受参数,却会返回一个子组件对象。下面看个工厂的例子,就是生成 Slider 组件的 thumb 子组件工厂:

    slider.thumbFactory = function():Button
    {
        var thumb:Button = new Button();
        thumb.defaultSkin = new Scale9Image( upTextures );
        thumb.downSkin = new Scale9Image( downTextures );
        return thumb;
    };

    如上代码中,函数创建了一个 Button 实例,在返回之前给它添加了一些皮肤。

    子组件的子组件:

    有些子组件会复杂一些,自身也会带有一些子组件,则可以为这些子组件单独提供工厂函数,以引用的方式一层一层的传递工厂函数。如下代码,给一个 List 组件设置滚动条的皮肤:

    function simpleScrollBarThumbFactory():Button
    {
        var thumb:Button = new Button();
        thumb.defaultSkin = new Scale3Image( thumbTextures );
        return thumb;
    }

    function simpleScrollBarFactory():SimpleScrollBar
    {
        var scrollBar:SimpleScrollBar = new SimpleScrollBar();
        scrollBar.thumbFactory = simpleScrollBarThumbFactory;
        return scrollBar;
    }

    list.verticalScrollBarFactory = simpleScrollBarFactory;

    如上代码,其实也可以将 simpleScrollBarThumbFactory() 函数以嵌套函数的方式放在 simpleScrollBarFactory() 函数内,但子组件过多时可能会不方便阅读代码。

    重复使用(并联)的工厂:

    如果组件已经设置了外观,并且想要继续对它的子组件进行其它属性设置,可以重复使用工厂,如下代码,已经在一个工厂方法中设置了 Panel 的 header 的外观,但还想进一步设置或修改它的 title 属性:

    var headerWithSkinsFactory:Function = panel.headerFactory;
    panel.headerFactory = function():Button
    {
        var header:Header = headerWithSkinsFactory();
        header.title = "Tools";
        return header;
    };

    开发者虽然可以在一个工厂中设置所有的外观以及所有的属性,但有时候仅仅只是想要在后期动态的修改它的 title 属性,这种方法就必不可少了。

    子组件属性:

    开发者也可以不使用工厂,而是通过父组件的“子组件属性”来“引用”子对象设置属性,所有设置的值会在下一次渲染时生效。这种方式性能略差一点,大多数情况下推荐使用工厂方法。但这种方式适用于在创建子组件后很久才调整属性和皮肤。以上面的 slider 为例:

    slider.thumbProperties.defaultSkin = new Scale9Image( upTextures );
    slider.thumbProperties.downSkin = new Scale9Image( downTextures );

    如上代码通过 thumbProperties 属性设置的皮肤,并不会立即将设置传递给子组件,而是要等到下一帧的渲染时才会传递给子组件。一般来说开发者不能通过这种方式去获取子对象的属性值,只应该使用这种方式来设置属性的值。thumbProperties 对象并不知道它存储数据的实际 Button 实例的任何内容。所以以下代码将产生错误,除非开发者自己实际设置了 isSelected:

    var isSelected:Boolean = slider.thumbProperties.isSelected;

    这段话的主要意思就是指 “thumbProperties ”只是一个存储数据的对象,这个子组件属性并不是真正的引用到了子组件,而只是给出了用于下一次渲染时提供给 thumb 按钮需要的数据,所以 thumbProperties 本身并不是 thumb 子组件。所以上面的黄色字“子组件属性”与“引用”打了引号,只是看起来好像是子组件的引用,但实际上只是给子组件提供需要的属性数据(由于在下一帧渲染时需要传递给某个子组件,所以对应的子组件是需要被先创建好的)。

    嵌套的子组件属性:

    如上面的 slider 的 thumbProperties “伪引用”了子组件,这种伪引用可以嵌套的,听起来好凌乱(- -!),所以一般都推荐使用工厂方法,但如果有需要的话也可以作为一种可选的方法用于实际开发。

    再次以 list 组件的滚动条为例,但这次不使用工厂,而是使用嵌套的“子组件属性”:

    list.verticalScrollBarProperties.@thumbProperties.defaultSkin = new Scale3Image( thumbTextures );

    注意在这里使用了属性运算符(@)。属性运算符告诉系统在另一个“子组件属性”对象内创建“子组件属性”对象,但前提是它尚不存在。 它不能用于常规属性,所以这就是为什么 defaultSkin 不以@开头。

    但使用这种语法有一个好处,可以避免覆盖可能已经存在的对象。如果使用一个全新的对象设置 thumbProperties,如下面这样的代码,它将替换整个应用程序中全部的 thumbProperties:

    //警告:这可能会覆盖的东西!
    list.verticalScrollBarProperties.thumbProperties =
    {
       defaultSkin: new Scale3Image( thumbTextures )
    };

    在这里就可以使用 @thumbProperties 并单独传递属性,以便不会删除 thumbProperties 中已经存在的任何内容(这样就避免了替换整个对象,只是单个属性的替换)。

    • Tags:
    • 2017 / 2 / 4
    相关文章:
      Post Comment.

      发表评论