在移动设备应用程序中使用文本的指导原则

有些 Spark 文本控件已经过优化，适合在移动设备应用程序中使用。可能的情况下，请使用以下文本控件：

Spark TextArea
Spark TextInput
Spark Label

这些允许用户交互的文本控件（TextArea 和 TextInput）使用 StageText 类作为基础输入机制。StageText 挂接到基础 OS 的本机文本控件。因此，这些文本控件像本机控件一样，而不像典型的 Flex 控件那样运行。

在设备上使用 StageText 的优点是可获得以下功能（如果设备支持这些功能）：

本机性能以及软键盘的观感
自动完成
自动纠正
触控式文本选择
可自定义的软键盘
按键限制

Adobe 宣讲师 Christian Cantrell 介绍了使用基于 StageText 的控件的优缺点。

基于 TextField 版的 TextArea 和 TextInput 控件也供可用。您可以使用这些版本来嵌入字体，或使用在基于 StageText 版上不可用的某些其它功能。

移动设备文本控件的外观

创建移动设备应用程序时，Flex 将自动应用移动设备主题。因此，Spark TextInput 和 TextArea 控件默认情况下使用下列基于 StageText 的移动设备外观：

StageTextAreaSkin 和 StageTextInputSkin 类已针对移动设备应用程序进行了优化，并且基于 StageTextSkinBase 类。它们充当本机文本输入类的包装器。但是，它们不支持非基于 TextField 外观的下列功能：

基于 TextField 的控件支持	基于 TextField 的控件不支持
滚动表单文本测量剪切嵌入字体小数 Alpha 值 Flash 文本引擎 (FTE) 访问低级别的键盘事件，如 `keyUp` 和 `keyDown`	文本布局框架 (TLF) 双向性和镜像压缩字体格式 (CFF) 使用 RichEditableText 呈现文本 HTML 文本

基于 TextField 的控件支持

基于 TextField 的控件不支持

滚动表单

文本测量

剪切

嵌入字体

小数 Alpha 值

Flash 文本引擎 (FTE)

访问低级别的键盘事件，如 keyUp 和 keyDown

文本布局框架 (TLF)

双向性和镜像

压缩字体格式 (CFF)

使用 RichEditableText 呈现文本

HTML 文本

其中一些限制可通过使用基于 TextField 的版本来解决。要使用基于 TextField 版的文本输入控件，请将其外观类指向 TextField 版的 TextInputSkin 和 TextAreaSkin；例如：

<s:TextInput skinClass="spark.skins.mobile.TextInputSkin" text="TextField-based Skin"/>

Spark Label 控件不使用外观，但也不使用 TLF。

移动设备应用程序中的 TLF

通常情况下，移动设备应用程序中应避免出现使用文本布局框架 (TLF) 的文本控件。TextArea 和 TextInput 控件的移动设备外观已针对移动设备应用程序进行优化，不像其桌面应用程序和基于 Web 的应用程序一样使用 TLF。TLF 在应用程序中用于提供一组丰富的控件，以控制文本呈示。

在移动设备应用程序中应避免使用以下文本控件，因为它们使用 TLF 并且其外观未针对移动设备应用程序进行优化：

Spark RichText
Spark RichEditableText

使用软键盘进行输入

当用户将焦点放在可接受输入的文本控件上时，无键盘的移动设备将显示软键盘。您可以在某种程度上控制软键盘的可用按键和其它属性。例如，您可以启用自动纠正和自动大写功能，可以从几种预定义的键盘布局中进行选择。

有关更多信息，请参阅在移动设备应用程序中使用软键盘。

使用文本输入控件进行滚动

TextInput 和 TextArea 控件的默认移动设备外观不支持滚动表单。也就是说，您不能在要求控件进行滚动的表单或视图中显示这些控件。如果您这样做，控件的执行方式会导致出现可视失真。

要在滚动容器中使用文本输入控件，请使用基于 TextField 的外观，而不是基于 StageText 的外观。有关更多信息，请参阅与 StageText 相关的滚动注意事项。

使用文本输入控件进行过渡

为了使动画更加平滑，每当播放动画时，运行时都会将 StageText 控件替换为从这些控件捕获的位图。这会导致在过渡动画的最初会有一个轻微的延迟，并在开始和结束动画时造成一些视觉效果。

