1. Libraries and APIs CMPT 281

2. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery

3. What is a library? A collection of software modules that provides services to another program A way to extend the functionality of a programming language A way to modularize software development Application Library A Library B

4. What is an API? “Application Programming Interface” The set of functions or commands that is made available by a library

5. Why libraries for web development? To improve the interactive experience Many tasks are difficult with just HTML/CSS – e.g., poor set of interface widgets – Libraries allow reuse of good solutions – “javascript libraries” Many web services exist on the internet – External libraries with a different delivery model – e.g., Google Maps, Flickr, WeatherBug

6. All libraries have an API

7. JavaScript Libraries

8. Prototypewww.prototypejs.org/ script.aculo.usscript.aculo.us/ Yahoo! User Interface Librarydeveloper.yahoo.com/yui/ Dojodojotoolkit.org/ jQueryjquery.com/ MooToolsmootools.net/ Raphaelraphaeljs.net

9. What do JS libraries do? Animation effects User interface widgets JS programming shortcuts Graphics AJAX – Asynchronous Javascript And XML...and more, depending on the library

10. But, beware... Libraries can make things more complex They can change the way JS works They may not be complete or well supported They can be difficult to learn (examples!) So, don’t depend on them! – e.g., only use plain JS on the final exam, unless asked to use a library

11. How to use JS libraries Same principle as external JS: Some libraries are stored on your site: Some libraries are accessed from their home:

12. Example: effects in Scriptaculous

13. Using Scriptaculous Docs: http://madrobby.github.com/scriptaculous/ 1. Download the libraries – http://script.aculo.us/ 2. Put them where your page can see them – e.g., a libraries/ directory 3. Load them into your page – Note that ‘scriptaculous’ depends on ‘prototype’ 4. Use the functions in the API

14. The Scriptaculous API

15. Core effects new Effect.EffectName(element, params, [options]); Example: new Effect.Opacity(‘element_id', { duration: 2.0, from: 1.0, to: 0.5 });

16. Scriptaculous effects demo

17. Example: effects in JQuery

18. Using JQuery (see docs.jquery.com/Tutorials:Getting_Started_with_jQuery) 1. No download required 3. Load the library into your page 4. Use the functions in the API

19. JQuery effects demo

20. Effects without libraries?