About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Feb

    1

    Feathers 主题或者主题文件(themes)是一个类,集中在同一个文件位置实现多个组件的皮肤样式设置与管理。在主题文件中提供的样式是全局的,任何 Feathers 组件初始化的时候,会自动设置样式。在应用开发时使用主题文件是非常容易、方便和有用的,它可以使用相同的样式皮肤化任何组件。如果想要特殊化一个组件的样式,而不同于默认全局的样式,也可以非常方便的从主题文件中“排除”,如果喜欢默认样式,但想有一些微小的调整,都可以轻松实现。

    主题文件并不是必须的,可以通过 Feathers 组件直接逐个的设置每个组件的样式属性。但使用主题文件会带来很大的好处,就是可以将皮肤样式外观的设置集中到一处,而不会影响其它具体的业务逻辑,减少代码混乱。也可以使用预制的主题(样例主题),进行前期的快速功能开发,后期再调换成自己设计的主题,对其余的部份不会有什么影响。

    初始化主题:

    使用 Feathers UI 库中的示例主题 MetalWorksMobileTheme 类为例,在 Starling 的根容器中立即实例化主题:

    import starling.display.Sprite;
    import feathers.themes.MetalWorksMobileTheme;

    public class Main extends Sprite
    {
        public function Main()
        {
            new MetalWorksMobileTheme();
            super();
        }
    }

    实例化主题的代码在 super() 方法前,如有必要情况,主题就可以对根容器也进行皮肤样式化处理(根容器不一定就是直接扩展 Starling 的 Sprite 类,可能就是实现了一个自定义的 Feathers 组件)。

    此后,当 Feathers 组件被 addChild 到舞台时,主题文件就会自动检测添加的组件,自动给组件添加皮肤。

    自定义特定组件实例:

    1、如果使用主题文件,那么最好将样式化相关的代码都放在主题文件内(脱藕性),但也可以在任何组件上自定义样式,以使其与默认的皮肤样式不同。如自定义一个按钮的标签字体样式: 

    var button:Button = new Button();
    button.label = "Click Me";
    button.fontStyles = new TextFormat( "_sans"20, 0x4c4c4c );
    this.addChild(button);

    如上代码,样例按钮的背景皮肤、padding 等会按着主题文件中的样式进行设置,但 fontStyles 会以这个自定义的 starling.text.TextFormat 样式进行设置。

    相比较而言,在旧版本的 Feathers 中,在主题文件外自定义样式有一些麻烦。如上面的代码,这样直接简单的设置样式有可能会被主题文件替换。但从 Feathers 3.1 开始,这样直接设置样式属性不会再和主题文件中的代码冲突。

    2、还有一些情况,某个组件就是不想使用主题文件中的任何样式,是完完全全自定义的。有下面几种方法可以实现:

    a、清除样式提供者。最直接暴力的方法就是将 styleProvider 属性设为 null,告诉组件不使用主题。

    var button:Button = new Button();
    button.styleProvider = null; //不使用主题文件中的代码!
    button.label = "Click Me";
    button.fontStyles = new TextFormat( "_sans"20, 0x4c4c4c );
    button.defaultSkin = new Quad( 10030, 0xcccccc );
    button.padding = 10;
    this.addChild(button);

    当 styleProvider 属性设为 null 时,按钮的所有样式属性如背景纹理、padding、 layouts、字体等等都需要手动设置了,因为它不会再接受主题文件中的样式代码。

    b、使用扩展的自定义样式名称(相对于前面的方法,这是比较推荐的方法)。这通常会涉及到主题类的扩展,将皮肤样式相关的代码集中放在主题文件中,可以让代码更清晰。

    内置的可交替使用的(备用)样式名称(Built-in alternate style names):

    一些组件提供了一组内置的备用样式名称(style names),样式名称可以被添加到 styleNameList 属性中,用以通知主题文件特定实例的皮肤与默认的皮肤应该有所不同。备用的皮肤在不改变组件功能的基础上,用以在视觉上区分组件实例。例如,希望某个按钮比其它按钮更明显,给它一个名为“call-to-action”的样式名称,让主题给它更明显的颜色用以在视觉上区分其它按钮。

    另一个例子,如 GroupedList 组件有一个标准的普通外观皮肤,看起来就像是 List 组件,但它有 headers 与 footers。还有一个 “inset” 样式,控制组中第一个和最后一个项渲染器的外观带有圆角。如果希望观看两种不同的风格样式,可以在 Component Explorer 中浏览 GroupedList 组件。

    Component Explorer 是类似 Feathers 移动版本的组件 DEMO,使用了 MetalWorksMobileTheme 主题。

    备用的样式名称一般是直接在组件定义的类上定义为 public 的静态常量,如 GroupedList 类定义了 ALTERNATE_STYLE_NAME_INSET_GROUPED_LIST 常量。inset 样式就可以被添加到 styleNameList 中,如:

    var list:GroupedList = new GroupedList();
    list.styleNameList.add( GroupedList.ALTERNATE_STYLE_NAME_INSET_GROUPED_LIST );
    this.addChild( list );

    如果正在使用的主题文件没有为组件的备用样式名称提供对应的皮肤,组件并不会因为找不到皮肤而看不到或产生异常,而是主题会自动回退到显示默认的皮肤。主题文件的程序员并不需要编写特别的代码,它已经是主题系统的核心部分。这样只是为了确保开发者在切换不同的主题文件时,可以让组件的功能正常运行,而不产生问题。如果自定义自己的主题文件,确保为每个备用样式名称提供对应的皮肤是最好的做法。

    文件大小警告:

    示例主题文件包含了每个可用的 feathers 组件,这意味着如果使用示例主题文件,所有的羽毛组件不管用到的还是没用到的都将被编译到正在开发的应用中去。如果要保存文件大小,应该考虑修改主题文件的源代码,以删除项目中未使用的所有组件的引用。另一种更好的方式就是完完全全的从头开始创建一个自定义的主题文件

    Feb

    1

    Feathers3 皮肤资料备注

    • 0 Comments
    • Flash Platform

    所有的 Feathers 组件都支持大量的样式属性以允许用户自定义设计。许多组件包含了多个状态的背景皮肤属性,还有不同的布局属性,如 padding、alignment、字体样式等。此外,还有一些组件在移动开发或桌面开发时分别会有不同的选项。

    实际上 Feathers 没有默认皮肤,它鼓励开发者自己开发设计独一无二的皮肤外观。但也为了方便开发者,Feathers 提供了几个不同风格的示例主题,如果有必要或为了方便开发,开发者也可以直接扩展这些示例主题自定义不同的皮肤。

    基本资料:

    所有的皮肤、布局选项、字体样式等其它有用的样式属性,都是以 public 的属性方式提供了 API。自定义样式化的皮肤和布局时就像设置属性一样简单。以一个按钮为例:

    var button:Button = new Button();
    button.label = "Click Me";
    button.defaultSkin = new Quad( 10030, 0xc4c4c4 );
    button.fontStyles = new TextFormat( "Helvetica"20, 0x3c3c3c );
    this.addChild( button );

    这里只是一个基本示例,还有其它更多的布局或图标相关的样式属性,可以参考具体的 API 手册。其中, starling.text.TextFormat 可以为任何 Feathers 组件用于自定义字体样式,无论是使用位图字体、嵌入字体或设备字体等。

    组件有多个状态

    有些组件类似 Button、TextInput 等有多个状态,可以为不同的状态设置不同的皮肤外观。比如通过 setTextureForState() 设置不同状态时的背景皮肤纹理:

    var skin:ImageSkin = new ImageSkin( upTexture );
    skin.setTextureForState( ButtonState.DOWN, downTexture );
    button.defaultSkin = skin;

    传递一个默认皮肤纹理给 ImageSkin 构造函数,然后再通过 setTextureForState() 方法设置不同状态的纹理。如果我们没有为某个状态设置皮肤纹理,那么默认的皮肤纹理就会被使用,比如上面的代码中没有设置 HOVER 状态的皮肤,那么 HOVER 状态时就会显示默认的皮肤纹理。如果要设转上老母一个状态,可能类似的代码如下面这样子:

    var skin:ImageSkin = new ImageSkin( upTexture );
    skin.setTextureForState( ButtonState.DOWN, downTexture );
    skin.setTextureForState( ButtonState.HOVER, hoverTexture );
    skin.setTextureForState( ButtonState.DISABLED, disabledTexture );
    button.defaultSkin = skin;

    和上面设置不同状态的纹理类似,可以通过 setFontStylesForState() 方法设置不同状态的字体样式。

    var upFontStyles:TextFormat = new TextFormat( "Helvetica"20, 0x3c3c3c );
    var downFontStyles:TextFormat = new TextFormat( "Helvetica"20, 0xff0000 );

    button.fontStyles = upFontStyles;
    button.setFontStylesForState( ButtonState.DOWN, downFontStyles );

    如上代码中,fontStyles 是默认的字体样式,而 setFontStylesForState() 方法可以自定义不同状态的字体样式(new 一个 TextFormat 即可)。

    设置子组件的外观皮肤样式:

    一些“复杂的” Feathers 组件会包含其它 Feathers 组件作为子组件。例如一个 Panel 组件,包含了一个 header 对象,像这样的 header 子组件是可以设置样式的,但它的样式属性并不会直接通过父组件直接暴露给开发者。

    样式化一个子组件比较简单的方法是自定义工厂方法,直接返回一个样式化的子组件,如 Panel 的 header 对象是通过 headerFactory 属性的工厂方法创建的:

    var panel:Panel = new Panel();
    panel.headerFactory = function():IFeathersControl
    {
        var header:Header = new Header();
        header.backgroundSkin = new Quad( 20050, 0x3c3c3c );
        header.fontStyles = new TextFormat( "Helvetica"20, 0xd4d4d4 );
        return header;
    };
    this.addChild( panel );

     如果开发者正在使用一个主题( theme) 文件,可能会希望将皮肤样式外观有关的代码都放在主题文件中,那样的话就不推荐使用生成子组件的工厂方法,而应该为子组件创建新的样式名称,然后将代码移动到主题文件中。

    复杂的组件允许开发者自定义子组件的样式名称。在这个 Panel 的例子中,可以设置 customHeaderStyleName 属性,如:

    var panel:Panel = new Panel();
    panel.customHeaderStyleName = "custom-panel-header";
    this.addChild( panel );

     在主题文件中,创建一个对应的方法用于对子组件进行样式化设置:

    private function setCustomPanelHeaderStyles( header:Header ):void
    {
        header.backgroundSkin = new Quad( 20050, 0x3c3c3c );
        header.fontStyles = new TextFormat( "Helvetica"20, 0xd4d4d4 );
    }

     最后“告诉”主题文件,当子组件有自定义的样式名称时,对应的调用哪个方法:

    getStyleProviderForClass( Header ).setFunctionForStyleName( "custom-panel-header", setCustomPanelHeaderStyles );

    Feb

    1

    Feathers3 "Tool-tips" 一些备注

    • 0 Comments
    • Flash Platform

    Tool-tips (提示功能)最常见的情况是在桌面开发的应用中,当鼠标悬停在某个 UI 按钮上面时,会出现一个提示文本。Feathers 也可提供了这样的功能,通过 ToolTipManager 可以方便的实现。(虽然移动开发也能使用,但移动设备因为没有鼠标指针,所以一般不会用这样的功能,就算用了在一般情况下也是看不到提示的)。

    启用 Tool-Tip Manager:

    要启用提示功能,应用首次启动时只需要一行代码:

    ToolTipManager.setEnabledForStage( this.stage, true );

    然后只需要设置组件的 toolTip 属性即可。如果开发的是一个桌面 AIR 程序,具有多个窗口,每个窗口都有一个独立的舞台对象,所以需要为每个应用窗口单独调用 setEnabledForStage() 方法。  

    var button:Button = new Button();
    button.label = "Click Me";
    button.toolTip = "Some useful information";

    所有的 Feathers 组件都有一个 toolTip 属性。

    Feb

    1

    Feathers 提供了拖放管理器(DragDropManager )提供拖放功能(Drag 与 Drop 功能, 也被简称为 “D&D” 功能,如果有使用过 Flex 的 D&D 功能,应该会很熟悉基本流程)。基本流程如下:

    1、首先需要在对应的对象上实现 IDragSource 与 IDropTarget 接口。

    2、调用 DragDropManager.startDrag() 方法:

    传入第一个参数是 IDragSource 对象。

    第二个参数是启动拖动操作的 Touch 对象。

    第三个参数是 DragData 对象,它存储正在拖动的数据,可以指定数据格式,用于指定不同的目标可以接受不同的数据类型。

    3、当被拖动的对象经过 IDropTarget 对象时,IDropTarget 对象会派发 DragDropEvent.DRAG_ENTER 事件时(DragDropManager 会自动派发这个事件,开发者只需要侦听这个事件就可以),DragData 包含了目标对象可以接受的数据格式,会调用 DragDropManager.acceptDrag() 方法。

    4、如果用户在 IDropTarget 对象上面有释放操作(比如停止触摸或释放鼠标),IDropTarget 对象会派发 DragDropEvent.DRAG_DROP 事件,如果正是需要的目标对象,需要在侦听器中处理释放(Drop)操作。

    5、无论释放操作是否在需要的目标对象上,IDragSource 对象都会派发 DragDropEvent.DRAG_COMPLETE 事件,事件对象的 isDropped 属性是会指示出释放操作是否成功。如果数据需要在释放操作后被删除,就可以在侦听器中处理,检查 isDropped 属性是否是成功的接受了释放对象,还是取消了。

    当在调用 DragDropManager.startDrag() 方法时,可以使用一个具体的图像作为拖动数据的“代理显示”。在拖动行为过程中这个图像会跟随着手指或鼠标移动。

    数据格式类似是在拖动对象与目标对象之间的一种契约协议,可能是代理显示的图像,也可能是纯粹的数据项,比如 List 对象中的项数据。如果只是简单的拖动一个显示对象(没有任何其它数据关联),开发者可以将显示对象作为拖动“数据”,类似代码:

    var dragData:DragData = new DragData();
    dragData.setDataForFormat("display-object-drag-format", theDisplayObject);

    可以使用任意的字符串“display-object-drag-format”,只需要拖动源与释放目标能相互识别即可:

    在  DragDropEvent.DRAG_ENTER 事件中,检测是否可以接受被拖动的对象:

    function(event:DragDropEvent, dragData:DragData):void
    {
        if(dragData.hasDataForFormat("display-object-drag-format"))
        {
            DragDropManager.acceptDrag(this);
        }
    }

    在 DragDropEvent.DRAG_DROP 事件侦听器中,使用 dragData.getDataForFormat() 方法来检索显示对象或其它数据。

    Jan

    30

    Feathers “pop-ups” 一些备注

    • 0 Comments
    • Flash Platform

    Feathers 包含了一个弹出窗口管理器(PopUpManager),管理 “pop-ups” (姑且称为它“弹出窗口”吧……,但在 pop-ups 的内容并不一定真的会是窗口……)内容。

    弹出窗口管理器允许开发者将弹出窗口内容置于所有其它 Starling 内容上面,并且提供了一些选项,比如模态化窗口或屏幕居中等功能。开发者还可以自定义弹出窗口的行为,比如弹出窗口内容的交互功能与显示列表中的位置等。

    假如焦点管理器(focus management)被启用时弹出窗口是一个模态化窗口,焦点管理器会为模态化窗口单独给出一个焦点管理器,以便防止模态化窗口下面的内容获得焦点。

    添加 pop-ups:

    使用 PopUpManager.addPopUp() 方法,可以将显示对象作为弹出窗口内容添加,必须先创建显示对象,如:

    var popUp:Image = new Image( texture );
    PopUpManager.addPopUp( popUp, true, true );

    第一个参数是弹出窗口内容,可以是任何 Starling 显示对象。

    第二个参数决定是否为模态化窗口(isModal)。

    第三个参数决定弹出窗口是否应该在舞台居中显示(isCentered)。如果舞台或弹出窗口尺寸发生变化,它会持续居中。

    第二和第三个参数是可选的。 如果省略,弹出窗口将是模态化窗口,并居中显示。 

    第四个参数也是可选的。允许开发者为模态化窗口传递自定义工厂方法用于设置“覆盖叠加”行为(指叠加模态化窗口下面的内容)。默认情况下,PopUpManager.overlayFactory 用于创建全局性的覆盖叠加行为,但也可以单独为某个弹出窗口设置覆盖叠加行为。

    移除 pop-ups:

    有两种方法可以移除弹出窗口。第一种方法是调用 PopUpManager.removePopUp() 方法。

    PopUpManager.removePopUp( popUp, true );

    第一个窗口是要移除的弹出窗口对象,如果传入的不是一个弹出窗口(pop-up)对象,就会产生运行时异常。第二个参数决定是否销毁对象(dispose)。

    也可以使用标准的 removeFromParent() 方法:

    popUp.removeFromParent( true );

    PopUpManager 会自动检测被移除的弹出窗口,如果是模态化窗口,“覆盖叠加”层也同时会被移除。

    居中 pop-ups:

    有两种方法可以让弹出窗口居中。

    第一种方法就是 PopUpManager.addPopUp() 方法的第三个参数设为 true。使用方法方法会让弹出窗口立即居中,并且会在舞台或窗口对象重置大小时持续居中。如果弹出窗口是一个 Feathers 组件,弹出窗口管理器(pop-up manager)就会在组件重置大小时让组件重新居中。如果普通的 Starling 显示对象则不行(普通的 Starling 显示对象在修改尺寸时并不会派发对应的事件)。

    第二种方法就是纯粹的调用 PopUpManager.centerPopUp() 方法,每调用一次就会执行居中算法一次。

    自定义 PopUpManager:

    通过定制 PopUpManager.overlayFactory,开发者可以更改模态化窗口的“覆盖叠加”行为与外观。默认情况下,全局的模态化窗口的叠加层是一个完全透明的 Quad 对象。可以自定义全局的“覆盖叠加层”:

    PopUpManager.overlayFactory = function():DisplayObject
    {
        var quad:Quad = new Quad(100100, 0x000000);
        quad.alpha = 0.75;
        return quad;
    };

    可以为单独的弹出窗口对象设置“覆盖叠加”行为:

    PopUpManager.addPopUp( popUp, true, true, function():DisplayObject
    {
        var quad:Quad = new Quad(100100, 0x000000);
        quad.alpha = 0.75;
        return quad;
    });

    开发者可以自定义 PopUpManager 的 root 属性,这是弹出窗口的根容器对象,默认情况下,PopUpManager 会直接将所有弹出窗口对象直接添加到 Starling 的 stage 对象。

    var popUpContainer:Sprite = new Sprite();
    this.stage.addChild( popUpContainer );
    PopUpManager.root = popUpContainer;

    如上代码,可以将所有弹出窗口对象都添加到 popUpContainer 容器中,这样可以确保弹出对象管理器的其它内容总是出现在所有羽毛内容的顶部(包括弹出对象)。

    Jan

    29

    在桌面开发时有一种常见的交互功能,就是通过键盘的 Tab 键切换获得焦点的对象,甚至通过键盘来执行按钮与滑块类的操作。Feathers 通过 FocusManager 类提供完全可选的焦点管理功能。一般来说,只应在桌面应用中启用焦点管理。 某些移动组件并未针对焦点管理进行优化。

    启用焦点管理:

    要使用焦点管理器功能,启动应用程序时只需要一行代码,然后用户就可以使用 Tab 键或 Shit + Tab 键在组件之间导航了。样例代码:

    FocusManager.setEnabledForStage( this.stage, true );

    如果开发的是一个桌面 AIR 程序拥有多个窗口,每个窗口有一个独立的舞台 Stage 对象,所以需要通过 setEnabledForStage() 方法为每个窗口单独设置一边。

    程序化的设置焦点:

    var focusManager:IFocusManager = FocusManager.getFocusManagerForStage( this.stage );
    focusManager.focus = button;

    这就好像是在 IFocusManager 实现类的对象上设置 focus 属性一样简单。

    要清除焦点,请将此属性设置为null:

    var focusManager:IFocusManager = FocusManager.getFocusManagerForStage( this.stage );
    focusManager.focus = null;

    自定义焦点顺序:

    默认情况下,在 Starling 世界里,通过键盘更改焦点对象时,是按显示列表中的顺序更改的。使用 getChildIndex() 方法和其它标准显示列表的 API,焦点管理器将以相对直观的顺序搜索显示列表,以找到可以接收焦点的下一个(或上一个)对象。

    如果焦点在转移的过程中与预期的效果不一样,可以通过 nextTabFocus 和 previousTabFocus 属性进行设置:

    var button1:Button = new Button();
    this.addChild( button1 );

    var button2:Button = new Button();
    this.addChild( button2 );

    button1.nextTabFocus = button2;
    button2.previousTabFocus = button1;

    焦点和弹出窗口:

    焦点管理器和弹出窗口管理器(pop-up manager)彼此知道如何沟通:

    a、如果弹出窗口是一个模态化窗口,会创建一个新的焦点管理器,这个新的焦点管理器会获得对键盘焦点的独占控制,所以模态化窗口口下面的内容都将无法接收焦点,直接到模态化窗口关闭。

    b、如果场景中同时有多个模态化窗口弹出,那么对应的会有更多的焦点管理器会被创建,并被添加到一个堆栈中,以确保最上面的模态化窗口会阻止所有下面内容的焦点。

    c、如果弹出窗口不是模态,则当前的焦点管理器将保持活动,并且一切都将能够接收焦点,包括弹出窗口和弹出窗口下面的所有内容。

    Jan

    29

    Feathers TextArea 一些备注

    • 0 Comments
    • Flash Platform

    TextArea 在备注文本编辑器资料时基本已经全部备注,其它的基本属性与功能(一些自动化相关的功能与皮肤样式等功能)也与 TextInput 组件类似。只是它是一个支持多行编辑功能的文本组件,而且文本框内的文本格式(字体样式)是需要一致的。

    TextArea 支持特殊的文本编辑器,需要实现 ITextEditorViewPort 接口。 默认的 TextArea 类的文本编辑器使用的是 TextFieldTextEditorViewPort 类(类似于 TextFieldTextEditor),它是通过 flash.text.TextField 来进行渲染的,因为传统的 TextField 是在原生舞台上,所以 skipUnchangedFrames 属性很可能会被禁用等。

    关于 skipUnchangedFrames 属性被禁用的资料请参看《skipUnchangedFrames 属性局限性》。

    另外就是它是带有滚动条的组件,滚动条的显示模式、交互功能、滚动策略与其它带有滚动条组件的备注资料是一致的,略。

    Jan

    29

    Feathers3 TextInput 一些备注

    • 0 Comments
    • Flash Platform

    TextInput 在备注文本编辑器资料时基本已经全部备注,只是 TextInput 除了文本编辑器部份外,还包含了一些自动化相关的功能与皮肤样式等功能。

    比如支持 prompt 功能:

    input.prompt = "Password";

    比如支持设置焦点与选择:

    input.setFocus();//程序化的获得焦点
    input.selectRange(0, input.text.length);//程序化的选择文本

    如果只是想简单的通过程序化的方式设置光标的位置,可以省略 selectRange()  第二参数:

    input.selectRange(0);

    TextInput 支持大量的类似 FLEX 框架中 TextInput 组件事件,如 Event.CHANGE、FeathersEventType.FOCUS_IN、FeathersEventType.FOCUS_OUT、FeathersEventType.ENTER 等事件。

    a、某些移动平台上 TextInput 组件可能并不会派发 FeathersEventType.ENTER 事件,具体取决于某些属性的值。这可能包括一些平台的默认值! 如果遇到此类问题,需要参考具体的“文本编辑器”的API文档,了解问题原因的限制和要求的完整详情。

    b、既便没有启用焦点管理器,TextInput 也会派发 FeathersEventType.FOCUS_IN、FeathersEventType.FOCUS_OUT 事件。

    maxChars 属性可以限制最大的输入字符数量;restrict 可以限制输入的字符。

    TextInput 可以设置多个状态的字体样式,如:fontStyles、disabledFontStyles、promptFontStyles、promptDisabledFontStyles 等。

    甚至可以自定义用户每个输入状态的字体样式,如:

    input.setFontStylesForState( TextInputState.ERROR,new TextFormat( "Helvetica"20, 0xcc0000 ) );

    当 TextInput  显示 errorString 属性时,会自动进入 TextInputState.ERROR 状态设置的文本样式。

    如果没有为某个状态设置字体样式,那么就会显示为默认的 fontStyles,比如一般我们没有设置 TextInputState.FOCUSED 状态的字体样式,所以显示的就是默认的 fontStyles。

    但是当 TextInput 获得焦点的时候,我们有可能会更改它的背景纹理。可以通过 setSkinForState() 方法实现,比如:

    var disabledSkin:ImageSkin = new ImageSkin( disabledTexture );
    input.scale9Grid = new Rectangle( 42210 );
    input.setSkinForState( TextInputState.DISABLED, disabledSkin );

    可以为 TextInput 添加一个图标(icon)。 可以为每个文本输入的状态定制图标(就像背景皮肤一样),比如,传递一个 starling.display.Image 对象:

    input.defaultIcon = new Image( iconTexture );

    如果只是简单的这样设置,这个默认的图标(defaultIcon)会在每个不同的状态都显示,如果想为单独的状态设置不同的图标,可以通过 setIconForState() 方法实现。

    TextInput 有一些常见的布局属性,如 paddingTop、paddingRight、paddingBottom、paddingLeft、padding 等。

    另一个比较有用的与布局有关的属性是 typicalText 。默认情况下,TextInput 的尺寸不会以输入的文本为尺寸进行计算,而是根据背景皮肤,填充和其他布局属性进行计算出来的。但有时候我们会需要根据文本的内容来显示对应尺寸的 TextInput ,比如一个 NumericStepper 组件,根据最大的可能的字符串来显示文本区域的尺寸可能是最合适的。

    Jan

    29

    TextFieldTextEditor 类使用 flash.text.TextField 渲染文本,基于软加速的。即可以使用设备字体也可以使用嵌入字体(TTF 或 OTF 格式)。将 TextField 对象的 type 属性设为 TextFieldType.INPUT。

    当 TextInput 获得焦点时,TextField 实例将显示在其他Starling内容上方的经典显示列表中,当失去焦点的时候,TextField 将被绘制到一个 BitmapData 对象并转换为 Starling 显示对象的纹理快照。这份快照可以添加到滚动容器,并且当没有焦点的时候可以被正确的裁切(失去焦点的时候 TextField 对象会自动 从原生舞台移除)。

    优缺点:

    传统原生的 TextField 对象可以使用设备字体,对于有许多字符的字体而言(如汉字),嵌入字体会使用大量的内存,使用设备字体可能是最佳选择。

    当TextInput 获得焦点时,此文本编辑器会在 Starling 上方的原生舞台层显示一个传统的 TextField 对象。失去焦点时 TextInput 对象可能本身显示在其它 Starling 对象的下面。一般来说,这种情况不会经常发生(除非开发者的布局设计本身有能是有问题的)。

    每段矢量文本都会被 draw 到 BitmapData 对象,再转换成 Starling 需要的纹理格式后提交到 GPU 使用。因此,当屏幕中有多个 TextFieldTextEditor 实例时,经常性的更改文本内容,可能会导致性能问题。

    flash.text.TextField 有时候性能会好于 Flash Text Engine,但这种性能差异可以忽略的。

    相对而言,TextFieldTextEditor 在移动设备上提供了比 StageTextTextEditor 稍微少一点的本地体验,高级功能类似复制 / 粘贴可能并不适合所有平台。TextFieldTextEditor 比较适合的情况是需要用到嵌入字体的时候。

    TextFieldTextEditor 对从右向左排版的语言文字和双向排版的语言文字支持功能比较有限,有时候可能无法正常显示。对这些语言推荐使用 StageText 或 Flash Text Engine。

    高级字体样式:

    该部份备注资料基本与《TextFieldTextRenderer 一些备注》相同,只是文本渲染器是通过 labelFactory 属性设置的,而文本编辑器是通过 textEditorFactory 属性设置的。

    一个文本渲染器的父组件有多个状态,如何更改它的高级字体样式: 

    该部份备注资料基本与《TextFieldTextRenderer 一些备注》相同。

    使用嵌入字体:

    该部份备注资料基本与《TextFieldTextRenderer 一些备注》相同。

    Jan

    28

    BitmapFontTextEditor 渲染文本时使用的是位图字体(bitmap fonts),这个文本编辑器与 Starling 是“深度整合”的,这意味着当文本编辑器获得焦点时,不会像 StageTextTextEditor 那样出现“叠加”效果。

    优缺点:

    由于 Adobe AIR 运行时功能限制,此文本编辑器不能在移动设备上使用。当文本编辑器获得焦点时, Adobe AIR 在 iOS 系上不会提供软键盘。此文本编辑器应该只用于桌面应用开发。

    位图字体的每个字符轮廓会变成纹理集中的子纹理,子纹理逐个的排列显示以组成单词和段落,如果文本具有特别风格化的外观(例如渐变和轮廓),位图字体能提供最佳性能,因为样式可以在设计时就完成,而不需要运行时动态生成消耗性能与内存。

    英语只有 26 个字母(除了一些需要用到的标点或其它特定的字符),一些语言可能需要成百上千,比如说中文……由于 GPU 纹理尺寸限制,除了使用其它文本渲染器外,就别无选择了。

    位图字体是可以被缩放的,但一般中人推荐缩小(因为放大模糊会比缩小模糊的更快)。可能会失去文本的细节,在较小号的字体时使用矢量字体有更好的清晰度,文字清晰了就更易于阅读。对相同字体但不同字号的情况,通常是制作多份字体的纹理集,但这会需要更多的内存。

    在同一个位图文本渲染器中,不支持多种字体样式(即一个字符只对应一个字符的轮廓图形)。

    高级字体样式:

    该部份备注资料基本与《BitmapFontTextRenderer 一些备注》相同,只是文本渲染器是通过 labelFactory 属性设置的,而文本编辑器是通过 textEditorFactory 属性设置的。

    一个文本渲染器的父组件有多个状态,如何更改它的高级字体样式:

    该部份备注资料基本与《BitmapFontTextRenderer 一些备注》相同。