Gumbo FxTextInput - Functional and Design Specification

Glossary

The Glossary in the Gumbo Text Primitives spec is useful for understanding this spec.

TextView - A new Gumbo text primitive, covered in the Gumbo Text Primitives spec, which is used in skins for Gumbo's FxTextInput and FxTextArea. It provides a scrollable but chromeless rectangle of editable rich text, without background, border, or scrollbars. TextView is based on FTE and TLF, so it takes advantage of the new text capabilities in Flash Player 10.

FxTextBase - A new Gumbo base class for skinnable components whose skins contain a TextView. It is also covered in the Gumbo Text Primitives spec.

Summary and Background

Gumbo's FxTextInput allows the user to enter and edit a single line of single-styled text. It extends FxTextBase – for details, see the Gumbo Text Primitives spec – and uses a TextView primitive in its skin to display the editable text. FxTextBase and TextView do most of the work, so understanding them first is very important.

Usage Scenarios

Gumbo's FxTextInput is used in the same way as Halo's TextInput: when you need a single line of editable text, such as for entering a username.

Detailed Description

The default skin for a Gumbo FxTextInput includes a TextView as a required [SkinPart]. A typical skin for FxTextInput will also draw a border and opaque background using <Rect> tags.

Be sure to read about what FxTextInput inherits from FxTextBase. In addition...

Like TextView, FxTextInput determines its measuredWidth using a widthInChars property rather than measuring the text assigned to it, because the text frequently starts out empty. Its measuredHeight is determined by the height of the font.

FxTextInput redispatches its TextView's enter event.

TextInput supports horizontal autoscrolling.

API Description

Class FxTextInput

package mx.components
{

//--------------------------------------
//  Events
//--------------------------------------

/**
 *  Dispatched when the user presses the Enter key.
 */
[Event(name="enter", type="mx.events.FlexEvent")]

//--------------------------------------
//  Other metadata
//--------------------------------------

[DefaultProperty("text")]

public class FxTextInput extends FxTextBase
{
    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------

    /**
     *  Constructor.
     */
    public function FxTextInput()

    //--------------------------------------------------------------------------
    //
    //  Properties
    //
    //--------------------------------------------------------------------------

    //----------------------------------
    //  widthInChars
    //----------------------------------

    /**
     *  The default width for the FxTextInput, measured in characters.
     *  The width of the "0" character is used for the calculation,
     *  since in most fonts the digits all have the same width.
     *  So if you set this property to 5, it will be wide enough
     *  to let the user enter 5 digits.
     *
     *  @default 20
     */
    public function get widthInChars():int
    public function set widthInChars(value:int):void
}

}

B Features

Implement displayAsPassword, maxChars, and restrict as in the Halo TextInput.

Implement a prompt property and some way to format the prompt. The idea is that you'd set the prompt to something like "Last name" and as soon as you started entering your last name, the prompt would disappear. This allows smaller UIs, especially on mobile devices, because the FxTextInput doesn't need a descriptive label next to it.

Examples and Usage

<FxTextInput widthInChars="5" fontSize="10"/>

Additional Implementation Details

None.

Prototype Work

None.

Compiler Work

None.

Web Tier Compiler Impact

None.

Flex Feature Dependencies

FxTextInput is dependent on TextView.

Backwards Compatibility

Syntax changes

None.

Behavior

None.

Warnings/Deprecation

None.

Accessibility

See the TextView spec.

Performance

See the TextView spec.

Globalization

See the TextView spec.

Localization

Compiler Features

None.

Framework Features

None.

Issues and Recommendations

None.

Documentation

None.

QA

TBD