产生轻微延迟的原因是需要时间来捕获组件中文本的位图表示形式。当基于 StageText 的控件的面积增大且数量增多时，延迟也相应地增加。要降低延迟，请避免以动画形式表现大面积的基于 StageText 的组件或数量众多的这种组件。

使用文本输入控件的弹出窗口

当显示弹出窗口时，最顶层弹出窗口以外的基于 StageText 的文本输入将被替换为位图表示形式。因此：

使用模态弹出窗口，而不要使用非模态弹出窗口。当显示模态弹出窗口时，弹出窗口以外的组件将不再能够与用户交互。在这种情况下，使用位图替换 StageText 不太明显。
基于 StageText 的组件应当仅在实施 IFocusManagerContainer 接口的弹出窗口内使用。例如，使用 SkinnableContainer 或其派生类型之一作为弹出窗口的基础。
当较低层中的文本组件应保持活动状态时，使用 Callout 容器。如果文本组件中包含 Callout，该文本组件将保持活动状态并将 Callout 的箭头设置为指向该文本组件。这样可以自然地提示用户该文本组件仍然可以使用。
避免同时使用多个弹出窗口。如果同时有多个弹出窗口可见，仅可以与最顶层的弹出框口进行交互。但是，如果这些弹出窗口没有发生重叠，则用户将无法确定哪一个弹出窗口位于最顶层。
当非模态弹出窗口与文本控件重叠时，调整弹出窗口的位置以达到几乎完全重叠。如果用户看不到文本，他们将不太可能认为仍然可以与文本控件进行交互。

在移动设备应用程序中嵌入字体

您不能在使用 StageText 的文本输入控件中使用嵌入字体。应对文本输入控件使用基于 TextField 的外观。也不能对 Label 控件使用嵌入字体，因为该控件使用 FTE，要求使用基于 CFF 的字体。CFF 字体并不十分适合于移动设备应用程序。

有关更多信息，请参阅在移动设备应用程序中嵌入字体。

StageText 控件类层次结构

StageText 类（TextInput 和 TextArea）具有复杂的类层次结构。基础类自身具有下列层次结构：

    UIComponent 
        | 
SkinnableComponent 
        | 
SkinnableTextBase 
        | 
TextInput/TextArea

与所有 Spark 类一样，外观类有自己的层次结构：

    UIComponent 
        | 
    MobileSkin    StyleableStageText 
        |              | 
StageTextSkinBase: textDisplay 
        | 
StageTextInputSkin/StageTextAreaSkin

在基础外观类中，textDisplay 属性以 StyleableStageText 对象的形式提供了到本机文本输入的挂接。此类也负责定义基于 StageText 的文本输入控件上的可用样式。

在移动设备应用程序中使用 Label 控件

Spark Label 控件最适用于不可编辑、不可选择的单文本行。

下例在移动设备应用程序中使用了一个简单的 Label 控件：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/SimpleLabel.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Simple Label">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <s:Label text="This is a simple Label control."/>
    
</s:View>

Label 控件使用 FTE，它的性能不如已针对移动设备应用程序进行优化的文本控件（例如 TextInput 和 TextArea）。但是 Label 控件不使用 TLF，因此性能通常优于实现 TLF 的控件，例如 RichText 和 RichEditableText。

通常，在移动设备应用程序中，应谨慎使用 Spark Label 控件。在外观或项呈示器中不要使用 Spark Label 控件。在创建基于 ActionScript 的项呈示器时，请使用 StyleableTextField 类来呈示文本。对于基于 MXML 的组件，您仍然可以使用 Label。

在移动设备应用程序中嵌入字体时请不要使用 Label 控件，因为 Label 控件使用 CFF。应改为使用基于 TextField 版的 TextArea 控件。有关更多信息，请参阅在移动设备应用程序中嵌入字体。

在移动设备应用程序中使用 TextArea 控件

Spark TextArea 控件是允许用户输入和编辑多行文本的文本输入控件。它针对移动设备应用程序进行了优化。

TextArea 控件的默认行为是使用提供了到基础 OS 本机方法的挂接的软键盘。因此，它支持自动纠正、自动完成和软键盘自定义等功能。

