Flex 4学習ノート(一)−基本コントロールの使用

6243 ワード
flexコンポーネントの使用
1.最も簡単な例として、ボタンクリックイベント
<fx:Script> 
    <![CDATA[ 
        import mx.controls.Alert; 
        protected function btn_clickHandler(event:MouseEvent):void
        { 
            var btn:Button = event.target as Button; 
            Alert.show(btn.id); 
        } 
    ]]> 
</fx:Script> 
 
<fx:Declarations> 
    <!--  （ 、 ）  --> 
</fx:Declarations> 
<s:Button x="132" y="179" label=" 1" id="btn1" click="btn_clickHandler(event)"/> 
<s:Button x="280" y="179" label=" 2" id="btn2" click="btn_clickHandler(event)" />

 2.画像の例をロードし、画像の幅と高さを手動で設定できます.
  
<fx:Script> 
    <![CDATA[ 
 
        protected function button1_clickHandler(event:MouseEvent):void
        { 
            img.width = Number(imgWidth.text); 
            img.height = Number(imgHeight.text); 
        } 
 
    ]]> 
</fx:Script> 
 
<fx:Declarations> 
    <!--  （ 、 ）  --> 
</fx:Declarations> 
<mx:Image x="106" y="162" source="@Embed('/test/1.jpg')" width="211" height="182" id="img"/> 
<s:Button x="220" y="38" label=" " click="button1_clickHandler(event)"/> 
<s:TextInput x="109" y="38" width="35" id="imgWidth"/> 
<s:TextInput x="162" y="38" width="35" id="imgHeight"/>

 
私は1.jpgはtestパッケージに入っていますが、パスを書くには@Embed('/test/1.jpg')と書く必要があります.そうしないと、「変換コードを解析できません」というエラーが発生します.
Number()は、与えられた値を数値値に変換するために使用され、使い方が簡単です.
画像をロードする必要がある場合は、と書くことができます.
 
3.swfをロードする例
<mx:SWFLoader x="5" y="5" source="@Embed('a.swf')" scaleContent="false" autoLoad="true" width="600" height="500"/>

 4.パレットの使用
 
 
  
<fx:Script> 
    <![CDATA[ 
        import mx.events.ColorPickerEvent; 
 
        protected function colorpicker1_changeHandler(event:ColorPickerEvent):void
        { 
            text1.setStyle("color",event.color); 
        } 
 
    ]]> 
</fx:Script> 
 
<s:TextInput id="text1" x="114" y="120" color="#FF0000"/> 
<mx:ColorPicker x="250" y="120" change="colorpicker1_changeHandler(event)"/>

 
5.ドロップダウンボックスDropDownListとComboBoxの使用
<fx:Script> 
    <![CDATA[ 
        import mx.collections.ArrayCollection; 
          
        [Bindable] 
        private var dp:ArrayCollection = new ArrayCollection([{id:1,name:' '},{id:2,name:' '},{id:3,name:' '}]); 
          
        protected function func(item:Object):String
        { 
            return " ：" + item.name; 
        } 
 
    ]]> 
</fx:Script> 
 
<s:DropDownList x="157" y="89" dataProvider="{dp}" labelField="name" selectedIndex="0"/> 
<s:DropDownList x="157" y="159" dataProvider="{dp}" labelFunction="func" selectedIndex="0"/> 
  
<s:ComboBox x="291" y="89" dataProvider="{dp}" labelField="name" selectedIndex="0"/> 
<s:ComboBox x="291" y="159" dataProvider="{dp}" labelFunction="func" selectedIndex="0"/>

 6.コントロールMenuBarを使用してメニューを追加し、サブメニューのクリック時にイベントを実行します.
  
<fx:Script> 
    <![CDATA[ 
        import mx.controls.Alert; 
        import mx.events.MenuEvent; 
 
        protected function menubar1_itemClickHandler(event:MenuEvent):void
        { 
            Alert.show(event.item.@label); 
        } 
 
    ]]> 
</fx:Script> 
 
<mx:MenuBar x="118" y="124" labelField="@label" itemClick="menubar1_itemClickHandler(event)"> 
    <mx:dataProvider> 
        <mx:XMLListCollection> 
            <fx:XMLList xmlns=""> 
                <menu label="aa"> 
                    <item label="aa1" /> 
                    <item label="aa2" /> 
                </menu> 
                <menu label="bb"> 
                    <item label="bb1" /> 
                    <item label="bb2" /> 
                </menu>                    
            </fx:XMLList> 
        </mx:XMLListCollection> 
    </mx:dataProvider> 
</mx:MenuBar>

 
7.日付コントロールDateFieldおよびDateChooserの簡単な使い方
<fx:Script> 
    <![CDATA[ 
        import mx.events.CalendarLayoutChangeEvent; 
 
        protected function datechooser1_changeHandler(event:CalendarLayoutChangeEvent):void
        { 
            text1.text = event.newDate.getFullYear().toString() + "-" + (event.newDate.getMonth()+1).toString() + "-" + event.newDate.getDate().toString(); 
        } 
 
    ]]> 
</fx:Script> 
 
<mx:DateField x="110" y="128" formatString="YYYY-MM-DD" /> 
<mx:DateChooser x="374" y="128" change="datechooser1_changeHandler(event)"/> 
<s:TextInput x="374" y="98" id="text1"/>

[コードテストC+]新入社員
Viewのイベント配信