Flex4学习笔记（一）－－基础控件的使用

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()用于将给定值转换成数字值，用法很简单；

如果需要让图片加载的时候宽度和高度跟图片原始宽高度一样，可以这么写：<mx:Image x="106" y="162" source="@Embed('/test/1.jpg')" width="100%" height="100%" id="img" autoLoad="true" scaleContent="false"/>

 

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"/>