« 【Flex2】 イベントハンドラをセットする | トップページ | Flex2 コントロール - ボタン - »

2006年7月14日 (金)

Flex2 コントロール - 入力系 -

Flex2では、標準で豊富なコントロールが用意されていますが、その中の入力系コントロールについての表示例と簡単な説明です。
コントロール サンプルページ
サンプルのMXMLファイル

  • TextInput
    通常のテキストボックスです。
    textプロパティで値を取得・設定できます。
    <mx:TextInput text="value" />
  • TextArea
    複数行のテキストエリアです。
    textプロパティで値を取得・設定できます。
    <mx:TextArea text="value" />
  • NumericStepper
    数値入力用のテキストボックスで、上下のボタンで指定した値を増減出来ます。
    valueプロパティで値を取得・設定できます。
    <mx:NumericStepper value="value" />
  • CheckBox
    チェックボックスです。
    selectedプロパティでチェック状態を取得・設定できます。 labelプロパティでラベルを設定します。
    <mx:CheckBox selected="true" label="Check1" />
  • RadioButton
    ラジオボタンです。
    selectedプロパティでチェック状態を取得・設定できます。
    groupNameプロパティに同じ名前を指定することで、グループ化します。
    labelプロパティでラベルを設定します。
    <mx:RadioButton groupName="group1" label="Radio1" selected="true" />
    <mx:RadioButton groupName="group1" label="Radio2" />
  • ComboBox
    コンボボックスです。
    selectedItemプロパティで選択された項目を取得できます。
    editableプロパティをtrueにすると入力も可能となります。デフォルトではfalseになっています。
    dataProviderに配列などを指定すると、データをバインドできます。
    promptプロパティには、未選択時の文字列を設定します。 選択を必須とする場合などに「選択してください...」といった文字列を入れておくとよいと思います。
    <mx:ComboBox editable="true" dataProvider="{data}" />
  • List
    リストボックスです。
    selectedItemプロパティで選択された項目を取得できます。
    editableプロパティをtrueにすると入力も可能となります。デフォルトではfalseになっています。
    dataProviderに配列などを指定すると、データをバインドできます。
    <mx:List editable="true" dataProvider="{data}" />
  • HSlider、VSlider
    スライダーコントロールです。
    HSliderは横向き、VSliderは縦向きに配置されます。
    labelsプロパティでラベルを設定します。(配列で複数設定)
    valueプロパティで値を取得・設定します。
    minimumプロパティで最小値を設定します。(デフォルトは0)
    maximumプロパティで最大値を設定します。(デフォルトは10)
    tickIntervalプロパティでメモリ間隔を設定します。(デフォルトは10)
    <mx:HSlider labels="['0','10']" value="5" tickInterval="1" />
  • DateField
    日付入力用のテキストボックスです。
    カレンダーを表示して日付を選択できます。
    デフォルトではカレンダーは英語表記となっています。
    yearSymbol、monthSymbol、monthNames、dayNames、formatStringなどのプロパティで表示をカスタマイズ出来ます。
    <mx:DateField>
        <mx:yearSymbol>年</mx:yearSymbol>
        <mx:monthNames>
            [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ]
        </mx:monthNames>
        <mx:monthSymbol>月</mx:monthSymbol>
        <mx:dayNames>["日", "月", "火", "水", "木", "金", "土"]</mx:dayNames>
        <mx:formatString>YYYY年MM月DD日</mx:formatString>
    </mx:DateField>
  • RichTextEditor
    フォント、文字サイズ、文字色などをユーザーが編集出来るテキストエリアです。
    textプロパティで値を取得・設定できます。
    htmlTextプロパティで書式情報も含めた値をHTML形式で取得・設定できます。
    <mx:RichTextEditor text="value" />

|

« 【Flex2】 イベントハンドラをセットする | トップページ | Flex2 コントロール - ボタン - »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10928815

この記事へのトラックバック一覧です: Flex2 コントロール - 入力系 -:

« 【Flex2】 イベントハンドラをセットする | トップページ | Flex2 コントロール - ボタン - »