Zero to Hero: Using the Browser Cache in Silverlight

Zero to Hero: Using the Browser Cache in Silverlight

Rate This
  • Comments 4

del.icio.us Tags:

Technorati Tags:

 

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.

 

 
Comments
  • del.icio.us Tags: Silverlight Technorati Tags: Silverlight You may be using the Silverlight downloader

  • del.icio.us Tags: Silverlight Technorati Tags: Silverlight You may be using the Silverlight downloader

  • Silverlight Cream for October 26, 2007 -- #113

  • Laurence,

    I tried twice to post a comment here, but it didn't go through.

    Can you explain why it makes a difference to declare the downloader as a "global" variable? It will be collected when the page is reloaded anyway, so why does it behave differently when it's global versus local?

    Thanks,

    Laurent

Page 1 of 1 (4 items)
Leave a Comment
  • Please add 8 and 6 and type the answer here:
  • Post