...
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 laterAn example of piping dojo's xhr requests through osapi is shown below.
Examples
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<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>
|
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<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>
|
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<Module>
<ModulePrefs title="Dojo 1.8 xhr demo" height="300">
<Require feature="osapi" />
<!--
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 = {
has: {
'native-xhr2': false // Because our xhr wrapper doesn't have these methods.
},
async: true,
deps: ['dojo/request/xhr', 'dojo/aspect', 'dojo/_base/lang', 'dojo/parser', 'dijit/form/Button'],
callback: function(xhr, aspect, lang) {
// Use dojo/aspect to override the dojo/request/xhr xhr factory.
aspect.around(xhr, '_create', function(orig) {
// Our osapi.http wrapper masquarading as an xhr object.
// This wrapper could be stubbed out into an AMD module, but is shown here for self-containedness.
function wrapper(args) {
this.readyState = this.status = 0;
this.responseText = this.statusText = '';
}
wrapper.prototype.open = function(method, url, async, user, pass) {
if(!osapi.http) {
throw new Error('osapi.http not found. Did you request the osapi feature in your gadget?');
}
if(user || pass) {
throw new Error('User and password arguments not supported in osapi.http requests.');
} else if(!async) {
throw new Error('Synchronous mode not supported in osapi.http requests.');
} else if(!method || !url) {
throw new Error('Invalid arguments.');
}
this.method = method.toLowerCase();
this.href = url.replace(/([?&])dojo\.preventCache=[0-9]+(.)?/, function(match, g1, g2) {
return g1 == '?' && g2 ? g1 : '';
});
};
wrapper.prototype.send = function(data){
if(this.method == 'post') {
this.data_ = data;
}
osapi.http[this.method]({format: 'text', href: this.href, headers: this.headers}).execute(lang.hitch(this, function(response) {
if(this.aborted) {
return;
}
if(response.error) {
this.status = response.error.code;
this.statusText = response.error.message;
} else {
this.status = response.status;
var content = this.responseText = response.content;
try {
// dojo handles the ie use case if this is missing.
this.xmlDoc = new DOMParser().parseFromString(content, "text/xml");
} catch (error){}
}
// handle response headers
for(var header in (response.headers || {})) {
var lc = header.toLowerCase();
if(lc != 'set-cookie' && lc != 'set-cookie2') {
this.respHeaders[header] = response.headers[header];
}
}
this.readyState = 4;
this.onreadystatechange();
}));
this.readyState = 1;
this.onreadystatechange();
};
wrapper.prototype.setRequestHeader = function(name, value) {
if(name && value) {
var headers = this.headers || (this.headers = {}),
values = headers[name] || (headers[name] = []);
values.push(value);
}
};
wrapper.prototype.getResponseHeader = function(header) {
return this.respHeaders[header];
};
wrapper.prototype.getAllResponseHeaders = function() {
var buffer = [], i = 0, headers = this.respHeaders || {};
for(var header in headers) {
if (headers.hasOwnProperty(header)) {
buffer[i++] = header + ': ' + headers[header];
}
}
return buffer.join('\r\n');
};
wrapper.prototype.abort = function() {
this.aborted = 1;
};
wrapper.prototype.onreadystatechange = function(){};
// Return our xhr wrapper factory
return function() {
return new wrapper(); // Overriding dojo/request/xhr._create()
};
});
},
parseOnLoad: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<button data-dojo-type="dijit/form/Button" type="button">Click me!
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(['dojo/request/xhr', 'dojo/dom'], function(xhr, dom){
dom.byId("result2").innerHTML = '';
xhr("http://www.google.com").then(function(data){
dom.byId("result2").innerHTML = data;
}, function(err){
console.error(err);
});
});
</script>
</button>
<div id="result2"></div>
</body>
]]></Content>
</Module>
|