Your SlideShare is downloading. ×
  • Like
UX Programming: The Sakai 3 Approach
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

UX Programming: The Sakai 3 Approach

  • 775 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
775
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 3. Why?
    • Previously
      • Velocity
      • RSF
      • JSF
      • Wicket
      • GWT
      • Grails
      • JSP, Servlet
      • ...
    11th Sakai Conference - June 15-17, 2010
    • New Approach
      • jQuery
      • Fluid Infusion
      • TrimPath
  • 4. Structure 11th Sakai Conference - June 15-17, 2010
      • Client side rendering
        • No data on initial load
        • Dynamic page loading
      • Widgets
        • Modular functionality
        • Rendering on demand
        • API
      • JSON (JavaScript Object Notation)
        • Lossy but concise
        • Easily parsed
  • 5. Client Side Templating 11th Sakai Conference - June 15-17, 2010
      • TrimPath
        • HTML defines template
        • JavaScript starts the render
        • JavaScript-ish templating language
    • http://code.google.com/p/trimpath/
  • 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; ] }
  • 11. Show 11th Sakai Conference - June 15-17, 2010
      • Getting started with Local Development
  • 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