Developing Sakai 3 style tools in Sakai 2.x

Developing Sakai 3 style tools in Sakai 2.x David Roma, Solutions Coordinator, CSU Rod Haggith, Javascript Developer, CSU Mark Walsh, Java Developer, CSU Others in development team: Hemang Joshi, Chris Dunstall, Soe soe Kyaw, Steve Githens

What are you in for?
MSI Project – a brief overview
Work flow – some benefits to AJAX development
My Outlines – a simple example
UI
Architecture overview
Client side processing
Time for Questions
September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

MSI PROJECT
a brief overview
July 2009 10th Sakai Conference - Boston, MA, U.S.A.

Mandatory Subject Information Project
Similar to Syllabus (Subject Outline)
Some Key Project Objectives
Integration (part of Sakai & use ED)
Usability (UX/performance – AJAX to assist)
Consistency (single system for all subjects)
Brief Demo
http://interactdevel.csu.edu.au

WORK FLOW
some benefits to AJAX development

Workflow – Dedicated Experts
Reap the benefits of a streamlined team
UX/UI developer(s)
Integration (service layer) developer(s)
Backend developer(s)
Focus on skill set
Reduce bottlenecks
Bottom up & top down development

Workflow – Development Speed
Client Side - HTML + AJAX allows
Much faster build and test cycles
Make UI change, hit browser refresh, test, repeat.. <1min
Server Side - RSF/JSF
Slower build and test cycles
Make UI change, re-compile/re-deploy, tomcat startup, login, test, tomcat shutdown, repeat … up to 5mins

MSI – MY OUTLINES UI
a simple example

MSI - My Outlines UI Design September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

From Mock to Release
An evolving look.
Evolution from Functional Requirement wireframes.
Evolution from Mock ups.
Evolution from Implementation

Outline Management Screen - Wireframe September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Outline Management Screen - Evolution September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Look and Feel
Styling
HTML & CSS
Behaviours
JS
Usability & Consistency

Javascript Framework - jQuery
Powerful JS Framework.
Selectors, Utility, Animation
Third party plugins used;
Tablesorter 2.0 [ http://tablesorter.com ]
qTip [ http://craigsworks.com/projects/qtip ]
Integration of plugins

Scripting within MSI
Codebase; MSI_GLOBAL and variants
Our own namespace to avoid conflicts.
Easier management.
Browser Conflicts
Only really an issue with CSS, thanks to jQuery’s most excellent framework.
Though some more ritzy methods can cause issues – ie. cross-browser scripting.
IE 6 sucks!

CLIENT SERVER COMMUNICATIONS
continuing the example

Communications Problem?
How do we enable the javascript program running in the web browser to communicate with a sakai (2.4 version) server ?

AJAX Communications Requirements September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Ajax Communications Solution September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Java Object September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Java Object to HTML Conversion September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Java Object to JSON conversion September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Object Hierarchy September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Live URL’s
http://interactdevel.csu.edu.au/direct/msi-outline.html (list)
http://interactdevel.csu.edu.au/direct/msi-outline.json (list)
http://interactdevel.csu.edu.au/direct/msi-outline/2063.json (single item)
http://interactdevel.csu.edu.au/direct/describe (available entities)
http://interactdevel.csu.edu.au/sakai-msi-tool/content/templates/msi-unit-tests.html (jqunit tests)

CLIENT SIDE PROCESSING
continuing the example

Browser Cache Considerations
Need to ensure JSON data generated by the server backend is never cached locally by browser ?
Easy to do, just append “?no-cache=true” to javascript call to entity broker url.

Browser Cache Considerations
When upgrading sakai, how to ensure modified html and javascript is loaded into the clients browser ?
One solution is to get clients to clear browser cache after each upgrade.
Another solution is to add http headers (to force browser to do a “conditional get”, ie only get new content if content has changed)

Using AJAX
AJAX / JSON
We request new information without actually reloading the web page.
Essentially firing off a given web page in the background, with the results returned programmatically.
JSON is nice to use for Javascript developers – can be used ‘out of the box’.

Outline Manager List Example
HTML is rendered
Initial JS fired off
JS sends a request to EB
EB responds with a JSON
JS parses JSON and uses the data accordingly

Outline Manager List Example July 2009 10th Sakai Conference - Boston, MA, U.S.A.

Outline Manager List Example
jQuery.ajax({
type: "GET",
url: x,
dataType:"json",
success: function(d,textStatus){
data = d;
if( (d.outline.length) == 0 ){
msi.noOutlinesFound($("#msiTable"));
msi.hideLoader();
msi.updateFrameSize();
}else{
msi.formatView();
msi.updateFrameSize();
};
},
error: function(xmlHttpReq, status, errorThrown) {
msi.hideLoader();
msi.fnCD(xmlHttpReq.statusText,"ERROR");
}
});

Outline Manager JSON example
{
"message": "",
{
"accessibleFunctions": [
"View",
"Edit",
"Delete"
],
"author": "Roderick Haggith",
"baseOutlineId": 0,
"chosenOption": 0,
"isAuthor": false,
"offerings": [
{
"offeringId": 0,
"outlineId": 4535,
"potentialAuthor": [
"Julia Lynch",
"Roderick Haggith"
],
"sessionCode": null,
"subjectCode": null,
"templateId": 0,
"title": "FIN510 200949 B D"
}
],
"potentialQA": null,
"qa": null,
"setId": 2225,
"status": "Draft",
"statusId": 1,
"title": "FIN510 200949 B D",
"visible": null
}
],
"entityReference": "/msi-user-outline-list/:ID:",
"entityURL": "http://interactdevel.csu.edu.au/direct/msi-user-outline-list/:ID:",
"entityId": ":ID:"
}

{
"message": "",
“ outline”:
{
"View",
"Edit",
"Delete"
],
"baseOutlineId": 0,
"chosenOption": 0,
"isAuthor": false,
"offerings": [
{
"offeringId": 0,
"outlineId": 4535,
"Julia Lynch",
"Roderick Haggith"
],
"templateId": 0,
"title": "FIN510 200949 B D"
}
],
"qa": null,
"setId": 2225,
"status": "Draft",
"statusId": 1,
"title": "FIN510 200949 B D",
"visible": null
}
],
"entityId": ":ID:"
}

