Google has open sourced their internal JavaScript library under the name Closure.
You can download the library using any svn client by pointing to http://closure-library.googlecode.com/svn/trunk/ and getting everything locally into a closure-library-read-only folder.
All your custom html/js can then reside next to this folder.
To use the framework you have to load the base.js into your document.
<script src="closure-library-read-only/closure/goog/base.js">
Additionally you can import specific class by registering the namespace in your javascript code file like this:(yes its very object oriented!)
goog.require('goog.dom');
goog.require('goog.ui.Zippy');
My folder structure looks like this: (with the hello and notepad test projects)
To further browse the samples open your \closure-library-read-only\closure\goog\demos\index.html file.
It demos the power of the framework with some really cool samples.
So far I love what am seeing. Hope to build something cool real soon!
I Just finished reading Learning jQuery 1.3 by Jonathan Chaffer and Karl Swedberg.
This book provides a really indepth overview of jQuery along with many real world code samples. Its very well written and talks about all necessary topics from getting you started to Selectors, Events, Effects, DOM Manipulation, AJAX, Table Manipulation, Forms with Function, Shufflers and Rotators, Using Plugins etc.
It also talks about advanced topics like extending jQuery and writing your own plugins and contributing to the jQuery community.
They also talk about the jQuery UI plugin, jQuery UI ThemeRoller, Lightboxes, Modal Dialogs and other popular jQuery plugins.
Would highly recommend this book to anyone who is getting started with jQuery or is an experienced developer looking to get a better understanding of jQuery and the power it brings to the front-end developers.
Here is a link to this book on Amazon.
http://www.amazon.com/Learning-jQuery-1-3-Jonathan-Chaffer/dp/1847196705
Also read their Blog entries here:
http://www.learningjquery.com/
Twitter can be a very useful source for data aggregation on any particular topic. Am building an application that will search twitter using their API and then display the results using jQuery.
There are 2 ways of accomplishing something like this. We can either do the processing at the server and then populate the page or talk to Twitters REST based api directly from the client.
Methods to retrieve data from the Twitter API require a GET request.
Methods that submit, change, or destroy data require a POST. A DELETE request is also accepted for methods that destroy data. The API presently supports the following data formats: XML, JSON, and the RSS and Atom syndication.
We shall use jQuery to make a GET request into Twitter and search for the 10 most recent Tweets for a search term and then get additional tweets as required. You can refer to the search API here:
http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search
According to the API a sample search url would look like this:
http://search.twitter.com/search.json?q=searchterm&rpp=10&lang=en&callback=?
where:
q is the search term
rpp is the number of tweets desired
the callback=? is required for cross domain calls
use lang to search for tweets in a specific language only
Now we shall write some jQuery to make the request and process the returned JSON.
The completed application will allow us to search twitter. Top 10 tweets will be displayed with the ability to load more tweets.
We add some controls to the html to be able to search and display the content.
<div>
<div style="padding:10px 5px 10px 0;">
<input type="text" id="searchText" /> <input type="button" value="Search Twitter" id="searchButton" />
</div>
<div id="tweetSubContainer"></div>
<div id="tweetMainContainer"></div>
<input id="getMoreTweetsButton" type="button" value="Get More Tweets" />
</div>
On dom ready we attach a click event to the searchButton to empty old tweets from the main container and hide the getMoreTweetsButton and then call the GetTweets function passing in the search text from the textbox.
$(document).ready(function() {
var basehUrl = "http://search.twitter.com/search.json";
$('#searchButton').click(function() {
$("#tweetMainContainer").empty();
$("#getMoreTweetsButton").hide();
GetTweets($('#searchText').val(), 10);
});
$("#getMoreTweetsButton").hide();
});
The GetTweets function accepts a query and count and performs the desired search. On success the ApplyTwitterTemplate function processes the data. Note we use the getJSON method to get the json.
function GetTweets(query, count) {
var searchUrl = "http://search.twitter.com/search.json?q=" + query + "&rpp=" + count + "&lang=en&callback=?";
$.getJSON(searchUrl, function(data) {
ApplyTwitterTemplate(data);
});
}
In this sample we shall use a jQuery addon called jTemplates to process the returned json data. Its basically a templating engine that makes creating dynamic dom elements fast and easy.
Read more here: http://jtemplates.tpython.com/
In the ApplyTwitterTemplate function we populate a clone of the tweetSubContainer div with the jTemplate (Twitter.htm) and then we append the resulting html to the tweetMainContainer div. We also use the next_page property of the returned json to get the next page of tweets when the getMoreTweetsButton is clicked.
function ApplyTwitterTemplate(data) {
$tweetSubContainer = $("#tweetSubContainer").clone();
$tweetSubContainer.hide();
$tweetSubContainer.setTemplateURL('Twitter.htm',
null, { filter_data: false });
$tweetSubContainer.processTemplate(data);
$("#tweetMainContainer").append($tweetSubContainer);
//show get more button and set next page url
$("#getMoreTweetsButton").unbind('click', null);
$("#getMoreTweetsButton").click(function() {
GetMoreTweets(data.next_page);
}).show();
$tweetSubContainer.fadeIn("slow");
}
The Twitter.htm template is basically a template that binds to the returned data and generates the html for us. Within the template we loop through all the tweets and populate the html using various properties of the JSON objects. For example from_user is the username and text is the actual tweeted text.
<table width="800px">
{#foreach $T.results as tweet}
<tr>
<td>
<a href="http://www.twitter.com/{$T.tweet.from_user}">
<img src="{$T.tweet.profile_image_url}" width="50" height="50" border="0" />
</a>
</td>
<td>
<strong><a href="http://twitter.com/{$T.tweet.from_user}">{$T.tweet.from_user}</a></strong>
{$T.tweet.text}<br />
Created on: {$T.tweet.created_at}</span>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
{#/for}
</table>
Finally we implement code to get and append additional tweets to the mainTweetContainer when the getMoreTweetsButton is clicked. Note that the query in this case is the next_page property returned in the previous call.
function GetMoreTweets(query) {
var searchUrl = "http://search.twitter.com/search.json" + query + "&callback=?";
$.getJSON(searchUrl, function(data) {
ApplyTwitterTemplate(data);
});
}
Checkout the code in action here.
Download Code:
Recently I had to code some functionality that required event delegation in JavaScript.
After searching I came across this great post by Karl Swedberg about how events can be delegated using jQuery.
This can be a very useful approach if you want to add new elements to the DOM and have them react to events without re-binding events handlers or if your page simply has too many elements that need to be wired to an event.
The basic concept it simple: Instead of attaching an event to an individual element attach it to the parent and then get the target of the event when it is raised.
Read the complete post here:
http://www.learningjquery.com/2008/03/working-with-events-part-1
In his next article Karl looked at re-binding event handlers instead of delegation.
http://www.learningjquery.com/2008/05/working-with-events-part-2
Using Silverlight, FlickNet library and Windows Communication Foundation to search public photos for a Flickr user.