Your SlideShare is downloading. ×
0
UX Programming: The Sakai 3 Approach Chris Roby, 70BPM Carl Hall, Hallway Technologies 15 June 2010
Structure 11th Sakai Conference - June 15-17, 2010
Why? <ul><li>Previously </li></ul><ul><ul><li>Velocity </li></ul></ul><ul><ul><li>RSF </li></ul></ul><ul><ul><li>JSF </li>...
Structure 11th Sakai Conference - June 15-17, 2010 <ul><ul><li>Client side rendering </li></ul></ul><ul><ul><ul><li>No dat...
Client Side Templating 11th Sakai Conference - June 15-17, 2010 <ul><ul><li>TrimPath </li></ul></ul><ul><ul><ul><li>HTML d...
Client Side Templating 11th Sakai Conference - June 15-17, 2010 <div id=&quot;contentmedia_accordion_list_site_template&qu...
Widget Structure 11th Sakai Conference - June 15-17, 2010 &quot;createsite&quot;: {      &quot;description&quot;:&quot;Cre...
Widget Loading 11th Sakai Conference - June 15-17, 2010 <div id=&quot; widget_footer123456 &quot;>    <div id=&quot;widget...
Widget Data API 11th Sakai Conference - June 15-17, 2010 sakai.api.Widgets.loadWidgetData(&quot;widget_footer123456&quot;)...
Data 11th Sakai Conference - June 15-17, 2010 JSON (JavaScript Object Notation) { &quot;user&quot;:&quot;ch1411&quot;, &qu...
Show 11th Sakai Conference - June 15-17, 2010 <ul><ul><li>Getting started with Local Development </li></ul></ul>
Thanks! 11th Sakai Conference - June 15-17, 2010 Chris Roby    [email_address]    @croby Carl Hall    [email_address]    @...
Upcoming SlideShare
Loading in...5
×

UX Programming: The Sakai 3 Approach

812

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
812
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "UX Programming: The Sakai 3 Approach"

  1. 1. UX Programming: The Sakai 3 Approach Chris Roby, 70BPM Carl Hall, Hallway Technologies 15 June 2010
  2. 2. Structure 11th Sakai Conference - June 15-17, 2010
  3. 3. Why? <ul><li>Previously </li></ul><ul><ul><li>Velocity </li></ul></ul><ul><ul><li>RSF </li></ul></ul><ul><ul><li>JSF </li></ul></ul><ul><ul><li>Wicket </li></ul></ul><ul><ul><li>GWT </li></ul></ul><ul><ul><li>Grails </li></ul></ul><ul><ul><li>JSP, Servlet </li></ul></ul><ul><ul><li>... </li></ul></ul>11th Sakai Conference - June 15-17, 2010 <ul><li>New Approach </li></ul><ul><ul><li>jQuery </li></ul></ul><ul><ul><li>Fluid Infusion </li></ul></ul><ul><ul><li>TrimPath </li></ul></ul>
  4. 4. Structure 11th Sakai Conference - June 15-17, 2010 <ul><ul><li>Client side rendering </li></ul></ul><ul><ul><ul><li>No data on initial load </li></ul></ul></ul><ul><ul><ul><li>Dynamic page loading </li></ul></ul></ul><ul><ul><li>Widgets </li></ul></ul><ul><ul><ul><li>Modular functionality </li></ul></ul></ul><ul><ul><ul><li>Rendering on demand </li></ul></ul></ul><ul><ul><ul><li>API </li></ul></ul></ul><ul><ul><li>JSON (JavaScript Object Notation) </li></ul></ul><ul><ul><ul><li>Lossy but concise </li></ul></ul></ul><ul><ul><ul><li>Easily parsed </li></ul></ul></ul>
  5. 5. Client Side Templating 11th Sakai Conference - June 15-17, 2010 <ul><ul><li>TrimPath </li></ul></ul><ul><ul><ul><li>HTML defines template </li></ul></ul></ul><ul><ul><ul><li>JavaScript starts the render </li></ul></ul></ul><ul><ul><ul><li>JavaScript-ish templating language </li></ul></ul></ul><ul><li>http://code.google.com/p/trimpath/ </li></ul>
  6. 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. 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. 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. 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. 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; ] }
  11. 11. Show 11th Sakai Conference - June 15-17, 2010 <ul><ul><li>Getting started with Local Development </li></ul></ul>
  12. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×