Flex常用组件的使用实例

<?xml version="1.0"?>
<!-- Simple example to demonstrate the VSlider control. -->
<!--
 如何使用Flex VSlider
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
   
          private var imageWidth:Number=0;
          private var imageHeight:Number=0;
          
          // Event handler function to change the image size.
          private function changeSize():void
       {
          phoneImage.width=uint(imageWidth*hSlider.value/100);
          phoneImage.height=uint(imageHeight*hSlider.value/100);
       }
        ]]>
    </mx:Script>

        <mx:Panel id="panel" title="VSlider Control Example" 
            height="100%" width="100%" 
            layout="horizontal"
            paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
        
            <mx:HBox width="50%">
                <mx:Image id="phoneImage" source="@Embed('assets/Nokia_6630.png')" 
                    creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;" />
            </mx:HBox>

            <mx:VBox horizontalAlign="center">
                <mx:Label color="blue" text="Drag the slider to resize the image."/>
    
                <mx:VSlider id="hSlider" 
                    dataTipPlacement="top" 
                    minimum="0" maximum="100" value="100" 
                    tickColor="black" 
                    snapInterval="1" tickInterval="10" 
                    labels="['0%','100%']" 
                    allowTrackClick="true" 
                    liveDragging="true" 
                    change="changeSize();"/>
            </mx:VBox>
            
        </mx:Panel>
</mx:Application>
如何使用Flex VScrollBar
关键字: flex flex3 vscrollbar<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the VScrollBar control. -->
<!--
 如何使用Flex VScrollBar
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
     <mx:Script>
        <![CDATA[
    
            import mx.events.ScrollEvent;
    
            // Event handler function to display the scroll location
            // as you move the scroll thumb.
            private function myScroll(event:ScrollEvent):void
            {
                showPosition.text = "VScrollBar properties summary:" + '\n' +
                    "------------------------------------" + '\n' +
                    "Current scroll position: " + event.currentTarget.scrollPosition  + '\n' +
                    "The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +
                    "The minimum scroll position: " + event.currentTarget.minScrollPosition ;
            }
        ]]>
    </mx:Script> 
  
    <mx:Panel id="panel" title="VScrollBar Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
        
        <mx:Label width="100%" color="blue" 
            text="Click on the scroll bar to view its properties."/>
        
        <mx:VScrollBar id="bar" height="100%" 
            minScrollPosition="0" maxScrollPosition="{panel.width - 20}"
            lineScrollSize="50" pageScrollSize="100"  
            repeatDelay="1000" repeatInterval="500" 
            scroll="myScroll(event);"/>
          
        <mx:TextArea height="100%" width="100%" id="showPosition" color="blue"/>
  
    </mx:Panel>  
</mx:Application>
如何使用Flex VRule
关键字: flex flex3 vrule<?xml version="1.0"?>
<!-- Simple example to demonstrate the VRule control. -->
<!--
 如何使用Flex VRule
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Panel title="VRule Control Example" id="myPanel" horizontalAlign="center" 
       paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
      
      <mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/>        
      <mx:Label width="100%" color="blue" 
          text="Move mouse over VRule control to redraw it."/>
    
   </mx:Panel>
</mx:Application>
如何使用Flex Tree
关键字: flex flex3 tree<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<!--
 如何使用Flex Tree
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            [Bindable]
            public var selectedNode:XML;

            // Event handler for the Tree control change event.
            public function treeChanged(event:Event):void {
                selectedNode=Tree(event.target).selectedItem as XML;
            }
        ]]>
    </mx:Script>

    <mx:XMLList id="treeData">
     <node label="Mail Box">
         <node label="Inbox">
             <node label="Marketing"/>
             <node label="Product Management"/>
             <node label="Personal"/>
         </node>
         <node label="Outbox">
             <node label="Professional"/>
             <node label="Personal"/>
         </node>
         <node label="Spam"/>
         <node label="Sent"/>
  </node> 
    </mx:XMLList>

    <mx:Panel title="Tree Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue" 
            text="Select a node in the Tree control."/>

        <mx:HDividedBox width="100%" height="100%">
            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
            <mx:TextArea height="100%" width="50%"
                text="Selected Item: {selectedNode.@label}"/>
        </mx:HDividedBox>
        
    </mx:Panel>
