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\.

  1. If not already done, install subversion for cygwin.
  2. Set SVN_EDITOR to /usr/bin/vi.
  3. List the folders in the Subversion repository (to ensure credentials are set).
    svn ls $your_repository
  4. 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/YourGadget
    svn mkdir $your_repository/YourGadget/branch
    svn mkdir $your_repository/YourGadget/tags
    svn mkdir $your_repository/YourGadget/trunk
  5. Check this out to Z:\source\YourGadget
    svn co $your_repository/YourGadget/trunk /z/Source/YourGadget
  6. 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
  7. Add the source folder to Subversion.
    cd /z/source/YourGadget
    svn add src
  8. Open JDeveloper. Add project.
  9. 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.
  10. Test by running YourGadget-shell.cmd.
  11. That’s a GWT application. Now let’s make it a gadget.
  12. Add gadget specification to YourGadget/src/$your_namespace_folders/gwt/public/yourgadget.xml as:

    <?xml version=“1.0” encoding=“UTF-8” ?> 





      <![CDATA[ 
      ]]>


  13. 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.
  14. Create a web page yourgadgetcontainer.html in the same location as:

    <!DOCTYPE html>


    Test

    Test




  15. 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(' ’);
  1. 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);

}

  1. Compile the code.
    Z:\source\YourGadget>YourGadget-compile.cmd
  2. Copy the target from the www folder to the designated location, renaming the folder by removing $your_namespace_dots.
  3. Check it out at $your_website/YourGadget/yourgadgetcontainer.html.
  4. Add the new files to the repository and commit the changes.
    svn add $your_namespace_folders/gwt/public/yourgadget*
    svn commit
Back to top