Developing Sakai 3 style tools in Sakai 2.x

David Roma, Solutions Coordinator, CSURod 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 2AuSakai 09 - Bathurst, NSW, Australia“Sakai as a Scholarly Environment: Pedagogy, Systems, Processes and Outcomes”

MSI PROJECTa brief overview

July 2009 10th Sakai Conference - Boston, MA, U.S.A. 3

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

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

WORK FLOWsome benefits to AJAX development

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

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

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

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

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

MSI – MY OUTLINES UIa simple example

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

MSI - My Outlines UI Design

September 2009 9AuSakai 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

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

Outline Management Screen- Wireframe

•

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

Outline Management Screen- Evolution

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

Outline Management Screen- Evolution

•

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

Look and Feel

• Styling • HTML & CSS

• Behaviours• JS

• Usability & Consistency

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

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

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

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!

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

CLIENT SERVER COMMUNICATIONScontinuing the example

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

Communications Problem?

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

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

AJAX Communications Requirements

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

Ajax Communications Solution

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

Java Object

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

Java Object to HTML Conversion

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

Java Object to JSON conversion

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

Object Hierarchy

September 2009 24AuSakai 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)

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

CLIENT SIDE PROCESSINGcontinuing the example

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

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’.

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

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

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

Outline Manager List Example

July 2009 10th Sakai Conference - Boston, MA, U.S.A. 31

Outline Manager List Example

July 2009 10th Sakai Conference - Boston, MA, U.S.A. 32

Outline Manager List ExamplejQuery.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");

}});

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

Outline Manager List ExamplejQuery.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");

}});

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

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:"}

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

Outline Manager JSON example{ "message": "", “outline”: { "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:"}

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

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>

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

Outline Manager List Example

July 2009 10th Sakai Conference - Boston, MA, U.S.A. 38

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:"}

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

Outline Manager List Example

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

Outline Manager List Example

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

QUESTIONS?time for your say….

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