OSML and OpenSocial 0.9

1,518 views

Published on

See the technical aspects of OpenSocial 0.9 and OSML.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,518
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

OSML and OpenSocial 0.9

  1. 1. OpenSocial 0.9 and OSML
  2. 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. 3. OpenSocial 0.9 and OSML • Recently ratified by spec group • OSML & DataPipeline • oslite Javascript API 3
  4. 4. OpenSocial Markup Language (OSML) • Tag-based language for building apps • Utilizes GadgetXML format • Provides full container API support 4
  5. 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. 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. 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. 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. 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. 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. 11. Demo 11
  12. 12. Questions?

×