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

Application

Library A

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?