About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Feb

    1

    Feathers3 “扩展示例主题”一些备注

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

    在进行移动开发的时候,个人比较推荐“扩展示例主题”,因为一个示例主题全部代码量和资源算在内只有几百KB,相对于一个 AIR SDK 打包移动APP,动则增加几十M 的容量来说,简直就是小意思了,但却能节省大量的时间。Feathers UI 库中提供的示例主题其实已经从设计时就开始考虑了扩展性,所以既便是在桌面开发中也同样推荐,会非常便于后期维护。除非是桌面 Web 型应用,并且对文件大小非常非 常的严格,那么只能从头开始完完全完的自定义一个主题文件

    添加替换的样式函数

    假设 MetalWorksMobileTheme 主题类符合我们大多数需求,但只有少数 UI 需要进行设整,那么就可以扩展 MetalWorksMobileTheme 类:

    package com.example
    {
        import feathers.themes.MetalWorksMobileTheme;

        public class CustomTheme extends MetalWorksMobileTheme
        {
            public function CustomTheme()
            {
                super();
            }
        }
    }

    当首次启动应用时,实例化主题类:

    new CustomTheme();

    然后,在 CustomTheme 类中添加一个 setCustomButtonStyles 方法,为按钮提供不同的皮肤(假设有个按钮需要修改皮肤):

    protected function setCustomButtonStyles( button:Button ):void
    {
        button.defaultSkin = new Quad( 200, 60, 0xff0000 );
        button.downSkin = new Quad( 200, 60, 0x000000 );
        button.fontStyles = new TextFormat( "_sans", 36, 0xffffff );
        button.padding = 10;
    }

    在它的超类中定义了一个 initializeStyleProviders() 方法,在该方法中所有的全局样式提供者为 Feathers 组件提供了注册,所以通过覆盖该方法可以通知对应类的全局样式提供者。每一个官方示例主题都是类似的结构(如果是第三方提供的主题文件可能会有所不同):

    override protected function initializeStyleProviders():void
    {
        super.initializeStyleProviders(); // 别忘了这个

        this.getStyleProviderForClass( Button )
            .setFunctionForStyleName( "custom-button", this.setCustomButtonStyles );
    }

    通过 getStyleProviderForClass() 方法访问 Button 类的全局样式提供者。如果全局样式提供者(global style provider)还没有被创建过,就会自动创建该对象。因为 MetalWorksMobileTheme 类是 StyleNameFunctionTheme 类的子类,通过 getStyleProviderForClass() 方法返一个 StyleNameFunctionStyleProvider 对象,该对象允许开发者将样式名称与方法关联起来,可以为同一类型的组件提供多个皮肤。

    上面例子中调用了 setFunctionForStyleName() 方法,并传了 “custom-button” 作为样式名称,然后将它与 setCustomButtonStyles 方法名关联起来。

    接下来,对按钮的代码进行一些调整:

    var specialButton:Button = new Button();
    specialButton.label = "Special!";
    specialButton.styleNameList.add( "custom-button" );
    this.addChild( specialButton );

    将  “custom-button” 字符串添加到按钮的 styleNameList,现在按钮就会使用前面自定义的 setCustomButtonStyles() 函数来代替 MetalWorksMobileTheme 定义的默认函数。

    在主题文件中为自定义类提供皮肤:

    默认情况下,自定义类会从它的超类继承样式提供程序。如创建了一个自定义的 CustomButton 类继承了 Button 类,子类就会自动使用 Button.globalStyleProvider。如果希望子类拥有和父类类似的外观,那就不需要做什么。

    但是,如果希望子类使用与其父类不同的默认样式提供程序,则需要向组件的类中添加几个属性。 首先,它需要一个静态全局样式提供者:

    public class CustomComponent extends FeathersControl
    {
        public static var globalStyleProvider:IStyleProvider;
    }

     然后需要覆盖 defaultStyleProvider 实例方法:

    override protected function get defaultStyleProvider():IStyleProvider
    {
        return CustomComponent.globalStyleProvider;
    }

    对绝大多数组件,defaultStyleProvider getter 都应该简单的返回静态全局样式提供者。

    默认样式提供者也是可以自定义的,例如,ToggleButton 组件在 ToggleButton.globalStyleProvider 为 null 时就返回 Button.globalStyleProvider:

    override protected function get defaultStyleProvider():IStyleProvider
    {
        if( ToggleButton.globalStyleProvider )
        {
            return ToggleButton.globalStyleProvider;
        }
        return Button.globalStyleProvider;
    }

    类似的,自定义组件也可以从超类获得可替换的默认样式提供者。

    要将自定义组件添加到主题文件,与前面一样,也是通过覆盖 initializeStyleProviders() 方法:

    override protected function initializeStyleProviders():void
    {
        super.initializeStyleProviders(); //别忘了这个!

        this.getStyleProviderForClass(CustomComponent).defaultStyleFunction = 
            this.setCustomComponentStyles;
    }

    可以在 StyleNameFunctionStyleProvider 对象上设置 defaultStyleFunction。如果自定义组件有可替换的备用样式,同样可以像前面介绍的那样对 Button 的全局样式提供者使用 setFunctionForStyleName() 方法。

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

      发表评论