Last week Antonio Lupetti presented on his blog turorial on Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery.

I would like to present how I did such widget using PrototypeJS and JSON.
I left html and css unchanged and you can CHECK OUT DEMO HERE.
I used JSON-PHP library to convert $results list of objects into JSON.

search.php 


<?
header('Content-type: application/json');
//Set header to application/json to easily read JSON in javascript
require_once "lib/twitterapi.php";
require_once "lib/JSON.php";

if($_POST['twitterq']){
	$twitter_query= $_POST['twitterq'];
	$search = new TwitterSearch($twitter_query);
	$results = $search->results();
	foreach($results as $result){
		$result->text=toLink($result->text);
	}
	$json = new Services_JSON();
	echo $json->encode($results);
 }
?>


Object Stream in index.html


var Stream = {
	init: function() {
//On form twittersearch submit call xhrSearch method
		$('twittersearch').observe('submit', this.xhrSearch.bindAsEventListener(this));
//On load clear input and set focus on it
		$('twitterq').clear().focus();
//Change the scope of displayTwitts method to Stream
		this.displayTwitts = this.displayTwitts.bind(this);
//Change the scope of clearInterval method to Stream
		this._clearInterval = this._clearInterval.bind(this);
	},
	template: new Template(
//Template for each twitt
		'<div class="twitter_status" style="display: none">'+
		'<img src="#{profile_image_url}" class="twitter_image">#{text}'+
		'<span class="twitter_small">'+
		'<strong>From:</strong> <a href="http://www.twitter.com/#{from_user}">#{from_user}</a>: '+
		'<strong>at:</strong> #{created_at}'+
		'<input type="hidden" value="#{id}"></input>'+
		'</span></div>'),
	xhrSearch: function(e) {
		e.stop();
//If input field is blank set focus to it and return
		if ($F('twitterq').blank()) {
			$('twitterq').focus();
			return;
		}
//Make ajax call, default method is POST
		var xhr = new Ajax.Request("search.php", {
			parameters: {
				twitterq:$F('twitterq')
			},
//On success call xhrSearchSuccess in the Stream object scope
			onSuccess: this.xhrSearchSuccess.bind(this)
		});
	},
	xhrSearchSuccess: function(transport){
		this.i = 0;
//Due to header application/json we have JSON object in response
		this.data = transport.responseJSON;
//Set the amount of twitts to limit var
		this.limit = this.data.length;
//Set the reference to 'twitter-results' div
		this.twitterResults = $('twitter-results');
//Clear 'twitter-results' div
		this.twitterResults.update();
//Call displayTwitts method via setInterval function in 1 sec intervals
		this.intervalId = window.setInterval(this.displayTwitts,1000);
	},
	displayTwitts: function () {
//Insert each evaluated twitt into 'twitter-results' div
		this.twitterResults.insert (this.template.evaluate(this.data[this.i]));
//Show twitt in 0.5 sec time
		this.twitterResults.childElements()[this.i].appear({ duration: 0.5 });
		this.i++;
//Clear interval when the last twitt appears
		if (this.i === this.limit) {
			window.setTimeout(this._clearInterval);
		}
	},
	_clearInterval: function(){
		clearInterval(this.intervalId);
	}
}
document.observe('dom:loaded', Stream.init.bind(Stream));

That’s all! Thanks for reading.

This is my first post in english on this blog. Whole blog is in polish.
For now you can check out page about me in english.

2 Comments
API, JSON, Javascript, OOP, Prototype