About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • 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 属性决定按钮组是否使用一个方向上的全部尺寸。

    Jan

    18

    Feathers3 Header 一些备注

    • 0 Comments
    • Flash Platform

    Header 提供了左中右分组的意图:

    centerItems : Vector.<DisplayObject>
    leftItems : Vector.<DisplayObject>
    rightItems : Vector.<DisplayObject>

    Jan

    18

    Scroller  它通常不会被实例化使用,它更像是一个抽象类(在 Feathers 中实例化它是会报错的),表示提供一个视图区域(view port),允许水平或垂直滚动,通常作为其它可滚动容器的超类(一般是 Scroll 开头的组件,但不包括 ScrollText)。它没有被作为一个推荐的 featerhs 组件放在帮助页面内进行介绍(至少现在没有)。

    ScrollContainer,这个是我们一般情况下通用的滚动容器。它有一些原生的布局功能,如 padding。

    当我们使用 layout 属性对内容子对象进行布局的时候也有 padding,但它们是指子对象的内容里面的;而 ScrollContainer 原生的布局功能的 padding 是指子对象的内容外面的部份(离容器的边缘部份)。

    interactionMode 属性决定根据用户交互模式所作的优化:

    ScrollInteractionMode.TOUCH//为移动开发优化,任意拖动,滚动条变的不能交互
    ScrollInteractionMode.MOUSE//为桌面开发优化,可以使用类似鼠标中键滚动
    ScrollInteractionMode.TOUCH_AND_SCROLL_BARS//既能拖动内容也能拖动滚动条

    scrollBarDisplayMode 属性决定滚动条的显示模式。

    horizontalScrollPolicy verticalScrollPolicy 决定滚动模式。

    snapToPages 决定滚动时是否按“整页”停止并显示、或任意像素可停止并显示。

    一般 ScrollContainer 用于子对象比较少的情况下,如果有大量的子对象,并能使用带有虚拟化布局的列表类组件,那么就推荐使用列表类组件。

    Panel 进一步扩展了 ScrollContainer 类,包含了一个  header 与 一个可选的 footer(用它可以很方便的创建对话框窗口)。

    默认情况下,Panel 的 header 是一个 Header 类的实例,但它也可以是任何 Feathers 组件。唯一的限制是被定义成 header 的部件必须是在 Panel 的顶部,并且占满宽度。比如换成一个按钮作为头部:

    panel.headerFactory = function():Button
    {
        var button:Button = new Button();
        button.addEventListener( Event.TRIGGERED, panelHeaderButton_triggeredHandler );
        return button;
    }
    //同时也需要修改 headerTitleField 为按钮对应的 label,这样就可以动态的给 panel 修改 title 标题了
    panel.headerTitleField = "label";

    默认情况下,Panel 没有 footer 对象,可以是任何 Feathers 组件。唯一的限制是被定义成 footer 的部件必须是在 Panel 的底部,并且占满宽度,如下代码:

    panel.footerFactory = function():LayoutGroup
    {
        var footer:LayoutGroup = new LayoutGroup();
        footer.styleNameList.add( LayoutGroup.ALTERNATE_STYLE_NAME_TOOLBAR );
        return footer;
    }

    Jan

    18

    Screen 扩展了 LayoutGroup 类,基本使用方法类似,但它提供了自动布局功能(layout 属性)。另外它提供了一些方法的用于硬件操作时的回调函数(比较方便于移动开发)。

    比如安卓设备有返回键、菜单键、搜索键等等,Screen 类为它们提供了一些对应的快速开发的回调函数。类似侦听“返回键(硬件)”按下时的使用回调函数:

    this.backButtonHandler = function():void
    {
        trace( "the back button has been pressed." );
    }

    ScrollScreen 扩展了 ScrollContainer,实现这个类的意图基本与 Screen 一样,为了方便页面导航类组件的使用,多了“滚动”相关的功能。

    PanelScreen 扩展了 Panel,实现这个类的意图基本与 Screen 一样,为了方便页面导航类组件的使用,多了“滚动”相关的功能。

    这三个组件涉及其它一些与导航页面有关的资料《Feathers3 ScreenNavigator & StackScreenNavigator 一些备注

    Jan

    17

    1、ScreenNavigator 的主要用于页面之间的导航,默认与 Starling 舞台大小相同,但可以手动设置宽与高。

    通过 addScreen() 方法添加 ScreenNavigatorItem 对象,用一个字符串作为 ID 与之关联。

    2、ScreenNavigatorItem 构造函数第一个参数可以传入一个类,也可以是实例对象,一般情况下推荐使用类。

     传入的类,一般需要实现 IScreen 类(但不是必须的),推荐直接简单的扩展 Screen、PanelScreen、ScrollScreen 类使用(它们都有一个 owner 属性指向 ScreenNavigator 对象)。

    3、显示指定的屏幕时调用 showScreen() 方法并传入字符串 ID。

    4、要访问 ScreenNavigator 对象中当前正在使用的页面,可以用 activeScreen 属性。

    5、clearScreen() 方法会移除 ScreenNavigator 当前的显示页面。

    6、页面之间交换的切换可以简单的通过事件与 setScreenIDForEvent() 方法实现(常规的还是调用 showScreen())。

    7、页面切换时可以调用大量的过渡动画效果类,每一个类下面有一种或多种静态方法,类似一个淡入的效果:

    this._navigator.transition = Fade.createFadeInTransition();

    动画管理器类(TransitionManager)也可以用于页面切换时的过渡动画效果控制,但这里的 transition 属性是一个函数类型。

    8、ScreenNavigator 可以侦听导航组件过渡动画的开始与结束事件 FeathersEventType.TRANSITION_START、FeathersEventType.TRANSITION_COMPLETE

    如果是侦听某个指定/特定的页面过渡动画,可以对 Screen 相关的页面侦听以下事件:

    FeathersEventType.TRANSITION_IN_START
    FeathersEventType.TRANSITION_IN_COMPLETE 
    FeathersEventType.TRANSITION_OUT_START
    FeathersEventType.TRANSITION_OUT_COMPLETE.

     这也是第2条中推荐简单的扩展 Screen、PanelScreen、ScrollScreen 类原因之一。

    另外需要小心一点,既便没有使用过渡动画相关的类,有可能也会派发 FeathersEventType 相关的事件(在一个页面被开始添加或一个页面被移除时发生)。

    9、ScreenNavivatorItem 对象可以给 properties 属性进行赋值(属性注入),注入的属性修饰词要使用 public (它会发生在构造之后,添加到舞台之前):

    this._optionsData = new OptionsData();

    var optionsItem:ScreenNavivatorItem = new ScreenNavigatorItem( OptionsScreen );
    optionsItem.properties.options = this._optionsData;

    //在 OptionsScreen 类中定义public 的 options,与 optionsItem.properties.options 匹配
    protected var _options:OptionsData;

    //更新数据
    public function get options():OptionsData
    {
        return this._options;
    }

    //如果果不是简单的更新数据,同时还要需要更新屏幕,调用invalidate()方法后,feathers组件会draw()重绘
    public function set options( value:OptionsData ):void
    {
        if(this._options == value)
        {
            return;
        }
        this._options = value;
        this.invalidate( INVALIDATION_FLAG_DATA );
    }

    其实也可以在构造阶段注入与页面相关的初始化参数(ScreenNavivatorItem 构造函数的第三个参数)。不管哪一种注入方式,都需要注意一正点传入的参数值是值类型还是引用类型。

    10、ScreenNavivatorItem 还提供了其它一些高级功能,比如使用 setFunctionForEvent() 回调一个函数,类似代码:

    var mainMenuItem:ScreenNavigatorItem = new ScreenNavigatorItem( MainMenuScreen );
    ///这个用于切换页面至 ID 为 OPTIONS 常量引用的页面
    mainMenuItem.setScreenIDForEvent( MainMenuScreen.SHOW_OPTIONS, OPTIONS );

    //这个用于回调函数
    mainMenuItem.setFunctionForEvent( MainMenuScreen.LINK_TO_HOME_PAGE, openHomePageLink );

    protected function openHomePageLink():void
    {
        navigateToURL( new URLRequest( "http://www.example.com/" )"_blank" );
    }

    11、开发者可以使用 signals(as3-signals 库)机制取代 AS3 事件导航,这个 signals 库并不是 Feathers 进行开发时必要的库,但 Feathers 会自动检查是否编译进了这个库,如果发现这个库被编译进去了,ScreenNavivator 调用事件时会有一些特殊的检测过程(信号会优先于事件)。

    ScreenNavivatorItem 第二个参数名称虽然是 events ,但它的类型却是 Object 类型,所以传入时可以是 Event 对象或 Signals 对象。

    12、StackScreenNavigator 基本使用方法与 ScreenNavigator 类似,特点是带有历史堆栈记录,可以简单的返回前面访问过的页面,允许通过 push 或 pop 来管理页面。

    13、TabNavigator 基本使用方法与 ScreenNavigator 类似,特点是带了一个工具条,允许通过工具条来导航页面。

    Jan

    17

     Feathers2.x 中包含了 Scale9Image、Scale3Image、TiledImage 这些组件。

    以前使用流程基本上是:

    Texture→Scale3Texture→Scale3Image

    Texture→Scale9Texture→Scale9Image

    Texture→TiledTexture→TiledImage 

    现在,从 Feathers3 开始, Feathers2.x 中 Scale9Image、Scale3Image、TiledImage 这些组件都没了。通过升级版的(迁移的) Starling 2.0 Image 对象的 scale9Grid 与 tileGrid 属性可以直接实现了。

    TiledImage 纹理缩放时,可能会产生一些透明的边隙,使用 TexturePacker 的 “Extrude” 设置较大的值可以解决这种问题。

    Jan

    17

    Feathers3 Drawers 一些备注

    • 0 Comments
    • Flash Platform

    1、Drawers 默认会将尺寸大小设为与 Starling 舞台大小一样,但也可以手动设置修改,指定明确的尺寸值。

    2、主内容容器(main content,content 属性引用)的尺寸会自动与 Drawers 对象保持相同尺寸。

    main content 一般为屏幕导航类容器组件,如 ScreenNavigator 组件。

    Jan

    17

    Feathers3 ImageLoader 一些备注

    • 0 Comments
    • Flash Platform

    ImageLoader 包装了 starling.display.Image 类(使用组合的方式,非继承关系)。可以给 source 提供纹理或 URL 字符串等。

    1、每个 ImageLoader 对象通过 URL 加载纹理图时,既便是相同的 URL 地址,也会创建新的纹理对象。比如 List 和 GroupedList 自定义的项呈现器中带有 ImageLoader 对象,调用相同的 URL ,会有额外的网络带宽开销、并影响性能。将纹理先存储起来再使用是一个比较好的方式(TextureCache)。

    2、pixelSnapping 属性能让像素更清晰。

    3、delayTextureCreation 属性设为 true,可以控制图像加载到内存,但不立即传输到 GPU 进行纹理创建。

    a、在滚动类容器中可以让滚动效果平滑、提高性能。只要一旦设为 false 会立即提交至 GPU 进行纹理创建并显示,如果是在滚动过程中,会产生卡顿感。

    b、delayTextureCreation 为 true 时,甚至可以使用 textureQueueDuration 指定特定的时间后提交 GPU 纹理创建。

    4、maintainAspectRatio 属性可以保持纹理图像的比例(这可能在左右两边或上下两边产生全透明的区域)。

    5、isLoaded 判断纹理是否已经加载。

    6、scaleFactor 可以对纹理进行缩放。

    7、color 跟 Starling 中 Image 对象的一样功能。

    8、smoothing 平滑设置。