Lesson 05: Fetching content from VZ CDN

From VZ Developer Wiki
Jump to: navigation, search

General Guidelines | XML Specification | Features | Views | JavaScript API | REST API | Tutorials | OAuth


Lesson 04: Preferences Back to overview Lesson 06: Manipulating the Gadget Container

A successfull gadget can lead to a heavy load for loading static content (flash, images, css, external JavaScript files) very quickly. To keep your hosting costs low and the delivery of the gadget fast, we offer you a way to upload all static content to our CDN, you just have to include the files in your Gadget ZIP Package.

To keep the number of http-requests low, we suggest to upload javascript- and css-files in concatenated form (as one file).

Example for mygadget.zip

- mygadget.zip
|
+-- mygadget.xml (gadget xml file)
|
+-- css (folder)
  |
  +-- main.css
  |
+-- img (folder)
  |
  +-- img.jpg
  |
+-- js (folder)
  |
  +-- some.js
  |
+-- flash (folder)
  |
  +-- example.swf


Linking to static content

Because you can not be sure on which CDN url we deploy your gadget, you have to use relative paths to link to content which you uploaded. Relative paths work very well in CSS files or in the gadget XML metadata (thumbnail, icon, MessageBundles), but in the rendered HTML a ordinary relative path would result in a absolute path on the Shindig Gadget Server but not the CDN.

Therefor we offer some JavaScript APIs to retrieve the correct, absolute CDN URL for your gadget (see Gadgets.cache_(v0.8)).

Here are some examples:

main.css:

div#bg {
  background-image:url(../img/img.jpg);
}

some.js:

function someCallbackInJsFile() {
    var outbox = document.getElementById('flash');
    var url = gadgets.cache.getCachedUrl('flash/example.swf');
    gadgets.flash.embedFlash(url, outbox, 7);

    var img = document.getElementById('img');
    var url = gadgets.cache.getCachedPath() + 'img/img.jpg';
    img.src = url;
}

mygadget.xml:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs 
			title="my gadget"
			thumbnail="img/img.jpg"
			icon="img/img.jpg"
			>
        <Require feature="cache" />
        <Require feature="flash" />
    </ModulePrefs>
	 <Content type="html" view="canvas,popup,profile"><![CDATA[
		<div id="bg"></div>
                <div id="flash"></div>
                <div><img id="img" /></div>
		<script type="text/javascript">
			gadgets.util.registerOnLoadHandler(function() {
			    gadgets.cache.getCachedCss(['css/main.css']);
			    gadgets.cache.getCachedJs(['js/some.js'], 'someCallbackInJsFile');
			});
		</script>
  ]]></Content>
</Module>

someCallbackInJsFileis the function which will be executed after the gadget is completely loaded. This callback-function also supports namespaces , i.e. ‘My.Name.space’.

If several javascript-files are required, you should take the dependencies of your scripts into consideration.


  • Lesson 05: Fetching content from VZ CDN