Dojo (pre 1.7) has issues working correctly in an open social gadget because of the way code is loaded.
There are 2 ways to load code in an open social gadget:
- Script tag injection
- XHR requests
In order to make XHR requests in an open social gadget, you must first have a fully built url, and then pass that url to a makeRequest or osapi.http api which will fetch the url through a proxy. Script tag injection does not suffer from the same origin limitations as xhr requests do, and thus do not need to make use of a proxy.
Dojo 1.7+ uses the script injection method of code loading, so it is recommended that gadgets use this version.
Prior versions(before 1.7) of dojo can be made to load code in the same way. Dojo will need to be built to use the cross domain (xdomain) loader. The xdomain loader is not the normal loader, so existing code could potentially have unexpected issues.
In either case, it should be noted that dojo's xhr module will not work well in a gadget environment and some tweaking is required to get it to work transparently. More info will be added later.
Examples
<Module>
<ModulePrefs title="Simple dojo 1.4.3 gadget" height="300">
</ModulePrefs>
<Content type="html"><![CDATA[
<body class="tundra">
<link rel="stylesheet" href="http://archive.dojotoolkit.org/cdn/1.4.3-cdn/google/1.4.3/dijit/themes/tundra/tundra.css" />
<script src="http://archive.dojotoolkit.org/cdn/1.4.3-cdn/google/1.4.3/dojo/dojo.xd.js"
djConfig="baseUrl: 'http://archive.dojotoolkit.org/cdn/1.4.3-cdn/google/1.4.3/dojo', parseOnLoad: true">
</script>
<script>
dojo.require("dijit.dijit");
dojo.require("dijit.Calendar");
</script>
<div dojoType="dijit.Calendar"
data-dojo-props="onChange:function(){dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})}">
</div>
<p id="formatted"></p>
</body>
]]></Content>
</Module>
<Module>
<ModulePrefs title="Simple dojo 1.7 gadget" height="300">
</ModulePrefs>
<Content type="html"><![CDATA[
<body class="tundra">
<link rel="stylesheet" href="http://downloads.dojotoolkit.org/release-1.7.1/dojo-release-1.7.1/dijit/themes/tundra/tundra.css" />
<script src="http://downloads.dojotoolkit.org/release-1.7.1/dojo-release-1.7.1/dojo/dojo.js"
data-dojo-config="async: true, baseUrl: 'http://downloads.dojotoolkit.org/release-1.7.1/dojo-release-1.7.1/dojo', parseOnLoad: true, deps: ['dojo/parser','dijit/Calendar']">
</script>
<div data-dojo-type="dijit.Calendar"
data-dojo-props="onChange:function(){dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})}">
</div>
<p id="formatted"></p>
</body>
]]></Content>
</Module>
<Module>
<ModulePrefs title="Simple dojo 1.8 gadget" height="300">
<!--
Dojo 1.8 appears to have some cdn detection and it really wants to find
the dojo script tag, so we need to tell the gadget not to rewrite it
-->
<Optional feature="content-rewrite">
<Param name="exclude-url">//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js</Param>
<Param name="exclude-url">//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/tundra/tundra.css</Param>
</Optional>
</ModulePrefs>
<Content type="html"><![CDATA[
<body class="tundra">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/tundra/tundra.css" />
<script>
dojoConfig = {
async: true,
deps: ['dojo/parser', 'dijit/Calendar'],
parseOnLoad: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, deps: ['dojo/parser','dijit/Calendar']"></script>
<div data-dojo-type="dijit.Calendar"
data-dojo-props="onChange:function(){dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})}">
</div>
<p id="formatted"></p>
</body>
]]></Content>
</Module>