主要功能： 对dataprovider里面的data进行过滤~

代码：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”oninit()”>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            [Bindable]
            private var items:ArrayCollection;
            private function oninit():void{
                this.srv.send();
            }
            private function onResult(event:ResultEvent):void{
                this.items=event.result.item;
            }
            private function applyFilter():void{
                if (this.items.filterFunction == null)
                {
                    this.items.filterFunction=this.filterNames;
                }
                this.items.refresh();
            }
            private function filterNames(item:Object):Boolean{
                var match:Boolean = true;
                if(nameFilter.text!=”"){
                    var name:String = item["name"];
                    var filter:String =nameFilter.text;
                    if(!name||name.toLowerCase().indexOf(filter.toLowerCase())<0){
                        match=false;
                    }
                }
                return match;
            }
        ]]>
    </mx:Script>
    <mx:HTTPService id=”srv” url=”assets/items.xml”
        resultFormat=”object” result=”onResult(event)”/>
        <mx:TextInput id=”nameFilter”
                          change=”applyFilter()”/>
    <mx:AdvancedDataGrid id=”grid” width=”100%” height=”602″ dataProvider=”{items}” sortExpertMode=”true” y=”30″>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText=”name” dataField=”name”/>
            <mx:AdvancedDataGridColumn headerText=”photoUrl” dataField=”photoUrl”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

这里需要用到mx:AdvancedDataGrid，然后将你的过滤方法设置到 mx:AdvancedDataGrid的filterFunction属性上~ 这个方法的主要实现就是：传object对象进去（也就是你的dataprovider里的）进去，然后返回一个boolean值，如果跟你设置的需要留下的item匹配 就返回一个true，如果跟你设置的不匹配，就返回false过滤掉~~

您可能也会关注:

• 3.13 通过LinkBar 控制ViewStack
• 1.15监听键盘事件
• 3.22在容器中滚动到某个指定的子组件
• flex cookbook学习—1.11使用事件冒泡机制
• 3.15使用延迟实例化提高启动效率

code:

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
           width=”800″
           height=”600″>
    <mx:Script>
        <![CDATA[
            private function showScrollValue():void
            {
                trace(this.verticalScrollPosition + " " + this.horizontalScrollPosition);
            }

            private function changeScrollToShowChild():void
            {
                vbox.verticalScrollPosition=(returnChildrenHeights((comboBox.selectedItem as Number)-1));
            }

//Vbox 内所有子组件的高度用以计算并确定一个y 值来设定verticalScrollPosition 属性，从而使Vbox 滚动到指定的子组件的位置。
            private function returnChildrenHeights(index:int):Number
            {
                var i:int=0;
                var sumHeight:Number=0;
                while (i < index)
                {
                    sumHeight+=vbox.getChildAt(i).height;
                    i++;
                }
                return sumHeight;
            }
        ]]>
    </mx:Script>
    <mx:ComboBox id=”comboBox”
                 change=”changeScrollToShowChild()”>
        <mx:dataProvider>
            <mx:Array>
                <mx:Number>1</mx:Number>
                <mx:Number>2</mx:Number>
                <mx:Number>3</mx:Number>
                <mx:Number>4</mx:Number>
                <mx:Number>5</mx:Number>
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
    <mx:VBox width=”650″
             height=”300″
             id=”vbox”
             backgroundColor=”#00ffff”
             y=”50″
             verticalScrollPolicy=”on”
             scroll=”showScrollValue()”
             paddingLeft=”50″>
        <mx:Panel height=”150″
                  width=”550″>
            <mx:LinkButton label=”First”/>
        </mx:Panel>
        <mx:Panel height=”160″
                  width=”550″>
            <mx:LinkButton label=”Second”/>
        </mx:Panel>
        <mx:Panel height=”110″
                  width=”550″>
            <mx:LinkButton label=”Third”/>
        </mx:Panel>
        <mx:Panel height=”150″
                  width=”550″>
            <mx:LinkButton label=”Fourth”/>
        </mx:Panel>
        <mx:Panel height=”130″
                  width=”550″>
            <mx:LinkButton label=”Fifth”/>
        </mx:Panel>
    </mx:VBox>
</mx:Canvas>

主要就是设置vbox.verticalScrollPosition的值，这个值代表向下滚动的像素~

您可能也会关注:

• 3.15使用延迟实例化提高启动效率
• 3.13 通过LinkBar 控制ViewStack
• 6.4过滤DataGrid数据项
• flex cookbook学习—1.11使用事件冒泡机制
• 1.15监听键盘事件

问题
我们要保证组件仅仅在需要显示在屏幕上的时候才被创建。

Container 类默认情况下仅仅在要显示组件的时候创建它，因为UIComponent 默认的
creationPolicy 值为auto。换句话说，当视图(view)设置成可视的时候，如果还没有创建
该视图，则组件会实例化此视图