下例在移动设备应用程序中使用了一个 TextArea 控件：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/SimpleTextArea.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="Simple TextArea">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            // Note the use of \n to add line feeds/carriage returns
            // and \" to add quotation marks.
            [Bindable]
            public var myText:String ="\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\"\n\n\"Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\"";
        ]]>
    </fx:Script>
    
    <!-- Basic TextArea control with multiple lines of text. -->
    <s:TextArea id="myTA" height="75%" text="{myText}" 
                paddingLeft="20" paddingTop="20" 
                paddingRight="20" paddingBottom="20"/>
        
</s:View>

在移动设备应用程序中，TextArea 控件默认为其外观使用 StageTextAreaSkin 类。此外观使用 StyleableStageText 类而不是 RichEditableText 类来呈示文本。因此，TextArea 控件不支持 TLF。它仅支持非移动设备外观 TextArea 控件上的一部分可用样式。

如果您需要一个非交互式多行文本块，请将 TextArea 控件的 editable 属性设置为 false。（运行时不会考虑 selectable 属性。）您也可以通过将 borderVisible 属性设置为 false 来删除边框。您可以通过设置 contentBackgroundColor 和 contentBackgroundAlpha 属性来更改背景颜色。

下例创建了一个与应用程序背景融合在一起的非交互式文本块：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/BlockOfText.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Block of Text">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:HGroup>
        <s:Image source="@Embed(source='../../assets/myImage.jpg')" width="30%"/>  
        <!-- Create a multi-line block of text. -->
        <s:TextArea width="65%" 
                editable="false" 
                borderVisible="false" 
                contentBackgroundColor="0xFFFFFF" 
                contentBackgroundAlpha="0" 
                height="400"
                text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
    </s:HGroup>
    
</s:View>

因为 TextArea 控件不支持 TLF，所以无法使用 textFlow、content 或 selectionHighlighting 属性。此外，也无法使用以下方法：

getFormatOfRange()
setFormatOfRange()

在移动设备应用程序中使用 TextInput 控件

Spark TextInput 控件是允许用户输入和编辑单行文本的文本输入控件。它针对移动设备应用程序进行了优化。

TextInput 控件的默认行为是使用提供了到基础 OS 本机方法的挂接的软键盘。因此，它支持自动纠正、自动完成和软键盘自定义等功能。

下例显示了在移动设备应用程序中具有提示文本和自定义焦点外框的 TextInput 控件：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/SimpleTextInput.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Simple TextInput">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout 
            paddingTop="20" 
            paddingLeft="20" 
            paddingRight="20"/>
    </s:layout>
    
    <s:TextInput 
        prompt="Enter text here" 
        focusColor="green" 
        focusThickness="5" 
        focusAlpha=".1"/>
    <s:TextInput 
        prompt="Enter text here, too" 
        focusColor="red" 
        focusThickness="5" 
        focusAlpha=".1"/>

</s:View>

在移动设备应用程序中，TextInput 控件默认为其外观使用 StageTextInputSkin 类。此外观使用 StyleableStageText 类而不是 RichEditableText 类来呈示文本。因此，TextInput 控件不支持 TLF。它仅支持非移动设备外观 TextInput 控件上的一部分可用样式。

在移动设备应用程序中使用 RichText 和 RichEditableText 控件

在移动设备应用程序中，应尽量避免使用 RichText 和 RichEditableText 控件。这些控件不具有移动设备外观，并且未针对移动设备应用程序进行优化。如果使用这些控件，则需要使用 TLF，这样做会产生非常高昂的计算成本。

MX 文本控件

不能在移动设备应用程序中使用 MX 文本控件，例如 MX Text 和 MX Label。请改用相当于 Spark 的控件。

在移动设备应用程序中设置文本输入控件的样式

TextInput 和 TextArea 控件仅支持移动设备主题中的一部分样式。StyleableStageText 类定义了这些样式。

以下是移动设备应用程序中 TextInput 和 TextArea 支持的仅有的几个样式：

color
contentBackgroundAlpha
contentBackgroundColor
焦点外框样式：focusAlpha、focusBlendMode、focusColor 和 focusThickness
fontFamily
fontStyle
fontSize
fontWeight
locale
内边距样式：paddingBottom、paddingLeft、paddingRight 和 paddingTop
showPromptWhenFocused
textAlign

在移动设备应用程序中，Label 控件支持这些样式以及 textDecoration 样式。

使用 fontFamily 样式

在默认的移动设备外观中，fontFamily 属性不支持逗号分隔的字体列表。您只能指定一个字体，运行时会尝试将此字体映射到设备上的现有字体。

