UX Programming: The Sakai 3 Approach
Upcoming SlideShare
Loading in...5
×
 

UX Programming: The Sakai 3 Approach

on

  • 1,083 views

 

Statistics

Views

Total Views
1,083
Views on SlideShare
1,083
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX Programming: The Sakai 3 Approach UX Programming: The Sakai 3 Approach Presentation Transcript

  • 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?
    • Previously
      • Velocity
      • RSF
      • JSF
      • Wicket
      • GWT
      • Grails
      • JSP, Servlet
      • ...
    11th Sakai Conference - June 15-17, 2010
    • New Approach
      • jQuery
      • Fluid Infusion
      • TrimPath
  • 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
  • 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/
  • 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
  • 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
  • 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;);
  • 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)
  • 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; ] }
  • Show 11th Sakai Conference - June 15-17, 2010
      • Getting started with Local Development
  • 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