</mx:Application>
如何使用Flex TileList
关键字: flex flex3 tilelist要准备几张图片，放到mxml文件同级的assets文件夹。 

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TileList Control. -->
<!--
 如何使用Flex TileList
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
             
             [Bindable]
             [Embed(source="assets/Nokia_6630.png")]
             public var phone1:Class;
             
             [Bindable]
             [Embed(source="assets/Nokia_6680.png")]
             public var phone2:Class;
             
             [Bindable]
             [Embed(source="assets/Nokia_7610.png")]
             public var phone3:Class;
      
             [Bindable]
          [Embed(source="assets/Nokia_lg_v_keypad.png")]
             public var phone4:Class;

             [Bindable]
          [Embed(source="assets/Nokia_sm_v_keypad.png")]
             public var phone5:Class;
        ]]>
    </mx:Script>

    <mx:Panel title="TileList Control Example" height="100%" width="100%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue" 
            text="A TileList control displays items in rows and columns."/>

        <mx:TileList id="CameraSelection" height="250" width="300" 
            maxColumns="2" rowHeight="225" columnWidth="125">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="Nokia 6630" icon="{phone1}"/>
                    <mx:Object label="Nokia 6680" icon="{phone2}"/>
                    <mx:Object label="Nokia 7610" icon="{phone3}"/>
                    <mx:Object label="Nokia LGV" icon="{phone4}"/>
                    <mx:Object label="Nokia LMV" icon="{phone5}"/>
                </mx:Array>
            </mx:dataProvider>
        </mx:TileList>

    </mx:Panel>
</mx:Application>
如何使用Flex TabBar
关键字: flex flex3 tabbar<?xml version="1.0"?>
<!-- Simple example to demonstrate the TabBar control. -->
<!--
 如何使用Flex TabBar
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.events.ItemClickEvent;
            import mx.controls.TabBar;

            [Bindable]
            public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
                {label:"Alaska", data:"Juneau"},
                {label:"Arkansas", data:"LittleRock"}
            ];
            
      private function clickEvt(event:ItemClickEvent):void {
       // Access target TabBar control.
       var targetComp:TabBar = TabBar(event.currentTarget);
       forClick.text="label is: " + event.label + ", index is: " + 
        event.index + ", capital is: " +
        targetComp.dataProvider[event.index].data;
      }             
       ]]>
    </mx:Script>

    <mx:Panel title="TabBar Control Example" height="75%" width="75%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue" 
            text="Select a tab to change the current panel."/>

        <mx:TabBar itemClick="clickEvt(event);">
            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
        </mx:TabBar>

        <mx:TextArea id="forClick" height="100%" width="100%"/>

    </mx:Panel>
</mx:Application>
如何使用Flex Spacer
关键字: flex flex3 spacer<?xml version="1.0"?>
<!-- Simple example to demonstrate the Spacer control. -->
<!--
 如何使用Flex Spacer
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel id="panel" title="Spacer Control Example" height="75%" width="75%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
        
        <mx:Text width="100%" color="blue" 
            text="The Spacer control pushes the second image to the right edge of the HBox container."/>

        <mx:HBox width="100%">
            <mx:Image source="@Embed('assets/Nokia_6630.png')"/>
            <mx:Spacer width="100%"/>
            <mx:Image source="@Embed('assets/Nokia_6680.png')"/>
        </mx:HBox>
       
    </mx:Panel>
