1. UX Programming: The Sakai 3 Approach Chris Roby, 70BPM Carl Hall, Hallway Technologies 15 June 2010

2. Structure 11th Sakai Conference - June 15-17, 2010

6. Client Side Templating 11th Sakai Conference - June 15-17, 2010 <div id=&quot;contentmedia_accordion_list_site_template&quot;><!-- {if items.length > 0} <div class=&quot;contentmedia_accordion_list&quot;> {/if} {for item in items} <a href=&quot;javascript:;&quot;> {if item && item.site && item.site.name} ${item.site.name} {/if} <span class=&quot;contentmedia_hidden&quot;>${item.siteref}</span></a> {forelse} No sites found {/for} {if items.length > 0} </div> {/if} --></div> ------------------------------------------------------------------------------------------------------------------------------------------------ // Render files $.TemplateRenderer(contentmediaFilesContainerTemplate, globaldata, contentmediaFilesContainer); HTML Template (commented section) JS call to render

7. Widget Structure 11th Sakai Conference - June 15-17, 2010 &quot;createsite&quot;: { &quot;description&quot;:&quot;Create site&quot;, &quot;name&quot;:&quot;Create Site&quot;, &quot;id&quot;:&quot;createsite&quot;, &quot;i18n&quot;: { &quot;default&quot;: &quot;/devwidgets/createsite/bundles/default.json&quot;, &quot;en_US&quot;: &quot;/devwidgets/createsite/bundles/en_US.json&quot;, &quot;zh_CN&quot;: &quot;/devwidgets/createsite/bundles/zh_CN.json&quot; }, &quot;url&quot;:&quot;/devwidgets/createsite/createsite.html&quot; }, dev/_configuration/widgets.js

8. Widget Loading 11th Sakai Conference - June 15-17, 2010 <div id=&quot; widget_footer123456 &quot;> <div id=&quot;widget_ createsite &quot; class=&quot;widget_inline&quot;></div> </div> ----------------------------------------------------------------------------- sakai.api.Widgets.widgetLoader.insertWidgets(&quot;widget_footer123456&quot;);

9. Widget Data API 11th Sakai Conference - June 15-17, 2010 sakai.api.Widgets.loadWidgetData(&quot;widget_footer123456&quot;); sakai.api.Widgets.saveWidgetData(&quot;widget_footer123456&quot;, widgetData); (&quot;widget_footer123456&quot; is a widget tuid)

10. Data 11th Sakai Conference - June 15-17, 2010 JSON (JavaScript Object Notation) { &quot;user&quot;:&quot;ch1411&quot;, &quot;sakai:status&quot;:&quot;online&quot;, &quot;sakai:location&quot;:&quot;none&quot;, &quot;contacts&quot;:[ &quot;cr1331&quot;, &quot;zt258&quot;, &quot;maw1&quot; ] }

12. Thanks! 11th Sakai Conference - June 15-17, 2010 Chris Roby [email_address] @croby Carl Hall [email_address] @thecarlhall Master UX Github Repository http://github.com/oszkarnagy/3akai-ux