Flex_控件

2022-11-11 13:29:47

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

码农公寓

相关文章