Apache Flexでよく使うUIコンポーネントの使い方

はじめに

個人的によく使うApache FlexのUIコンポーネントの使い方を簡単にまとめます。

ラベル

mxml

<s:Label text="普通のラベル" />
<s:Label text="赤色のラベル" color="#ff0000" />

text属性に設定した文字列が表示されます。
color属性を指定することで文字の色を変更できます。

ボタン

mxml

<s:Button label="普通のボタン" height="30"/>

<s:Button label="青色のボタン" height="30" color="#ffffff" fontWeight="bold" chromeColor="#3355cc"/>

label属性に設定した文字列が表示されます。
高さはいつも30pxにすることが多いです。
青色のボタンもよく使います。

テキストインプット

mxml

<s:TextInput id="ti1" />

ActionScript側でti1.textのようにアクセスすることで値の取得や設定ができます。

テキストエリア

mxml

<s:TextArea id="ta1" />

テキストインプットと同様に、
ActionScript側でta1.textのようにアクセスすることで値の取得や設定ができます。

ラジオボタン

mxml

<s:RadioButton id="rb1" label="あああ" groupName="group1" selected="true" />
<s:RadioButton id="rb2" label="いいい" groupName="group1" />

label属性に設定した文字列が表示されます。
ActionScript側でrb1.selectedのようにアクセスすることでラジオボタンの選択状態を取得できます。
（ラジオボタンが選択されている場合は、trueになります）

チェックボックス

mxml

<s:CheckBox id="cb1" label="あああ" />

label属性に設定した文字列が表示されます。
ActionScript側でcb1.selectedのようにアクセスすることでチェックボックスの選択状態を取得できます。
（チェックボックスが選択されている場合は、trueになります）

ドロップダウンリスト

mxml

<s:DropDownList id="ddl1" labelField="value" dataProvider="{ac}" selectedIndex="0" />

ActionScript

import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection(
    [{value: "あああ"}, {value: "いいい"}, {value: "ううう"}]
);

dataProvider属性でArrayCollectionのデータとバインディングして利用することが多いです。
labelField属性でArrayCollectionのデータのどのキーの値を表示に利用するかを指定します。
ActionScript側でddl1.selectedIndexのようにアクセスすることでドロップダウンリストの選択状態を取得できます。

データグリッド

mxml

<s:DataGrid dataProvider="{ac2}" >
    <s:columns>
        <s:ArrayList>
            <s:GridColumn headerText="列１" dataField="c1" />
            <s:GridColumn headerText="列２" dataField="c2" />
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

ActionScript

import mx.collections.ArrayCollection;

[Bindable]
private var ac2:ArrayCollection = new ArrayCollection(
    [{c1: 100, c2: "aaa"}, {c1: 200, c2: "bbb"}, {c1: 300, c2: "ccc"}]
);

dataProvider属性でArrayCollectionのデータとバインディングして利用することが多いです。