Article written here is my own opinion and does not reflect my employer's point of view.
Social Media gadgets are slowly becoming popular amongst the community who are developing content in digital influence and intelligence. These gadgets provide the ability to create/connect/exchange information between friends/colleagues and others who are part of a group.
Here I am experimenting with this Apache Shindig - which is an Apache module allowing developers to create Open Social apps to create gadgets. These gadgets have the ability to handle REST and RPC requests.
The advantages of this Open Social is that the developer don't have to start from scratch as the Apache Module ( Shindig) provides it as a built in feature.
Before I go into some details: Here are my definitions of terms being used in this article.
Container : The Interface ( the web page in other words ) where the gadgets can be loaded.
Gadgets : This is xml file which has the definition of how the front end should look like. The xml file consists of paragraphs like
<Module>
<ModulePrefs > ........... </ModulePrefs>
..html code encompassed in [[ CDATA .... ]]
To get this dojo widget into the open social container - do the following.
1. In the webapps/ROOT/container folder,
Create this file and name it dojo_checkbox.html
Note : the specURL0 would point to the right/appropriate location depending on your configuration.
<!--
-->
<!DOCTYPE html>
<html>
<head>
<title>Sample: Simple Container</title>
<!-- default container look and feel -->
<link rel="stylesheet" href="gadgets.css">
<script type="text/javascript"
src="../gadgets/js/shindig-container:rpc.js?c=1&debug=1&nocache=1"></script>
<script type="text/javascript">
var specUrl0 =
'http://localhost:8080/productserver/widgets/dojo_checkbox.xml';
// This container lays out and renders gadgets itself.
function renderGadgets() {
var gadget0 = shindig.container.createGadget({specUrl: specUrl0});
shindig.container.addGadget(gadget0);
shindig.container.layoutManager.setGadgetChromeIds(
['gadget-chrome-x']);
shindig.container.renderGadget(gadget0);
};
</script>
</head>
<body onLoad="renderGadgets();">
<h2>Sample: Simple Dojo Check Box Container</h2>
<div id="gadget-chrome-x" class="gadgets-gadget-chrome"></div>
</body>
</html>
------------X-----------Done -----------X-------
Next, create the file, productserver/widgets/dojo_checkbox.xml as shown.
---------X-------- Cut and Paste -------------X------------
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello OpenSocial Gadgets!" height="200"
author="Shashi Kiran" author_email="kiranshashiny@gmail.com"
screenshot="" thumbnail="" >
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<link rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="path/to/local/dojo.js"></script>
<script>
function loader () {
dojo.require ("dijo.parser");
dojo.require ("dijit.form.CheckBox");
dojo.addOnLoad(callback);
function callback () {
new dijit.form.CheckBox ({}, dojo.byId("cb"));
}
dojo.config.parseOnLoad = true;
dojo.config.dojoBlankHtmlUrl = '/blank.html';
dojo.addOnLoad(loader);
</script>
<input id="cb" dojotype="dijit.form.CheckBox" name="developer"
checked="checked" value="on" type="checkbox" />
<label for="cb"> Are you a Developer </label>
]]>
</Content>
</Module>
--------------X-------------- Done ---------------------X-----------------
Now go to the browser and type in
http://localhost:8080/container/dojo_checkbox.html and it will render the
checkbox widget.