</mx:Application>
如何使用Flex ProgressBar
关键字: flex flex3 progressbar<?xml version="1.0"?>
<!-- Simple example to demonstrate the ProgressBar control. -->
<!--
 如何使用Flex ProgressBar
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
           
          private var j:uint=10;
          
          // Event handler function to set the value of the 
          // ProgressBar control.
          private function runit():void
          {
           if(j<=100)
           {
              bar.setProgress(j,100);
           bar.label= "CurrentProgress" + " " + j + "%";
           j+=10;
           }
           if(j>100)
           {
           j=0;
              }
          }
        ]]>    
    </mx:Script>

    <mx:Panel title="ProgressBar Control Example" height="75%" width="75%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="Click the button to increment the progress bar." />
        <mx:Button id="Speed" label="Run" click="runit();"/>
            
        <mx:ProgressBar id="bar" labelPlacement="bottom" themeColor="#F20D7A"
            minimum="0" visible="true" maximum="100" label="CurrentProgress 0%" 
            direction="right" mode="manual" width="100%"/>

    </mx:Panel>
</mx:Application>
如何使用Flex NumericStepper
关键字: lex flex3 numericstepper<?xml version="1.0"?>
<!-- Simple example to demonstrate the NumericStepper control. -->
<!--
 如何使用Flex NumericStepper
 MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="NumericStepper Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10">

        <mx:Text width="100%" color="blue"
            text="Default NumericStepper control with a minimum=0, maximum=10, and stepSize=1."/>
        <mx:NumericStepper/>

        <mx:Text width="100%"  color="blue"
            text="NumericStepper control with a minimum=10, maximum=40, stepSize=0.01, and starting value of 20."/>

        <mx:NumericStepper id="ns" 
            minimum="10.00" maximum="40.00" 
            stepSize="0.01" 
            value="20.00" 
            width="65"/>

        <mx:Label  color="blue" text="You selected {ns.value}"/>

    </mx:Panel>
</mx:Application>
如何使用Flex List关键字: flex flex3 list如何使用Flex List , list 提供了鼠标上移，选中时高亮显示。 

<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control
 Flex简单的列表列子
 MyShareBook.cn 翻译
 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
         [Bindable]
            public var selectedItem:Object;
       ]]>
    </mx:Script>

    <mx:Model id="mystates">
      <states>
        <state label="Alabama" data="AL"/>
        <state label="Alaska" data="AK"/>
        <state label="Arizona" data="AZ"/>
        <state label="Arkansas" data="AR"/>
        <state label="California" data="CA"/>
        <state label="Colorado" data="CO"/>
        <state label="Connecticut" data="CT"/>
      </states>
    </mx:Model>

    <mx:Panel title="List Control Example" height="75%" width="75%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label text="Select a state to see its abbreviation."/>

        <mx:List id="source" width="100%" color="blue"
            dataProvider="{mystates.state}"
            change="this.selectedItem=List(event.target).selectedItem"/>

        <mx:VBox width="100%">
            <mx:Label text="Selected State: {selectedItem.label}"/>
            <mx:Label text="State abbreviation: {selectedItem.data}"/>
        </mx:VBox>

    </mx:Panel>
</mx:Application>

拖动水平滚动条来改变图片大小

<?xml version="1.0"?>
<!-- Simple example to demonstrate the HSlider control.  水平拖动条。 MyShareBook.cn 翻译-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			private var imageWidth:Number=0;
			private var imageHeight:Number=0; // Event handler function to change the image size.            private function changeSize():void         {            phoneImage.width=uint(imageWidth*hSlider.value/100);            phoneImage.height=uint(imageHeight*hSlider.value/100);         }
		]]>
	</mx:Script>
	<mx:Panel id="panel"
			  title="HSlider Control Example"
			  height="100%"
			  width="95%"
			  paddingTop="10"
			  paddingBottom="10"
			  paddingLeft="10"
			  paddingRight="10">
		<mx:HBox height="100%"
				 width="100%">
			<mx:Image id="phoneImage"
					  source="@Embed('assets/Nokia_6630.png')"
					  creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;"/>
		</mx:HBox>
		<mx:Label color="blue"
				  text="拖动slider来改变图片大小."/>
		<mx:HSlider id="hSlider"
					minimum="0"
					maximum="100"
					value="100"
					dataTipPlacement="top"
					tickColor="black"
					snapInterval="1"
					tickInterval="10"
					labels="['0%','100%']"
					allowTrackClick="true"
					liveDragging="true"
					change="changeSize();"/>
	</mx:Panel>
</mx:Application>