UX Programming: The Sakai 3 Approach

  • 766 views
Uploaded on

 

More 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
766
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