Flex_控件

1、Text控件

    外观:

    Flex_控件

    代码:

Flex_控件Flex_控件
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function showMsg(msg:String):void     
            {                                                    
                Alert.show(msg);                
            }
        ]]>
    </fx:Script>
    
    <s:Panel title="TextSample" verticalCenter="0" horizontalCenter="0">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        
        <s:Label text="TextInput" fontWeight="bold"/>
        <s:TextInput id="TextInput"/>
        
        <s:Label text="TextArea" fontWeight="bold"/>
        <s:TextArea id="TextArea" textAlign="center" width="100%" height="40"/>
        
        <s:Label text="RichTextEditor" fontWeight="bold" color="#ff0000"/>
        <mx:RichTextEditor id="RichTextEditor" height="150" width="650" 
                           borderSkin="mx.skins.spark.BorderSkin" borderColor="0x000fff"/>
    
        <s:Label text="RichEditableText" fontWeight="bold"/>
        <s:RichEditableText textAlign="center" color="#127892" backgroundColor="0xfff000" width="100%">
            <s:content>
                Greetings <s:span fontWeight="bold" color="#ff0000">people</s:span> of<s:br/>
                <s:span fontSize="20">EARTH!</s:span>
            </s:content>
        </s:RichEditableText>
        
    </s:Panel>
    
</s:Application>
TextSample

 

2、Date控件

    外观:

        Flex_控件

     代码:

Flex_控件Flex_控件
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;      
            public function showMsg(msg:String):void
            {
                Alert.show(msg);               
            }                                                                                    
        ]]>
    </fx:Script>
    <s:Panel title="DateSample" verticalCenter="0" horizontalCenter="0">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:Label text="DateField" fontWeight="bold" backgroundColor="0xff0022"/>
        <mx:DateField text="12/05/2008" id="thisDateField" 
                      change="showMsg(thisDateField.selectedDate.toString())"/>
        
        <s:Label text="DateChooser" fontWeight="bold" backgroundColor="0xff0022"/>
        <mx:DateChooser id="thisDateChooser"        
                        maxYear="2010" minYear="2006"
                        selectedDate="{new Date(2008,10, 15)}"
                        change="showMsg(thisDateChooser.selectedDate.toString())">
            
        </mx:DateChooser>
    </s:Panel>
</s:Application>
DateSample

 

3、Numeric控件

    外观:

       Flex_控件

    代码:

Flex_控件Flex_控件
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Script>
        <![CDATA[    
            import mx.controls.Alert;
            public function showMsg(msg:String):void
            {
                Alert.show(msg);
            }
        ]]>      
    </fx:Script>
    <s:Panel title="NumericSample" width="360" height="240" horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:VGroup>
            <s:Label text="NumericStepper" fontWeight="bold" backgroundColor="0xff0022"/>
            
            <s:NumericStepper id="kids" 
                              minimum="0" 
                              maximum="10"
                              stepSize="1"
                              change="showMsg(kids.value.toString())"/>
            
            <s:HGroup>
                <s:Label text="Spinner" fontWeight="bold" backgroundColor="0xff0022"/>      
                <s:Spinner minimum="0" maximum="10" id="collegeKids"/>
                <s:Label text="{collegeKids.value} in college"/>            
            </s:HGroup>
            
            
            <s:Label text="HSlider" fontWeight="bold" backgroundColor="0xff0022"/>
            <mx:HSlider id="commuteTimeRange" minimum="0" maximum="180"               
                        tickInterval="15"                   
                        labels="[0 mins,180 mins]"       
                        thumbCount="2" snapInterval="5"           
                        change="showMsg(commuteTimeRange.values.toString())">
            </mx:HSlider>
            
        </s:VGroup>
        <s:VGroup>
            <s:Label text="VSlider" fontWeight="bold" backgroundColor="0xff0022"/>
            <mx:VSlider id="yourHeight" minimum="0" maximum="300"
                        tickInterval="50" snapInterval="1"
                        labels="[0,50,100,150,200,250,300]"
                        change="showMsg(yourHeight.values.toString())"/>
            
        </s:VGroup>
    </s:Panel>
