| Flex講座 | ||
|---|---|---|
 Adobe Flex2.0について |
||
Flexのコンポーネントの紹介
Flexのコントロールコンポーネントの説明です■ボタン (Button)
ボタンをクリックするとﾒｯｾｰｼﾞが表示されますclickプロパティでクリック字の関数を指定します
<mx:Button x="26" y="26" label="ボタン" click="onClick()"/>
クリック時の関数を記述します
Aleart.show()を使用して、ﾒｯｾｰｼﾞを表示しています
<mx:Script>
<![CDATA[
import mx.controls.*;
//buttonクリック用
private function onClick():void{
Alert.show("Hello kaname's hackday!!");
}
]]>
</mx:Script>
<![CDATA[
import mx.controls.*;
//buttonクリック用
private function onClick():void{
Alert.show("Hello kaname's hackday!!");
}
]]>
</mx:Script>
■Text
入力不可のテキスト
<mx:Text x="26" y="92" text="Text 複数行可能" width="172" color="#E41E85" height="29"/>
■TextArea
複数行で入力可能なテキストエリアです
<mx:TextArea x="26" y="129" text="TextArea 複数行で入力可能" width="172"/>
■TextInput
単一行で入力可能なテキストボックス
<mx:TextInput x="26" y="190" text="TextInput 単一行で入力可能" width="172"/>
■ラベル (Label)
ラベルです
<mx:Label x="26" y="66" text="Label" width="172" color="#3B18A0"/>
■コンボボックス (comboBox)
コンボボックスですchangeプロパティで、選択しているItemが変更された時に実行される関数を設定できます
<mx:ComboBox id="combo" x="26" y="230" change="comboChange()" width="172">
<mx:ArrayCollection>
<mx:String>ComboBox</mx:String>
<mx:String>kaname</mx:String>
<mx:String>hackday</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:ArrayCollection>
<mx:String>ComboBox</mx:String>
<mx:String>kaname</mx:String>
<mx:String>hackday</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
ComboBoxのidを使用し、現在選択しているItemを
combo.selectedItemで取得し、String形式で取得しています。
取得したデータをAleart.show()で表示します
<mx:Script>
<![CDATA[
import mx.controls.*;
//comboBox選択時
private function comboChange():void{
var selectStr:String = String(combo.selectedItem);
Alert.show(selectStr + "です");
}
]]>
</mx:Script>
<![CDATA[
import mx.controls.*;
//comboBox選択時
private function comboChange():void{
var selectStr:String = String(combo.selectedItem);
Alert.show(selectStr + "です");
}
]]>
</mx:Script>
■リスト (List)
リストの表示ですdataproviderプロパティを使用して、ArrayCollectionタグ内のデータを取得しています。
この時、データをバインドするため {id} という形式で取得します。
選択したItemが変更された時、listChange()が実行されます
<mx:List id="list" dataProvider="{list_data}" change="listChange()" x="26" y="271" height="100" width="172"/>
<mx:ArrayCollection id="list_data">
<mx:String>ComboBox</mx:String>
<mx:String>web@Youtility</mx:String>
<mx:String>kaname's hackday</mx:String>
</mx:ArrayCollection>
<mx:ArrayCollection id="list_data">
<mx:String>ComboBox</mx:String>
<mx:String>web@Youtility</mx:String>
<mx:String>kaname's hackday</mx:String>
</mx:ArrayCollection>
選択されたItem変更時に実行される関数の設定です
list.selectedItemで選択されたItemを取得し、表示しています
<mx:Script>
<![CDATA[
import mx.controls.*;
//List選択時
private function listChange():void{
var selectStr:String = String(list.selectedItem);
Alert.show(selectStr + "です");
}
]]>
</mx:Script>
<![CDATA[
import mx.controls.*;
//List選択時
private function listChange():void{
var selectStr:String = String(list.selectedItem);
Alert.show(selectStr + "です");
}
]]>
</mx:Script>
最後に上記のコンポーネントを簡単に実装させた例です
http://smileboys.fc2web.com/WebUtility/flex/swf/compornent01.html
