Hi all, quick question...
I'm working on using Shindig to add Google Gadgets & OpenSocial app
support to our Enterprise Social Network project, Quoddy[1]. To that
end, I'm currently trying to just spin up a minimalistic
configuration, sort of a "hello world" of CommonContainer
configuration that can render a simple gadget. That I have working,
but I notice that I currently don't get anything rendered to handle
the UserPrefs defined in the gadget XML. So, I'm wondering, is the
Gadget container supposed to be responsible for rendering controls for
the user prefs, and I'm not getting them just because I'm doing
something wrong, or is building controls for setting prefs outside of
the scope of what the Container is responsible for? If the latter,
does Shindig provide any functionality at all related to this point,
or can anyone point me to any examples of how to set this up? It
would be much appreciated.
Conversely, if I just have something configured wrong, a heads-up
would be appreciated. Here's what my minimal container page looks
like now:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Shindig Integration Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css";
type="text/css" media="all"/>
<script type="text/javascript"
src="/shindig/gadgets/js/container:open-views:opensearch:rpc:xmlutil:pubsub-2.js?c=1&debug=1&container=default"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js";></script>
<script type="text/javascript" src="assembler.js"></script>
<script type="text/javascript" src="viewController.js"></script>
<script type="text/javascript" src="layout.js"></script>
<script type="text/javascript" src="cconviews.js"></script>
<script type="text/javascript" src="search.js"></script>
<!--
<script type="text/javascript"
src="/shindig/containers/commoncontainer/assembler.js"></script>
<script type="text/javascript"
src="/shindig/containers/commoncontainer/viewController.js"></script>
<script type="text/javascript"
src="/shindig/containers/commoncontainer/layout.js"></script>
<script type="text/javascript"
src="/shindig/containers/commoncontainer/cconviews.js"></script>
<script type="text/javascript"
src="/shindig/containers/commoncontainer/search.js"></script>
-->
<meta name="layout" content="main"/>
<script type="text/javascript">
$( document ).ready(function() {
CommonContainer.init();
// Preload then add a single gadget entered by user
$("#preloadAndAddGadget").click(function() {
var gadgetUrl = $("#gadgetUrl").val();
CommonContainer.preloadGadget(gadgetUrl , function(result) {
for (var gadgetURL in result) {
alert( "gadgetURL " + gadgetURL );
if(!result[gadgetURL].error) {
alert( "building gadget" );
window.buildGadget(result, gadgetURL);
}
else
{
alert( "error: " );
$.map(result[gadgetURL].error, function(value, key) {
alert( key + " : " + value );
} );
}
}
});
return false;
});
});
</script>
</head>
<body>
<h1>Welcome</h1>
<p />
<span>Gadgets go here:</span>
<p />
<a href="#" id="preloadAndAddGadget" name="preloadAndAddGadget">Add</a>
<input id="gadgetUrl" type="text" value=""></input>
<span id="gadget-title-0"></span>
<div id="gadget-site-0" style="background-color:pink;min-height:200px;">
</div>
<hr />
<div id="output"
style="background-color:cyan;min-height:200px;margin-top:25px;"></div>
<script src="/gcontainer/static/js/application.js"
type="text/javascript" ></script>
</body>
</html>
In this scenario, I've configured Shindig to run under the /shindig
context path, and my app is running under /gcontainer, and then a
separate app under /gadgets provides my gadget.xml. The gadget I'm
working with looks like this:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Preferences for __UP_myname__" height="400"/>
<UserPref name="myname" display_name="Name" default_value="Rowan"/>
<UserPref name="myphoto" display_name="Photo"
default_value="http://doc.examples.googlepages.com/rowan-headshot.jpg"/>
<UserPref name="mychoice" display_name="Show Photo?" datatype="bool"
default_value="true"/>
<UserPref name="mycolor" display_name="Color" default_value="Yellow"
datatype="enum" >
<EnumValue value="Red" />
<EnumValue value="Aqua" />
<EnumValue value="Lime" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Orange" />
<EnumValue value="White" />
</UserPref>
<Content type="html"><![CDATA[
<div id="content_div"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new gadgets.Prefs();
function displayGreeting () {
// Get current time
var today = new Date();
var time = today.getTime();
var html = "";
// Based on the time of day, display an appropriate greeting
var hour = today.getHours();
var salutation = "Afternoon";
if (hour < 12) {
salutation = "Morning";
} else if (hour > 17) {
salutation = "Evening";
}
// Set the background color according to the mycolor userpref
var element = document.getElementById('content_div');
element.style.height=250;
// Set the background color according to the mycolor userpref
element.style.backgroundColor=prefs.getString("mycolor");
// Display a greeting based on the myname userpref
html += "<br><FONT SIZE=6>Good " + salutation + ", " +
prefs.getString("myname") + "!!!<br><br></FONT>";
// If the "Show Photo?" checkbox is checked, display photo.
if (prefs.getBool("mychoice") == true) {
html += '<img src="' + prefs.getString("myphoto") + '">';
}
element.innerHTML = html;
}
// Pass the userprefs for this module instance to the function
// (allows users to include multiple module instances on their page)
gadgets.util.registerOnLoadHandler(displayGreeting);
</script>
]]>
</Content>
</Module>
Thanks for any and all assistance!
[1]: https://github.com/fogbeam/Quoddy
Phillip Rhodes
Fogbeam Labs
This message optimized for indexing by NSA PRISM
![http://doc.examples.googlepages.com/rowan-headshot.jpg"/](http://doc.examples.googlepages.com/rowan-headshot.jpg"/){kind=link}