Upload
others
View
8
Download
0
Embed Size (px)
Citation preview
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?