Quick Create Sakai Tools in Pure HTML and JavaScript<br />Lovemore Nalube<br />Developer<br />University of Cape Town<br /...
Overview<br />What you need<br />The JavaScript canvas<br />Sakai dependencies<br />Getting Sakai data<br />Dropping the a...
What you need<br />jQuery – latest v 1.4.2<br />HTML<br />Firebug<br />Pretty cool to use:<br />Fluid infusion – i18n, acc...
The JavaScript canvas<br />Namespace your code to avoid collisions and make code easy to understand.<br />var siteJoin = f...
Activate our namespace<br />Namespace your code to avoid collisions and make code easy to understand.<br />$(document).rea...
Sakai dependencies<br />REST webservices<br />Entity Broker<br />Entity Provider<br />Actions:<br />PUT, POST, GET, DELETE...
Getting Sakai data<br />Use jQuery standards<br />$.ajax({<br />                    url: "/direct/membership/join/site/" +...
Dropping the app into a site<br />Put code into a static folder like /library/ so that it is accessible via a url like thi...
Fun<br />Let’s make a toolGroup manager Demo<br />11th Sakai Conference - June 15-17, 2010<br />9<br />
More Info<br />http://confluence.sakaiproject.org/display/GRPMGR/<br />10<br />11th Sakai Conference - June 15-17, 2010<br />
Upcoming SlideShare
Loading in …5
×

Quick Create Sakai Tools in Pure HTML and JavaScript

2,731 views
2,537 views

Published on

This session will provide a technical overview on how to leverage Sakai’s REST creation abilities provided by EntityBroker to create ‘on-the-fly’ tools in just HTML, JavaScript and CSS. Sakai development time is grossly affected by the numerous UI rendering toolkits available out there. From RSF to JSF, tweaking the UI to do a simple thing can become time consuming. We will focus on moving UI development back to simple client-side coding and relying on the web services already in Sakai. REST enables you to run queries against a server and retrieve server/database specific information such as site identification or assignments results. Using this technique, UI developers can concentrate on UI and client-side development. A solid separation of concerns is created. Javascript will become the ‘link’ between server and UI. From this session, users will find out how to quickly code acceptable JavaScript applying proper anatomy, namespacing, scoping, dependency handling and error handling. Sample tools will focus on the work done by UCT on the Group Manager tool (http://tinyurl.com/yjtkafl), SMS Credits Transfer Tool, Course Evaluations and SMS Tool.
====================
VIEW VIDEOS CAST:
http://www.ustream.tv/recorded/7723054

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,731
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
27
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Quick Create Sakai Tools in Pure HTML and JavaScript

  1. 1. Quick Create Sakai Tools in Pure HTML and JavaScript<br />Lovemore Nalube<br />Developer<br />University of Cape Town<br />17 June 2010<br />
  2. 2. Overview<br />What you need<br />The JavaScript canvas<br />Sakai dependencies<br />Getting Sakai data<br />Dropping the app into a site<br />Demo<br />Lets make a “Join a site widget”<br />A new Group Manager Interface for Sakai<br />SMS Credits Transfer tool<br />2<br />11th Sakai Conference - June 15-17, 2010<br />
  3. 3. What you need<br />jQuery – latest v 1.4.2<br />HTML<br />Firebug<br />Pretty cool to use:<br />Fluid infusion – i18n, accessibility<br />QUnit – jQuery unit testing<br />3<br />11th Sakai Conference - June 15-17, 2010<br />
  4. 4. The JavaScript canvas<br />Namespace your code to avoid collisions and make code easy to understand.<br />var siteJoin = function($){<br /> //private functions and vars<br /> var privateMe = {};<br /> var privateFunction = function(){<br /> };<br /> //public functions<br /> return {<br /> init: function(){<br /> }<br /> }<br />}($);<br />4<br />11th Sakai Conference - June 15-17, 2010<br />
  5. 5. Activate our namespace<br />Namespace your code to avoid collisions and make code easy to understand.<br />$(document).ready(function() {<br /> siteJoin.init();<br />});<br />5<br />11th Sakai Conference - June 15-17, 2010<br />
  6. 6. Sakai dependencies<br />REST webservices<br />Entity Broker<br />Entity Provider<br />Actions:<br />PUT, POST, GET, DELETE<br />-> sakai level<br />-> tool level<br />6<br />11th Sakai Conference - June 15-17, 2010<br />
  7. 7. Getting Sakai data<br />Use jQuery standards<br />$.ajax({<br /> url: "/direct/membership/join/site/" + siteId,<br /> type: "POST",<br /> success: function(){<br /> alert("You have joined!");<br /> },<br /> error: function(xhr){<br /> alert("Sorry, you cannot join this site.");<br /> }<br /> });<br />7<br />11th Sakai Conference - June 15-17, 2010<br />
  8. 8. Dropping the app into a site<br />Put code into a static folder like /library/ so that it is accessible via a url like this: {server}/library/myApp/app.html<br />Use the Web Content tool to pull it in.<br />Add any parameters needed eg:<br />{server}/library/myApp/app.html?site=${SITE_ID}   <br />8<br />11th Sakai Conference - June 15-17, 2010<br />
  9. 9. Fun<br />Let’s make a toolGroup manager Demo<br />11th Sakai Conference - June 15-17, 2010<br />9<br />
  10. 10. More Info<br />http://confluence.sakaiproject.org/display/GRPMGR/<br />10<br />11th Sakai Conference - June 15-17, 2010<br />

×