Profile App Examples

Hello, World!

Note

Some of the tutorials and tutorial descriptions provided are based on the OpenSocial Tutorial for Orkut. Due to the open nature of OpenSocial, you may find that a lot of the Ning OpenSocial Applications that you create can easily be ported to other OpenSocial containers such as Orkut, hi5 and MySpace with very little additional development time, and vice versa.

OpenSocial Applications are essentially XML files that adhere to the OpenSocial specifications.

To create a quick “Hello World” application, paste the following code into the Google Gadget Editor, or an XML file.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Hello, world!">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html"><![CDATA[
    <script type="text/javascript">
        function init() {
           document.getElementById("handler").innerHTML = "Hello, world.";
        }
        gadgets.util.registerOnLoadHandler(function() { init(); });
    </script>

    <div id="handler"></div>
    ]]></Content>
</Module>

You can view a live example of this on http://os.ning.com/apps/tutorials/hello-world.xml

Once the OpenSocial Application is loaded inside a container, registerOnLoadHandler is called. In this case, the function calls the JavaScript init() function which writes “Hello, world.” to the “handler” HTML element.

A key element in this example is the use of <Require feature="opensocial-0.8"/> as a parameter of the module declaration. This specifies the release of opensocial required by the module. Containers may or may not implement all possible versions of the OpenSocial API, and when they don’t the member will see an error. <![CDATA\[ ... ]]> contains the bulk of the gadget, including all of the HTML, CSS, and JavaScript (or references to such files). The content of this section should be treated like the content of the body tag on a generic HTML page.

From there, you can simply save your gadget as a file in your network (through WebDav) in a new directory, OpenSocial, with the name for example helloworld.xml. You can also can develop your XML document off an external server. Once you have done that, you can add your XML file to the profile page of your Ning Network. Detailed instructions on how to add your OpenSocial Application are listed later in this document: Testing Your Ning App.

The process of editing an XML file, uploading it to a server and re-evaluating the code you just wrote can be a tedious process. Thankfully, use can use the OpenSocial Dev App where you can cut and paste JavaScript code into a textbox, where the code is run client-side; this tool is pretty handy, especially with developers who are comfortable with JavaScript and would just like to experiment with the more OpenSocial based methods. Due to the slightly different nature of Ning Apps, we have created an instance of the OpenSocial Dev App that includes some Ning only properties. The file is available here: http://gadgetstore.ning.com/gadgets/coderunner/coderunner08.xml.

Hello, Different Views!

Once we understand the basic concept of the Content section and how it’s used to show HTML, CSS and JavaScript inside, we can expand that idea with the view attribute, used if you want to show conditional content based on if you’re viewing the OpenSocial Application in the canvas view or profile view. This can be useful from a user experience perspective, possibly showing less detailed information where the viewport is smaller.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Test app">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html" view="canvas,profile"><![CDATA[
        <p>Hello, world!</p>
      ]]></Content>
  <Content type="html" view="profile"><![CDATA[
        <p>Hello, Profile View!</p>
      ]]></Content>
  <Content type="html" view="canvas"><![CDATA[
        <p>Hello, Canvas View!</p>
      ]]></Content>
</Module>

In the following example, “Hello, Profile View!” and “Hello, Canvas View!” is shown is the profile and canvas views, respectively. “Hello, world!” is displayed for the canvas and profile views.

GitHub Repositories

As a way to reach out to the developer community as well as show examples of best practices of OpenSocial based applications that are used internally within Ning, we have made two of our Ning Apps, Twitter Tracker and Top Friends, available to the developer community under an Apache 2.0 License. The repositories are available in the following locations: