Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > NumericStepper コントロール

NumericStepper コントロール

NumericStepper コントロールを使用すると、順序付けられた数値の集合から特定の値を選択できます。NumericStepper コントロールは、単一行のテキスト入力フィールドと、値を段階的に増減するための 2 つの矢印ボタンで構成されます。また、キーボードの上下矢印キーを使って値を増減することもできます。

次の例は NumericStepper コントロールを示しています。

このサンプルを作成するためのコードの詳細については、NumericStepper コントロールの作成を参照してください。

ユーザーが上矢印をクリックすると、表示された値が 1 単位分増加します。矢印を押し下げたままの状態にすると、ユーザーがマウスボタンを離すまで値が増加または減少し続けます。矢印をクリックすると、それがハイライト表示されてユーザーに示されます。

有効な値であれば、直接テキストフィールドに入力することもできます。編集可能な ComboBox コントロールも同様の機能を実装していますが、ドロップダウンリストが展開されることによって重要なデータが覆い隠されてしまうことがあるため、用途によっては NumericStepper コントロールのほうが都合がよい場合があります。

NumericStepper コントロールの矢印は、常にテキストフィールドの右側に表示されます。

NumericStepper コントロールには、次のデフォルトプロパティがあります。

サブトピック

NumericStepper コントロールの作成

NumericStepper コントロールは、次のように、<mx:NumericStepper> タグを使用して MXML 内で定義します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\numericstepper\NumStepSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:NumericStepper id="nstepper1" value="6" stepSize="2"/>
</mx:Application>

NumericStepper コントロールのサイズ設定

NumericStepper コントロール自体のサイズが変わっても、上下矢印ボタンの大きさは変化しません。NumericStepper コントロールにデフォルトの高さを超えるサイズを設定した場合は、ステッパーボタンがコントロールの上下に固定されます。

ユーザーの操作

ユーザーが上下矢印ボタンをクリックすると、表示された値が 1 単位分増減します。いずれかの矢印ボタンを 200 ミリ秒以上、押し続けた場合、ユーザーがマウスボタンを離すか、最大値または最小値に到達するまで、指定された増分単位に基づいて入力フィールドの値が増減を続けます。

キーボード操作

NumericStepper コントロールでは、次のようなキーボード操作を実行できます。

キーボードを使用して NumericStepper 内を移動するには、キーボードにフォーカスがある必要があります。

Flex 2.01