Hi Phillip, Supporting rendering and modifying user preferences is usually left up to the container to take care of, Shindig does not supply any UI for rendering or modifying gadget user preferences. However information about what preferences a gadget has and when a gadget changes its preferences is provided by the common container. You can see what preferences a gadget has within the metadata response from either preloading or rendering a gadget in the common container. To know when a gadget has changed a preference value you can provide a function for the config value osapi.container.ContainerConfig.SET_PREFERENCES in the config object passed into the constructor of the common container. This function takes 3 parameters, the gadget site, the gadget url, and a json object containing the preferences changed. If you want to look at a simple implementation of handling user prefs you can check out the OpenSocial Explorer [1]. The code you will be concerned about is the ExplorerContainer.js[2] and MainContainer.js[3]. ExplorerContainer is the module which creates the common container object and registers a function with the common container. MailContainer actually adds the preference values to the containers UI.
Hope this helps. [1] https://github.com/OpenSocial/explorer [2] https://github.com/OpenSocial/explorer/blob/master/opensocial-explorer-webcontent/src/main/javascript/modules/ExplorerContainer.js [3] https://github.com/OpenSocial/explorer/blob/master/opensocial-explorer-webcontent/src/main/javascript/modules/widgets/MainContainer.js On Sun, Jan 12, 2014 at 3:59 AM, Phillip Rhodes <[email protected]> wrote: > 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}