Libraries and APIs CMPT 281 Overview • Basics of libraries and APIs • Rich internet applications • Examples – Scriptaculous – JQuery 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 Library A Application Library B What is an API? • “Application Programming Interface” • The set of functions or commands that is made available by a library 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 All libraries have an API JavaScript Libraries JavaScript Libraries Prototype www.prototypejs.org/ script.aculo.us script.aculo.us/ Yahoo! User Interface Library developer.yahoo.com/yui/ Dojo dojotoolkit.org/ jQuery jquery.com/ MooTools mootools.net/ Raphael raphaeljs.net 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 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 How to use JS libraries • Same principle as external JS: <script type="text/javascript" src="xyz.js“></script> • Some libraries are stored on your site: <script src="./prototype.js" type="text/javascript"></script> <script src="./scriptaculous.js" type="text/javascript"></script> • Some libraries are accessed from their home: <script src="http://code.jquery.com/jquery-latest.min.js"> </script> Example: effects in Scriptaculous 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’ <script src="libraries/prototype.js" type="text/javascript"></script> <script src=“libraries/scriptaculous.js" type="text/javascript"></script> • 4. Use the functions in the API The Scriptaculous API Core effects • new Effect.EffectName(element, params, [options]); • Example: new Effect.Opacity(‘element_id', { duration: 2.0, from: 1.0, to: 0.5 }); Scriptaculous effects demo Example: effects in JQuery Using JQuery • (see docs.jquery.com/Tutorials:Getting_Started_with_jQuery) • 1. No download required • 3. Load the library into your page <script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script> • 4. Use the functions in the API JQuery effects demo Effects without libraries? .