Today we are announcing the public beta of OpenSocial 0.9 with
OSML and Data Pipelining. For off-site developers and API-based apps,
we've had OpenSocial 0.9 REST APIs available for a few months, go check it out.
This beta launch today represents the second half of an exciting and feature-packed
release of OpenSocial on the MySpace Developer platform.
"What does OpenSocial 0.9 do for me?" you
might ask. There are lots of great things:
- A simple tag-based syntax for accessing data (Data Pipelining).
- A powerful template system for defining reusable content as "custom tags"
for server-side or client-side rendering (OSML).
- A rich expression language for accessing data (OpenSocial Expression Language - or OS EL).
- Improved Gadget XML support for writing cross-container apps.
- Internationalization support with message bundles.
- Faster renderings performance
Now, instead of writing 30+ lines of JavaScript code with
requests and callback handlers to get a list of friends, one Data Pipeline tag
can retrieve this data:
<os:PeopleRequest key="myFriends" userId="@viewer" groupId="@friends" />
If your app needs to display and format data and UI
components, it can be done with OSML markup instead of JavaScript. To define a
tag "myapp:PersonBlock" showing a person's name and image in a box,
use the following markup.
<script
type="text/os-template" tag="myapp:PersonBlock">
<div
style="border:3px solid green;">
<img src="${My.person.thumbnailUrl}" /> ${My.person.displayName}
</div>
</script>
Any data declared with Data Pipeline tags can be easily
accessed via the OpenSocial Expression Language (OS EL)
within your app. The code to show the name of the first friend in the
friend list registered under the key "myFriends" is as simple as
this:
The
first friend's name is: ${myFriends[0].displayName}
Improved Gadget XML support means your app's source code can
be managed with a single code file. Porting between other OpenSocial
containers will be greatly simplified. We're also exposing REST APIs for
app management. You'll be able to wire in your favorite code editing
tools for app management.
As part of the improved Gadget XML support and the new
OS EL, you can easily internationalize and localize your app to be used in
different cultures. The text of your app can be defined in different
message bundles and accessed via OS-EL statements. A "Hello
World" app supporting English and Spanish would contain code as below:
<Locale>
<messagebundle>
<msg name="greeting">Hello World</msg>
</messagebundle>
</Locale>
<Locale lang="es">
<messagebundle>
<msg name="greeting">Hola Mundo</msg>
</messagebundle>
</Locale>
...
${Msg.greeting}
This post is just a teaser of what's coming from the MySpace
Developer Platform team. Over the next several weeks we'll be diving into
the features of 0.9 in more depth, adding tutorials, and building sample apps
to get you up and running.
There will be a number of tutorials on creating OSML apps linked to from the OpenSocial Version 0.9 Wiki Page. For now, you can create a friends list app as follows:
1. Go to the developer site, sign in, and create a new On-site app named "My Friends".
2. On the Upload App XML page, scroll down and click the (Beta) App Gadget Source Editor button
3. Click the Install button on the gadget editor screen to install the app you've just created.
4. Insert the below code in the source text box and save:
<?xml version="1.0" encoding="utf-8"?>
<Module xmlns:os="http://ns.opensocial.org/2008/markup" >
<ModulePrefs title="Friends need Hello also" description="This is the desc">
<Require feature="opensocial-0.9"/>
<Require feature="opensocial-templates"/>
<Require feature="opensocial-data"/>
</ModulePrefs>
<Content type="html" view="canvas">
<script type="text/os-data">
<os:ViewerRequest key='vwr' />
<os:PeopleRequest key='friends' userId="@viewer" groupid="@friends" />
</script>
<script type="text/os-template">
<h1>Hello world, ${vwr.displayName}</h1>
Your friends are:
<div>
<os:Repeat expression="${friends}">
<p>
Friend number ${Context.index} is: ${Cur.displayName}
<img src="${Cur.thumbnailUrl}" />
</p>
</os:Repeat>
</div>
</script>
</Content>
</Module>
Happy coding!