</s:Application> 
NumericSample

 

4、Button组件

    外观:

   Flex_控件

    代码:

Flex_控件Flex_控件
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Script>
        <![CDATA[    
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var myArray:ArrayCollection = new ArrayCollection(['One','Two','Three']);
            
            public function showMsg(msg:String):void
            {
                Alert.show('You just clicked on ' + msg);
            }
        ]]>      
    </fx:Script>
    <s:Panel title="ButtonSample" width="360" height="240" horizontalCenter="0" verticalCenter="0">
        <s:VGroup>
            <s:Button id="thisBtn" label="Button" click="showMsg('button')"/>
            
            <mx:LinkButton id="thisLinkBtn" label="LinkButton"/>    

            <s:Label text="ButtonBar" fontWeight="bold" backgroundColor="0xff0022"/>
            <s:ButtonBar id="thisBtnBar" labelField="ButtonBar"
                         dataProvider="{myArray}"           
                         click="showMsg(ButtonBar(event.currentTarget).selectedItem)" />
            
            <s:Label text="LinkBar" fontWeight="bold" backgroundColor="0xff0022"/>
            <mx:LinkBar id="thisLinkBar"
                        dataProvider="{myArray}"            
                        itemClick="showMsg(event.label)" />
            
            <s:Label text="ToggleButtonBar" fontWeight="bold" backgroundColor="0xff0022"/>
            <mx:ToggleButtonBar id="thisToggleBar"
                                dataProvider="{myArray}"     
                                itemClick="showMsg(event.label)"/>    
        </s:VGroup>
        
    </s:Panel>
</s:Application>
ButtonSample

5、选单控件

    外观:

         Flex_控件

    代码:

Flex_控件Flex_控件
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
        <fx:Script>
        import mx.controls.Alert;  
        public function showMsg(msg:String):void
        {
            Alert.show(msg);
        }
    </fx:Script>
    <fx:Declarations>
        <s:RadioButtonGroup id="Spam"                            
                            itemClick="showMsg('User picked ' +     
                            event.currentTarget.selectedValue)"/>    
    </fx:Declarations>
    
    <s:Panel width="400" height="150" title="SelecterSample" horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout> 
        <s:HGroup>
            <s:Label text="CheckBox" fontWeight="bold" backgroundColor="0xff0022"/>
            <s:CheckBox id="cbVideoGames" label="Video Games"   
                        click="showMsg('Video Games is ' + cbVideoGames.selected)"/>
            <s:CheckBox id="cbFishing" label="Fishing" 
                        click="showMsg('Fishing is ' + cbFishing.selected)"/>
        </s:HGroup>
        <s:HGroup>
            
            <s:Label fontWeight="bold" text="RadioButton" backgroundColor="0xff0022"/>
            <s:RadioButton id="rbYes" value="Yes" groupName="Spam"  
                           click="showMsg('Yes')" label="Yes"/>
            <s:RadioButton id="rbNo" value="No" groupName="Spam"
                           click="showMsg('No')" label="No"/>
        </s:HGroup>
        
        <s:HGroup>
            <s:Label fontWeight="bold" text="DropDownList" backgroundColor="0xff0022"/>
            <s:DropDownList id="combo"    
                            close="showMsg('Favorite car is ' +  
                            event.currentTarget.selectedItem)" >
                <mx:ArrayCollection>
                    <fx:String>Ferrari</fx:String>
                    <fx:String>Porsche</fx:String>
                    <fx:String>Hyundai</fx:String>       
                </mx:ArrayCollection>
            </s:DropDownList>
        </s:HGroup>
        
        <s:HGroup>
            <s:Label fontWeight="bold" text="ColorPicker" backgroundColor="0xff0022"/>
            <mx:ColorPicker id="clr"  
                            change="showMsg('Color ' +  
                            event.currentTarget.selectedColor)"/>   
        </s:HGroup>
    </s:Panel>
</s:Application>
SelecterSample