Set 5: Web Development Toolkits

1
Set 5 Web Development Toolkits
IT452 Advanced Web and Internet Systems
2
Why Use a Toolkit?
Hide browser differences. Simplifies
code. Advanced features. Why re-invent the wheel?

• Choices
• jQuery www.jQuery.com
• Yahoo! UI Library (YUI) developer.yahoo.com/yui
• Google Web Toolkit
• Dojo
• Prototype
• more

3
jQuery Selectors

• Get all paragraphs that are children of ID
  target
• Vanilla Javascript
• jQuery Selector

var children document.getElementById(target)
var keep new Array() var ii 0 for( xx in
children ) if( childrenxx.tagName P )
keepii childrenxx
var keep (target p)
4
jQuery Selector Patterns

• Selector Patterns
• (p) - all ltpgt elements
• (target) - all elements with id target
• (div p) - all ltpgt elements in a ltdivgt
• (p.emph) - all ltpgt elements of class emph
• () - all elements in the DOM!
• (imgborder1) - all images with borders of 1
• ..

5
The jQuery Object

• Selectors return jQuery Objects
• They can act like arrays
• (div)1
• (div).get(1)
• (div).length
• var arr (div).get()

All jQuery functions operate on jQuery objects
Convert to an actual Array object
6
The jQuery Object

• Selectors return jQuery Objects
• They can perform CSS and animation tricks
• (a).css("color", "red")
• (a).css("border", "1px solid blue")
• (p).text(new text)
• (target).hide()
• (p).animate(
• opacity0.2, marginLeft40px ,
• 5000 ) \\ 5 seconds
• http//api.jQuery.com/category/css/
• http//api.jQuery.com/category/effects/

Makes transparent and moves the object to the
rightover 5 seconds time.
7
The jQuery Object

• Selectors return jQuery Objects
• They have many convenience functions
• (target).parent()
• .first()
• .last()
• .is(function)
• .add(Object)
• .next(Selector)
• .filter(Selector)
• http//api.jQuery.com/category/traversing/

is() does arbitrary boolean testing
.next(contains(you)) Gets the siblings that
match the Selector in the DOM tree
.filter(contains(you)) Reduce current
matched elements to those that match the filter
8
Event Handling

• ('target').click(function()
• alert('Handler for .click() called.')
• )

Remove on from onclick Blur Focus Hover Mouseove
r Etc.
9
Ajax with jQuery
NO messing with browser differences!

• The most basic call
• .get("data.txt",
• function(data) alert("received reply!
  " data) )
• Full Options
• var ajaxSettings
• type POST",
• url "data.txt",
• data "namechamberslocationUSNA",
• success function(data)
• ('target').append("ltpgt"data"lt/pgt").css("c
  olor","blue") ,
• error function(xhr, status, error)
  alert("error " error)
• .ajax(ajaxSettings)

No more status code checking!
NOTE can send data
10
Autocomplete with jQuery

• Use a plugin for jQuery

ltheadgt ltscript type"text/javascript"
src"http//ajax.googleapis.com/ajax/libs/jquery/1
.7/jquery.min.js"gtlt/scriptgt ltlink
rel"stylesheet" type"text/css"
href"jquery.autocomplete.css"gt ltscript
type"text/javascript" src"jquery.autocomplete.js
"gtlt/scriptgt ltscript type"text/javascript"gt
function onload() ("query").autocomplet
e( url 'search.txt',
useCache false, filterResults false,
) lt/scriptgt lt/headgt ltbody
onload"onload()"gt ltformgt ltpgtLocal data ltinput
type"text" id"query" /gt lt/formgt lt/bodygt
You provide SERVER-SIDE data. Plugin does
everything else for you. NO AJAX SETTINGS!
Sends
11
jQuery Autocomplete (Fake Perl)

• !/usr/bin/perl
• use strict
• use CGI qw( standard )
• use CGICarp qw(warningsToBrowser
  fatalsToBrowser)
• print "Content-Type text/plain
  charsetUTF-8\n\n"
• open(IN,"search.txt") die "Cannot open
  search.txt (!)\n"
• while( my line ltINgt )
• print "line"
• close IN
• What do you need to change?
  
  
  

• Need to get query
• Do SQL query based on that
• Send back results

12
What else can we do?

• Photo Slideshows
• Tab Views
• Calendars, Date Pickers
• Buttons galore
• File Uploading
• Drag and Drop
• many more

13
How do I start?
Goal is to practice learning from
documentation. Show the getting started
part And Examples from each thing
14
Some Sites with jQuery Plugins

• http//jquerylist.com/
• http//jquerystyle.com/
• http//jquery.malsup.com/
• http//bassistance.de/jquery-plugins/
• (cool photo slider) http//slidesjs.com/