code:

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
           height=”600″
           width=”600″>
    <mx:Script>
        <![CDATA[
            private function changeViewStackCreation():void
            {
                viewStack.creationPolicy=(comboBox.selectedItem as String);
                viewStack.createComponentsFromDescriptors(true);
            }

            private function changeViewStack():void
            {
                viewStack.selectedIndex=comboBoxChangeIndex.selectedIndex;
            }
        ]]>
    </mx:Script>
    <mx:Fade alphaFrom=”0″
             alphaTo=”1″
             duration=”4000″
             id=”fadeIn”/>
    <mx:ComboBox dataProvider=”{['none', 'all', 'queued',
'auto']}”
                 change=”changeViewStackCreation()”
                 id=”comboBox”/>
    <mx:ComboBox dataProvider=”{[1, 2, 3, 4]}”
                 x=”150″
                 change=”changeViewStack()”
                 id=”comboBoxChangeIndex”/>
    <mx:ViewStack id=”viewStack”
                  width=”400″
                  height=”300″
                  creationPolicy=”none”
                  y=”100″>
        <mx:Canvas creationCompleteEffect=”{fadeIn}”
                   creationIndex=”0″
                   backgroundColor=”#0000ff”
                   id=”canvas1″>
            <mx:LinkButton label=”Link Button Number One”/>
        </mx:Canvas>
        <mx:Canvas creationCompleteEffect=”{fadeIn}”
                   creationIndex=”1″
                   backgroundColor=”#0000ff”
                   id=”canvas2″>
            <mx:LinkButton label=”Link Button Number Two”/>
        </mx:Canvas>
        <mx:Canvas creationIndex=”2″
                   id=”canvas3″
                   creationCompleteEffect=”{fadeIn}”
                   backgroundColor=”#0000ff”>
            <mx:LinkButton label=”Link Button Number Three”/>
        </mx:Canvas>
        <mx:Canvas creationIndex=”3″
                   id=”canvas4″
                   creationCompleteEffect=”{fadeIn}”
                   backgroundColor=”#0000ff”>
            <mx:LinkButton label=”Link Button Number Four”/>
        </mx:Canvas>
    </mx:ViewStack>
</mx:Canvas>

creationPolicy一共有四个属性:none all queued auto

none 是不创建

all是全部创建， （个人觉得，如果你有一个很漂亮的preloading，可以用这个属性全部加载，以免用户在进入系统后再等着加载）

auto 默认值，显示时创建。

您可能也会关注:

• 3.22在容器中滚动到某个指定的子组件
• 3.13 通过LinkBar 控制ViewStack
• flex cookbook学习—1.11使用事件冒泡机制
• 1.12使用代码隐藏模式分离MXML和ActionScript
• 6.4过滤DataGrid数据项

使用LinkBar 的selectedIndex 或selectedItem 属性的任意之一可以决定显示ViewStack
的哪一条。

code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var indext:int =0;
            private function changeIndex():void{
                if(indext==2){
                    indext=0;
                }else{
                    indext++;
                }
            }
        ]]>
    </mx:Script>
    <mx:Canvas click=”changeIndex()”>   
        <mx:ViewStack selectedIndex=”{indext}”>
            <mx:VBox>
            <mx:Image  source=”BFC069.gif”/>   
            </mx:VBox>
            <mx:VBox>
                <mx:Image  source=”BFC204.gif”/>
            </mx:VBox>
            <mx:VBox>
                <mx:Image  source=”FC229I.gif”/>
            </mx:VBox>
        </mx:ViewStack>
    </mx:Canvas>
</mx:Application>

注：viewstack里必须为容器，我们这里用了vbox~

这里可以实现相册浏览的效果（当然是最简易的拉~~）

您可能也会关注:

• 3.22在容器中滚动到某个指定的子组件
• 6.4过滤DataGrid数据项
• flex cookbook学习—1.11使用事件冒泡机制
• 1.15监听键盘事件
• 3.15使用延迟实例化提高启动效率

很多时候我们需要combobox里面的标签是一个组合，而不单单只是一个LABEL，怎么解决呢，看代码：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="horizontal">
	<mx:ComboBox dataProvider="{myDP}"
				 labelFunction="getFullName"/>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			private var myDP:ArrayCollection=new ArrayCollection([{id: 1, fName: "Lucky", lName: "Luke"}, {id: 2, fName: "Bart", lName: "Simpson"}]);

			private function getFullName(item:Object):String
			{
				return item.fName + " " + item.lName;
			}
		]]>
	</mx:Script>
</mx:Application>

combobox为我们提供了 labelFunction这个功能 ，你可以自定义自己所需要的信息作为标签~

您可能也会关注:

• 1.8在MXML中创建数组或对象
• 1.8在MXML中创建数组或对象
• 1.6在MXML中添加事件监听器
• magento添加多货币 How to Setup a Dual Currency Magento Shop
• 如何修改网卡的MAC（物理）地址

解决思路:

为应用程序的stage或组件的keyDown事件添加监听器，读取KeyboardEvents的keyCode属性。

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
                layout=”absolute”
                KeyDown=”KeyHandler(event)”
                xmlns:ns1=”*”>
    <mx:Script>
        <![CDATA[
            import flash.events.KeyboardEvent;

            private function keyHandler(event:KeyboardEvent):void
            {
                switch (event.keyCode)
                {
                    case 13:
                        trace("Enter pressed");
                        break;
                    case 32:
                        trace("SpaceBar");
                        break;
                    case 16:
                        trace("ShiftKeypressed");
                        break;
                    case 112:
                        trace("F1pressed");
                        break;
                    case 8:
                        trace("Deletepressed");
                        break;
                }
            }
        ]]>
    </mx:Script>
    <mx:Button   />
</mx:Application>

运行，没反应？？？ 注意下面放了一个BUTTON，cookbook解释说它必须被激活才能监听到它发出来的事件，

也就是说必须得先按一下，麻烦吧~ 不过，还有简单点的办法。

把上面的KeyDown监听换成下面这一句

addedToStage=”stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler)”

也就是给舞台一个一事件监听，这下就不用激活BUTTON拉··

您可能也会关注:

• 6.4过滤DataGrid数据项
• 3.13 通过LinkBar 控制ViewStack
• flex cookbook学习—1.11使用事件冒泡机制
• 3.22在容器中滚动到某个指定的子组件
• 1.12使用代码隐藏模式分离MXML和ActionScript