developing sakai 3 style tools in sakai 2.x
Post on 06-May-2015
977 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related