Question

我在本文http://www.adobe.com/devnet/flex/articles/flex-mobile-performance-checklist.html中读到，我不应该在creationComplete处理程序中初始化View的外观。相反，我应该在被覆盖的数据设置器中更改视图的外观。

文章中的部分是：

覆盖数据设置器，而不是使用绑定或在creationComplete处理程序中初始化View的外观

1 - 首先，我想知道我是否通过以下方式做到了这一点：

//My code is loading a set of images and adding them in a View. 
//On creationComplete of the View I am adding the images in case this is the first time          
//the view is shown. In case the view has been already accessed I use the data:  

   protected function view1_creationCompleteHandler(event:FlexEvent):void
        {
            if(!data) //On first creation of the view I create the data object
            {
                data = new Object();
                data.imageArray = new Array(); //set an array that will cache my images.
                for(var i:int = 0; i<36;i++)
                {
                    var img:Image = new Image();
                    img.source = 'assets/0'+i.toString()+'.png';
                    container.addElement(img);
                    (data.imageArray as Array).push(img);//Override the data for next time!
                }
            }
            else//Next time use the save images
            {
                for(var ix:int = 0; ix<(data.imageArray as Array).length;ix++)
                {
                    container.addElement((data.imageArray as Array)[ix]);
                }
            }
        }

如果我正确地这样做，我想知道哪种方法最好。上面的那个，或者我将要展示的下一个使用图像contentLoader与ContentCache启用缓存和排队：

  protected function view1_creationCompleteHandler(event:FlexEvent):void
        {
            {
                for(var i:int = 0; i<36;i++)
                {
                    var img:Image = new Image();
                    img.contentLoader = ldr;
                    img.contentLoaderGrouping = 'gr1';
                    img.source = 'assets/0'+i.toString()+'.png';
                    container.addElement(img);
                }

        }

<fx:Declarations>
    <s:ContentCache id="ldr" enableQueueing="true"
                    maxActiveRequests="1" maxCacheEntries="36"/>
</fx:Declarations>

此外，如果有人可以告诉我contentLoaderGrouping是什么。我会很感激。非常感谢！！！

PS：顺便提一下两种方法都有效。第一种方法是即时的，而第二种方法是以非常平滑的方式显示图像，这实际上产生了很酷的效果。

Answer 1

都不是。建议的要点是在creationComplete之后不要改变displaylist，这需要额外的更新周期。相反，当您在堆栈上推送视图时，应该inject the data property，并在设置器中启动更改。使用ContentCache与它无关（如果使用不当，有时会导致额外的开销）。

override public function set data(value:Object):void
{
    super.data = value;

    //this was poorly optimized, so I made it
    //a little better...

    var imageArray:Array = (value == null || value.imageArray == null)?
        null : value.imageArray as Array;

    if(imageArray == null) //On first creation of the view I create the data object
    {
        imageArray = new Array(36); //set an array that will cache my images.
        for(var i:int = 0; i<36;i++)
        {
            var img:Image = new Image();
            img.source = 'assets/0'+i.toString()+'.png';
            container.addElement(img);
            imageArray[i] = img;
        }

        super.data = {imageArray:imageArray}
    }
    else//Next time use the save images
    {
        var n:int = imageArray.length;
        for (var j:int = 0; j < n; j++) 
        {
            container.addElement(IVisualElement(imageArray[j]));
        }
    }
}

修改的

我错误地认为在视图生命周期中何时设置了data属性。

以下是它的工作原理：

View Life-Cycle Diagram

所以你说对了，那个容器就是null。我打算为你写一个例子，但我很难弄清楚你的最终目标是什么。是否有特定原因要将图像存储在数据属性中？我想你可能真正想做的是：

private var _data:Object = {cache: new ContentCache()};

protected function show_clickHandler(event:MouseEvent):void
{
    this.navigator.pushView(views.MyView, _data);
}

在视图中......

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="MyView">

    <fx:Script>
        <![CDATA[
            import spark.components.Image;
            import spark.core.ContentCache;

            override protected function createChildren():void
            {
                super.createChildren();

                //you might want to do a sanity first check to make sure the 
                //data was passed in correctly...

                var cache:ContentCache = ContentCache(this.data.cache);

                for(var i:int = 0; i < 36; i++)
                {
                    var img:Image = new Image();
                    img.contentLoader = cache;
                    img.source = 'assets/0' + i.toString() + '.png';
                    container.addElement(img);
                }
            }
        ]]>
    </fx:Script>

    <s:VGroup id="container" />

</s:View>

Flex 4.6优化视图外观ContentCache VS覆盖移动应用程序的数据

1 个答案: