Set 5: Web Development Toolkits

Set 5: Web Development Toolkits IT452 Advanced Web and Internet Systems

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

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( children[xx].tagName == “P” ) • keep[ii++] = children[xx]; • var keep = $(“#target p”);

jQuery Selector Patterns • Selector Patterns • $(‘p’) - all <p> elements • $(‘#target’) - all elements with id “target” • $(‘div p’) - all <p> elements in a <div> • $(‘p.emph’) - all <p> elements of class “emph” • $(‘*’) - all elements in the DOM! • $(‘img[border=1]’) - all images with borders of 1 • …..

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

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( { opacity:0.2, marginLeft:”40px” }, 5000 ); \\ 5 seconds http://api.jQuery.com/category/css/ http://api.jQuery.com/category/effects/ Makes transparent and moves the object to the right…over 5 seconds time.

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

Event Handling $('#target').click(function() { alert('Handler for .click() called.'); }); Remove “on” from onclick Blur Focus Hover Mouseover Etc.

Ajax with jQuery NO messing with browser differences! • The most basic call: $.get("data.txt", function(data) { alert("received reply! " + data); } ); • Full Options: varajaxSettings = { type: “POST", url: "data.txt", data: "name=chambers&location=USNA", success: function(data) { $('#target').append("<p>"+data+"</p>").css("color","blue"); }, error: function(xhr, status, error) { alert("error: " + error); } }; $.ajax(ajaxSettings); No more status code checking! NOTE: can send data

Autocomplete with jQuery • Use a plugin for jQuery <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript"> function onload() { $("#query").autocomplete({ url: 'search.txt', useCache: false, filterResults: false, }); } </script> </head> <body onload="onload()"> <form> <p>Local data: <input type="text" id="query" /> </form> </body> You provide SERVER-SIDE data. Plugin does everything else for you. NO AJAX SETTINGS! Sends

jQuery Autocomplete (Fake Perl) #!/usr/bin/perl use strict; use CGI qw( :standard ); use CGI::Carp qw(warningsToBrowser fatalsToBrowser); print "Content-Type: text/plain; charset=UTF-8\n\n"; open(IN,"search.txt") || die "Cannot open search.txt ($!)\n"; while( my $line = <IN> ) { print "$line"; } close IN; What do you need to change? • Need to get ‘query’ • Do SQL query based on that • Send back results

What else can we do? • Photo Slideshows • Tab Views • Calendars, Date Pickers • Buttons galore • File Uploading • Drag and Drop • … many more

How do I start? Goal is to practice learning from documentation. Show the “getting started” part And “Examples” from each thing

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/

Set 5: Web Development Toolkits