1. © Blackboard, Inc. All rights reserved. Ajax and Blackboard James Black University of South Florida james@usf.edu

2. © Blackboard, Inc. All rights reserved. Ajax and Blackboard ● Handout: http://dante.acomp.usf.edu/BbDevConfHandout.pdf ● What is Ajax? ● Possible uses in Blackboard ● Pitfalls ● Testing and profiling

3. © Blackboard, Inc. All rights reserved. What is Ajax? ● Composed of: DHTML + XmlHttpRequest object. ● DHTML: programmatically rendered markup ● http://en.wikipedia.org/wiki/AJAX

4. © Blackboard, Inc. All rights reserved. How to use Ajax in Bb ● No need to refresh entire page. ● Drag and Drop items. ● Edit in place.

5. © Blackboard, Inc. All rights reserved. Pitfalls ● Taglibs ● Only in quirks mode ● Extra javascript code added by taglib. ● Browser incompatibilities implementing javascript

6. © Blackboard, Inc. All rights reserved. Browser Incompatibilities, examples  var s = 'something';  var i = s[1]; // this doesn't work on IE  var i = s.charAt(1); // This works on various browsers ➔ innerHTML works on all major browsers, but is only a readable properties if using XHTML2.0. ➔ textContent doesn't exist on IE, as a property.

7. © Blackboard, Inc. All rights reserved. Building an Ajax-based Building Block  Issues:  Response time  How many different web pages need to be made.  The UI should be consistent with Blackboard.

8. © Blackboard, Inc. All rights reserved. Tools ● Junit: Unit testing the server-side ● Jsunit: Unit testing the javascript code ● Venkman: JS debugger for Firefox ● Firebug: Extension for Firefox ● Selenium: Acceptance testing of web apps

9. © Blackboard, Inc. All rights reserved. Resources  http://www.quirksmode.org  http://www.ajaxian.com  http://www.csszengarden.com  http://hsivonen.iki.fi/doctype Which doctype to use