Zero to Hero: Using the Browser Cache in Silverlight

del.icio.us Tags: Silverlight

Technorati Tags: Silverlight

You may be using the Silverlight downloader object to download content such as fonts but you may have noticed that every page needs to download the resources seperately, making for poor UX. Well the results of the downloader object can be easily cached, so that subsequent pages can access the same content using this very straightforward technique:

Create the downloader on the first page that will use the resource. So, for example, on this site I have a page called Default.html, that references a file called Default.html.js. Note that I do not create the var for the downloader inside a function, but instead make it global to this JS. If I had created it inside my handleLoad function, then it would be destroyed once the function exits, and the cached data lost.

Here's the full JS

 var cached_downloader; 
var slControl;
function createSilverlight()
{
    
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.0"
        },
        events: {
            onLoad: handleLoad
        }
    });
}


if (!window.Silverlight) 
    window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
    return function() {
        return method.apply(instance, arguments);
    }
}
function handleLoad(control, userContext, sender)
    {
        slControl=control;
        cached_downloader = control.createObject("downloader"); 
        cached_downloader.addEventListener("completed","handleDLComplete");
        cached_downloader.open("GET","myfont.ttf");
        cached_downloader.send();
            
    }

function handleDLComplete(sender,args)
{
    var tb = sender.findName("txtChinese"); 
    tb.setFontSource(cached_downloader);
    tb.fontFamily="myfont family";
}


function Button1_onclick() {
    var t = document.getElementById("Text1");
    var v = t.value;
    var tBlock = slControl.content.findName("txtChinese");
    tBlock.Text = v;
    
}

Now if my second page also needs access to the font that I had downloaded, I can use identical javascript to handle downloading its font, but it will load the font from the cache instead of downloading it again. This of course will work for any resource -- not just fonts.