Building an OpenSocial Gadget with GWT and Hosting on Your Website For this tutorial I use the following parameters: $your_repository = location of your Subversion repository.$your_namespace_dots = the namespace of your unit with dots.$your_namespace_folders = the namespace of your unit with folder delimiters.$your_website = the URL of a web site you control. I also assume you have a cygwin installed and Z:\source (mounted as /z/source) as your local source location. You can adjust as necessary, use an alternative Subversion client, or omit the Subversion sections as desired. I also assume you have GWT downloaded an unpacked to C:\Source\gwt-windows-1.5.2\. If not already done, install subversion for cygwin. Set SVN_EDITOR to /usr/bin/vi. List the folders in the Subversion repository (to ensure credentials are set).svn ls $your_repository Create a folder for the project in Subversion (depending on the structure of your repository and whether or not you place your gadget withing another project which already has branch, tags, and trunk you may omit the subfolders).svn mkdir $your_repository/YourGadgetsvn mkdir $your_repository/YourGadget/branchsvn mkdir $your_repository/YourGadget/tagssvn mkdir $your_repository/YourGadget/trunk Check this out to Z:\source\YourGadgetsvn co $your_repository/YourGadget/trunk /z/Source/YourGadget Run the GWT applicationCreator in Windows.C:\Source\gwt-windows-1.5.2\applicationCreator.cmd -out Z:\source\YourGadget $your_namespace_dots.gwt.client.YourGadget Add the source folder to Subversion.cd /z/source/YourGadgetsvn add src Open JDeveloper. Add project. Add to YourGadget.gwt.xml, references to C:\Source\gwt-windows-1.5.2\gwt-dev-windows.jar and C:\Source\gwt-windows-1.5.2\gwt-user.jar, build. Test by running YourGadget-shell.cmd. That’s a GWT application. Now let’s make it a gadget. Add gadget specification to YourGadget/src/$your_namespace_folders/gwt/public/yourgadget.xml as: The gadget specification is sufficient to host your gadget in an OpenSocial container. The following 3 steps show how you can put in on a regular web page. Create a web page yourgadgetcontainer.html in the same location as:TestTest Create yourgadget.js as:document.write(‘’);document.write(‘’);document.write(‘’);document.write(‘’);document.write(‘’);document.write(‘’); document.write(‘’);document.write(’ ‘);document.write(’ ');document.write(' renderGadgets();');document.write(' ’);Create yourgadgetbase.js as:var specUrl0 = ‘$your_website/YourGadget/yourgadget.xml’; // This container lays out and renders gadgets itself. function renderGadgets() { var div0 = document.createElement(‘div’); div0.id = “gadget-chrome-x”; div0.class = “gadgets-gadget-chrome”; document.getElementById(‘opensocial-container’).appendChild(div0);var gadget0 = gadgets.container.createGadget({specUrl: specUrl0, width: 200, height: 300});gadget0.setServerBase(‘http://gmodules.com/gadgets/’);gadgets.container.addGadget(gadget0);gadgets.container.layoutManager.setGadgetChromeIds([‘gadget-chrome-x’]);gadgets.container.renderGadget(gadget0);} Compile the code.Z:\source\YourGadget>YourGadget-compile.cmd Copy the target from the www folder to the designated location, renaming the folder by removing $your_namespace_dots. Check it out at $your_website/YourGadget/yourgadgetcontainer.html. Add the new files to the repository and commit the changes.svn add $your_namespace_folders/gwt/public/yourgadget*svn commit