新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


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>


■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>




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>



■リスト (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>



選択された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>





最後に上記のコンポーネントを簡単に実装させた例です
http://smileboys.fc2web.com/WebUtility/flex/swf/compornent01.html
スポンサーサイト

テーマ:Adobe Flex3 - ジャンル:コンピュータ

<<MVCモデルとは | ホーム | 恋空を越える?ケータイ小説『赤い糸』>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/74-bd6a1404
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。