See the technical aspects of OpenSocial 0.9 and OSML.

1. OpenSocial 0.9 and OSML

2. Introductions
Chris Cole
Architect with MySpace Open Platform
co-author of upcoming book
“Building OpenSocial Apps for MySpace”
Max Newbould
Development Manager – OpenSocial Container
2

3. OpenSocial 0.9 and OSML
• Recently ratified by spec group
• OSML & DataPipeline
• oslite Javascript API
3

4. OpenSocial Markup Language (OSML)
• Tag-based language for building apps
• Utilizes GadgetXML format
• Provides full container API support
4

5. OSML – Custom Tag Templates
• Declare and use custom tags for common UI elements
<script type=quot;text/os-templatequot; tag=quot;my:ParamBorderTagquot;>
<div style=quot;margin:20px;border:12px solid
${My.borderColor};padding:20px;width:220px;quot;>
This tag uses borderColor: ${My.borderColor}
</div>
</script>
...
<my:ParamBorderTag>
<borderColor>Green</borderColor>
</my:ParamBorderTag>
5

6. OSML – Internationalization Support
<Locale>
<MessageBundle>
<Msg name=quot;helloworldquot;>Hello World</Msg>
<Msg name=quot;congratsquot;>Congratulations on using OSML</Msg>
</MessageBundle>
</Locale>
<Locale lang=quot;dequot;> <h1>${Msg.helloworld}</h1>
<MessageBundle>
<Msg name=quot;helloworldquot;>Hallo Welt</Msg>
<Msg name=quot;congratsquot;>Herzlichen Glückwunsch zur Verwendung OSML</Msg>
</MessageBundle>
</Locale>
<Locale lang=quot;jaquot;>
<MessageBundle>
<Msg name=quot;helloworldquot;> </Msg>
<Msg name=quot;congratsquot;> OSML </Msg>
</MessageBundle>
</Locale>

7. Data Pipeline
• Declare and use data simply
– No need for 20+ lines of Javascript & callback functions
<os:ViewerRequest key=“Viewer” >
...
<h1>Hello, ${Viewer.Name}</h1>
7

8. Data Pipeline
• Not old-style data call
function requestMe() { var req =
opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(
opensocial.DataRequest.PersonId.VIEWER), quot;viewerquot;);
req.send(handleRequestMe);
};
function handleRequestMe(data) {
var viewer = data.get(quot;viewerquot;);
if (viewer.hadError()) { /
/Handle error using viewer.getError()...
return;
}
//No error. Do something with viewer.getData()... }

9. HTML Fragment Rendering
• Simple
<os:Get href=quot;http://example.org/stuff/${vwr.id}quot; />
• Rich
<myspace:RenderRequest src=quot;http://example.org/stuff/showitquot;
method=quot;postquot; target=quot;xDivquot; >
<id>${vwr.id}</id>
<name>${vwr.name}</name>
<stuffCount>4</stuffCount>
</myspace:RenderRequest>
• Full content
<Content href=quot;http://example.org/stuff>
<os:ViewerRequest key=quot;vwrquot; fields=quot;id,namequot; />
</Content>
9

10. oslite API
• Shortened and cleaned Javascript API
• Provides 1:1 mapping between JS calls and REST calls
var batch = osapi.newBatch();
osapi.people.getViewer({fields: ['name', 'birthday']},
batch('viewer'));
osapi.people.get({userId: '@owner', groupId: '@friends',
batch('ownerFriends'));
batch.execute(function(result) {
alert('Your name is ' + result.viewer.name + '!');
alert('You have ' + result.ownerFriends.length + '
friends!');
});
10

11. Demo
11

12. Questions?