Outline Manager HTML example
<table id="msiTable" summary=" ">
<colgroup>…</colgroup>
<thead>
<tr class="menu">
<th>Name</th>
<th>Linked Subject Offering/s</th>
<th>Status</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Outline Manager List Example July 2009 10th Sakai Conference - Boston, MA, U.S.A.

{
"message": "",
{
"View",
"Edit",
"Delete"
],
"baseOutlineId": 0,
"chosenOption": 0,
"isAuthor": false,
"offerings": [
{
"offeringId": 0,
"outlineId": 4535,
"Julia Lynch",
"Roderick Haggith"
],
"templateId": 0,
"title": "FIN510 200949 B D"
}
],
"qa": null,
"setId": 2225,
"status": "Draft",
"statusId": 1,
"title": "FIN510 200949 B D",
"visible": null
}
],
"entityId": ":ID:"
}

Outline Manager JS example
msi.constructOutlinePopup = function(x){ // x is the item clicked
var _obj = msi.getData(x), popup = new MSI_POPUP(), pd = {}, pdLength = 0;
var _aF = _obj.accessibleFunctions;
//|| ["ViewHTML","Edit","Delete","Clone"];
if (_aF.length == 0){ return false; };
/*if (_aF.length == 0 && msi.debug){
_aF = ["ViewHTML","Edit","Delete","Clone"];
};*/
for(var i = 0; i < _aF.length; i++){
var y = false;
switch (_aF[i]){
case "View": y = ["html", function(){ msi.viewHTML(_obj); }]; break;
//case "ViewPDF":pd["View PDF"] = ["pdf", function(){ MSI_GLOBAL.viewPDF(_obj); } ]; break;
case "View PDF":pd["View PDF"] = ["pdf", function(){
window.open(msi.makePDFPreviewURL(_obj.outlineId)); } ]; break;
case "Edit":y = ["pencil", function(){ msi.editItem(_obj); }]; break;
case "Delete":y = ["delete", function(){ msi.removeItem(_obj); }]; break;
case "Clone":
default: break;
};
if (y){pdLength++; pd[_aF[i]] = y; };
};
if (pdLength == 0){ return false; };
popup.create(pd);
return true;
};

Outline Manager List Example September 2009 AuSakai 09 - Bathurst, NSW, Australia “ Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

Dynamic Editor Performance
FCK Editor
Overhead
Multiple editors;
Hiding and showing - pitfalls;
Our solution – one editor for the entire screen.

QUESTIONS?
time for your say….

Developing Sakai 3 style tools in Sakai 2.x

by AuSakai on Sep 25, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 2

Statistics

Developing Sakai 3 style tools in Sakai 2.x — Presentation Transcript