2

I am loading files (or rather, pictures) in my Flex application from a server, technically from a database. I display some of them at a time, think of it like an image preview, and quite often I display the same image again. But I don't want to re-download the same file time and time again, so I would like to store it locally, and load it from there if it is available (or download it if necessary). I'm quite happy if the files can be stored in some temporary folder in AppData/iDontCare and get deleted on application restart.

File.applicationStorageDirectory would fit the bill, but only exists in Air.

What am I missing?

ToddBFisher
  • 11,370
  • 8
  • 38
  • 54
Kajetan Abt
  • 1,505
  • 3
  • 15
  • 28

3 Answers3

3

Maybe look into storing the image as a byte array in a shared object, which doesn't sound like the best solution but that's whats coming to mind at the moment :)

Read more here: Is it possible to store images in the SharedObject of Flash?

Other than that if you are not using AIR or a 3rd parth swf wrapper I believe you are at the mercy of the browser's cache, unless I am forgetting something else.

Community
  • 1
  • 1
ToddBFisher
  • 11,370
  • 8
  • 38
  • 54
  • I am storing the picture in a binary array at some point anyway. I know this is unwieldy and slow (and I have yet to figure out how to transfer and convert that correctly in php/flex), but there is hardly a better way to do this if it has to go into an RDBMS at some point (and **that** is non-negotiable). The example you link is pretty much what I was searching for, I will try to implement that if nothing better comes up. Thanks. – Kajetan Abt Dec 15 '11 at 23:34
2

There's no sense in reinventing the wheel for this, simply set up your server responses with the proper headers so the web browser can cache them. It should be fairly easy to setup server side and will require no setup client side, simply load everything again as you did the first time and it will magically come from the cache instead of your server.

Regarding cache header config, see this question or simply google a bit for something that suits your specific case better.

Community
  • 1
  • 1
grapefrukt
  • 27,016
  • 6
  • 49
  • 73
  • Let me specify: I am currently requesting the images as the result of a POST (though I probably could use a GET for this one, I suppose) with half a dozen parameters, some of which are user-related, others which point to the image, and a few more. How do I "easily" setup my php/SQL in a way that these will be cached automatically? Furthermore, two different sets of parameters can result in the same picture being fetched (but I can figure this out on the client before the request happens), and I would like to avoid that. – Kajetan Abt Dec 15 '11 at 23:47
  • I updated with some info on setting cache headers in php, you won't need to touch your sql at all. Doing a GET will be required, but the number of parameters won't really matter as long as they're the same every time and removing any "duplicates" would also help. – grapefrukt Dec 16 '11 at 00:50
  • This is a cleaner solution to the SharedObject, +1UP – ToddBFisher Dec 16 '11 at 00:59
1

Maybe, you can try the image cache in your client side. Example:

<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<fx:Script>
<![CDATA[
private function setView(index:int):void
    {
        tn.selectedIndex = index;

        switch(index)
        {
            case 0: 
                myCache.prioritize("Employees");
                break;
            case 1: 
                myCache.prioritize("Managers");
                break;
            case 2: 
                myCache.prioritize("Execs");
                break;
        }
    }       
]]>
</fx:Script>

<s:HGroup>
    <s:Button label="Employees" click="setView(0);"/>
    <s:Button label="Managers" click="setView(1);"/>
    <s:Button label="Execs" click="setView(2);"/>
</mx:HGroup>

<mx:TabNavigator id="navigator" width="100%" height="100%">
    <s:NavigatorContent label="Employees">
        <s:VGroup>
            <s:BitmapImage source="imgs/BigImage01.jpg" 
                contentLoaderGrouping="Employees" contentLoader="{myCache}"/>
            <s:BitmapImage source="imgs/BigImage02.jpg" 
                contentLoaderGrouping="Employees" contentLoader="{myCache}"/>
            <s:BitmapImage source="imgs/BigImage03.jpg" 
                contentLoaderGrouping="Employees" contentLoader="{myCache}"/>
            ...
        <s:/VGroup>
    </s:NavigatorContent>

    <s:NavigatorContent label="Managers">
        <s:VGroup>
            <s:BitmapImage source="imgs/BigImage06.jpg" 
                contentLoaderGrouping="Managers" contentLoader="{myCache}"/>
            <s:BitmapImage source="imgs/BigImage07.jpg" 
                contentLoaderGrouping="Managers" contentLoader="{myCache}"/>
            <s:BitmapImage source="imgs/BigImage08.jpg" 
                contentLoaderGrouping="Managers" contentLoader="{myCache}"/>
            ...
        <s:/VGroup>
    </s:NavigatorContent>

    <s:NavigatorContent label="Execs">
        <s:VGroup>
            <s:BitmapImage source="imgs/BigImage11.jpg" 
                contentLoaderGrouping="Execs" contentLoader="{myCache}"/>
            <s:BitmapImage source="imgs/BigImage12.jpg" 
                contentLoaderGrouping="Execs" contentLoader="{myCache}"/>
            <s:BitmapImage source="imgs/BigImage13.jpg" 
                contentLoaderGrouping="Execs" contentLoader="{myCache}"/>
            ...
        <s:/VGroup>
    </s:NavigatorContent>

</mx:TabNavigator>


<fx:Declarations>
    <s:ContentCache name="myCache" enableQueuing="true"/>
</fx:Declarations>

Have a look on the following link: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Image

michael
  • 1,160
  • 7
  • 19