OpenSocial 0.9 and OSML

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

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

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

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

OSML – Internationalization Support
<Locale>
<MessageBundle>
<Msg name=\"helloworld\">Hello World</Msg>
<Msg name=\"congrats\">Congratulations on using OSML</Msg>
</MessageBundle>
</Locale>
<Locale lang=\"de\"> <h1>${Msg.helloworld}</h1>
<MessageBundle>
<Msg name=\"helloworld\">Hallo Welt</Msg>
<Msg name=\"congrats\">Herzlichen Glückwunsch zur Verwendung OSML</Msg>
</MessageBundle>
</Locale>
<Locale lang=\"ja\">
<MessageBundle>
<Msg name=\"helloworld\"> </Msg>
<Msg name=\"congrats\"> OSML </Msg>
</MessageBundle>
</Locale>

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

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

HTML Fragment Rendering
• Simple
<os:Get href=\"http://example.org/stuff/${vwr.id}\" />
• Rich
<myspace:RenderRequest src=\"http://example.org/stuff/showit\"
method=\"post\" target=\"xDiv\" >
<id>${vwr.id}</id>
<name>${vwr.name}</name>
<stuffCount>4</stuffCount>
</myspace:RenderRequest>
• Full content
<Content href=\"http://example.org/stuff>
<os:ViewerRequest key=\"vwr\" fields=\"id,name\" />
</Content>
9

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

Demo
11

Questions?