例如，如果您指定“Arial”，设备会以 Arial 字体呈现文本（如果该字体可用）。如果该字体不可用，运行时会做出最佳预测，确定使用什么类型的字体来代替它。如果您指定了运行时无法识别的字体名称，设备会以默认字体呈现文本。移动设备上的默认设置通常是 sans-serif 字体。

您可以指定 _sans、_serif 或 _typewriter，以始终在移动设备上相应地获得 sans-serif、serif 或代码字体。

下例显示了根据 fontFamily 样式的值呈现文本的方式：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/FontFamilyExample.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="The fontFamily style">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:TextInput prompt="This is _sans" fontSize="14" fontFamily="_sans"/>
    <s:TextInput prompt="This is _serif" fontSize="14" fontFamily="_serif"/>
    <s:TextInput prompt="This is _typewriter" fontSize="14" fontFamily="_typewriter"/>
    <s:TextInput prompt="This is Arial" fontSize="14" fontFamily="arial"/>
    <s:TextInput prompt="This is Times" fontSize="14" fontFamily="times"/>
    <s:TextInput prompt="This is Times New Roman" fontSize="14" fontFamily="Times New Roman"/>

    <!-- Try a gibberish font name to see what the device's default font is: -->
    <s:TextInput prompt="This is bugblatter" fontSize="14" fontFamily="bugblatter"/>

</s:View>

在文本输入控件上创建自定义移动设备外观

通过使用 MXML 和 ActionScript，您可以在移动设备应用程序中控制文本输入控件的一些可视外观和行为。例如，可以设置 TextArea 和 TextInputFor 控件上的边框颜色或切换边框的外观。在某些情况下，您必须创建一个自定义外观以更改文本控件特定部分的外观。

StageTextAreaSkin 和 StageTextInputSkin 类定义了移动设备主题中默认的 TextInput 和 TextArea 外观。这些外观通过 StageTextSkinBase 类确定了其大部分布局和主色逻辑。

要创建自定义外观，请创建定义新外观的自定义 StageTextSkinBase 类。然后创建扩展此自定义类的自定义 StageTextAreaSkin 或 StageTextInputSkin 类。

有关为移动设备主题创建自定义外观的更多信息，请参阅移动设备外观设计的基础知识。

限制文本输入控件中的按键

当为文本输入控件使用基于 StageText 的外观时，可以通过使用 TextInput 或 TextArea 控件的 restrict 属性来限制所允许的字符。

restrict 属性的默认值是 null，表示默认情况下用户可以输入任何字符。

restrict 属性包含一系列允许使用的字符。对于范围，请使用连字符 (-)。不要以空格、逗号或其它字符分隔范围，除非您希望将该字符包含在定义中。下例显示了几个使用限制语法的示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/RestrictStrings.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Examples of restrict">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout paddingTop="20" paddingLeft="20" paddingRight="20"/>
    </s:layout>
    
    <s:TextInput prompt="Alpha-numeric only" restrict="a-zA-Z0-9"/>

    <s:TextInput prompt="Numbers only" restrict="0-9"/>

    <s:TextInput prompt="All chars, only uppercase alpha" restrict="^a-z"/>

    <!-- ASCII chars 32 (space) through 126 (tilde) only: -->
    <s:TextInput prompt="" restrict="\u0020-\u007E"/>

    <s:TextInput prompt="All chars but not the caret or hyphen" restrict="^\^\-"/>

</s:View>

restrict 属性的字符串值从左向右读；脱字符 (^) 后的所有字符都是禁用字符。例如：

ta1.restrict = "A-Z^Q"; // All uppercase alpha characters, but exclude Q

如果字符串中的第一个字符是脱字符 (^)，则表示允许使用除脱字符后的字符外的所有字符。例如：

ta1.restrict = "^a-z"; // All characters, but exclude lowercase alpha

可以使用反斜线字符来转义特殊字符。例如，要限制使用脱字符：

ta1.restrict = "^\^"; // All characters, but exclude the caret

您可以使用 \u 来输入 ASCII 键码；例如：

ta1.restrict = "\u0020-\u007E"; // ASCII chars 32 through 126 only

posted @ 2014-03-27 18:04 腐烂的翅膀阅读(291) 评论(0) 编辑收藏举报

刷新页面返回顶部

腐烂的翅膀

在移动设备应用程序中使用文本的指导原则