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

9813 ワード
AIR ActionScript Flex ActionScript テキストリンク

はじめに

個人的によく使う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: "ううう"}]
);

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"}]
);

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