Flex_控件

1、Text控件

外观：

代码：

<?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控件

外观：

代码：

<?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控件

外观：

代码：

<?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组件

外观：

代码：

<?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、选单控件

外观：

代码：

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