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

• Spark TextArea

• Spark TextInput

• Spark Label

• 本机性能以及软键盘的观感

• 自动完成

• 自动纠正

• 触控式文本选择

• 可自定义的软键盘

• 按键限制

• StageTextAreaSkin

• StageTextInputSkin

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

• Spark RichText

• Spark RichEditableText

• 使用模态弹出窗口，而不要使用非模态弹出窗口。当显示模态弹出窗口时，弹出窗口以外的组件将不再能够与用户交互。在这种情况下，使用位图替换 StageText 不太明显。

• 基于 StageText 的组件应当仅在实施 IFocusManagerContainer 接口的弹出窗口内使用。例如，使用 SkinnableContainer 或其派生类型之一作为弹出窗口的基础。

• 当较低层中的文本组件应保持活动状态时，使用 Callout 容器。如果文本组件中包含 Callout，该文本组件将保持活动状态并将 Callout 的箭头设置为指向该文本组件。这样可以自然地提示用户该文本组件仍然可以使用。

• 避免同时使用多个弹出窗口。如果同时有多个弹出窗口可见，仅可以与最顶层的弹出框口进行交互。但是，如果这些弹出窗口没有发生重叠，则用户将无法确定哪一个弹出窗口位于最顶层。

• 当非模态弹出窗口与文本控件重叠时，调整弹出窗口的位置以达到几乎完全重叠。如果用户看不到文本，他们将不太可能认为仍然可以与文本控件进行交互。

    UIComponent 
        | 
SkinnableComponent 
        | 
SkinnableTextBase 
        | 
TextInput/TextArea

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

<?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>

<?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>

<?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>

• getFormatOfRange()

• setFormatOfRange()

<?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>

• color

• contentBackgroundAlpha

• contentBackgroundColor

• 焦点外框样式：focusAlpha、focusBlendMode、focusColor 和 focusThickness

• fontFamily

• fontStyle

• fontSize

• fontWeight

• locale

• 内边距样式：paddingBottom、paddingLeft、paddingRight 和 paddingTop

• showPromptWhenFocused

• textAlign

<?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>

<?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>

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

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