Pull to Refresh in android, plus a demo

app.js

/* 
  Copyright 2011 Pedro Enrique

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
*/


// Namespace for useful functions (Utils)
var Utils = {};
Utils.XHR = function(params){
	
	params = params || {};
	
	params.method = params.method || 'GET';
	params.url = params.url || 'http://google.com/';
	
	
	var xhr = Ti.Network.createHTTPClient();
	
	xhr.onload = function(){
		params.success(this.responseText);
	};
	
	xhr.onerror = function(){
		params.error(this.responseText);
	};
	
	params.cancel = function(){
		xhr.abort();
	};
	
	xhr.open(params.method,params.url);
	xhr.send();
};

// Namespace for complex UI elementes (V as in views)
var V = {};
V.PullToRefreshTableView = function(){
	var controller = {};
	
	controller.onRefresh = controller.onRefresh || controller.restore;
	
	var table = Ti.UI.createTableView();
	
	var pulling = false;
	var timer = null;
	var scrollTo = 2;
	var refreshing = false;
	var firstTime = true;
	
	table.scrollToIndex(scrollTo);

	var emptySpace = Ti.UI.createTableViewRow({
			height:150
	});
	
	var titleRow = Ti.UI.createTableViewRow({
			title:'Pull to refresh'
	});
	
	table.addEventListener('scroll', function(e){
		var visibleRow = e.firstVisibleItem;
		table.firstVisibleItem = visibleRow;
		pulling = true;
		if(visibleRow == 0 && refreshing == false){
			if(timer == null && firstTime == false){
				timer = setTimeout(function(){
					timer = null;
					scrollTo = 1;
					table.scrollToIndex(scrollTo);
					controller.onRefresh();
					refreshing = true;
				},600);
			}
			firstTime = false;
		} else {
			refreshing = false;
			if(timer != null){
				clearTimeout(timer);
				timer = null;
			}
		}
		
	});
	
	table.addEventListener('scrollEnd', function(){
		pulling = false;
		refreshing = true;
		if(timer != null){
			clearTimeout(timer);
			timer = null;
		}
		if(table.firstVisibleItem == 0){
			table.scrollToIndex(scrollTo);
		}
	});
	
	controller.table = table;
	controller.loadRows = function(rows){
		rows = rows || [];
		rows.unshift(titleRow);
		rows.unshift(emptySpace);
		table.setData(rows);
		table.scrollToIndex(scrollTo);
	};
	controller.restore = function(){
		scrollTo = 2;
		table.scrollToIndex(scrollTo);
		refreshing = false;
	};

	return controller;
};

// Namespce for not so complex UI elemets
var UI = {};
UI.TwitterRow = function(a){
	var row = Ti.UI.createTableViewRow({
		className:'twiiter_row',
		height:75,
		backgroundColor:'white'
	});
	var image = Ti.UI.createImageView({
		width:70,
		height:70,
		left:2,
		top:2,
		image:a.image || ''
	});
	var view = Ti.UI.createView({
		left:80,
		right:0,
		top:0,
		bottom:0,
		layout:'vertical'
	});
	var title = Ti.UI.createLabel({
		top:5,
		left:0,
		height:20,
		font:{fontWeight:'bold'},
		color:'black',
		text:a.title || ''
	});
	var tweet = Ti.UI.createLabel({
		top:0,
		left:0,
		height:45,
		ellipsize:true,
		color:'black',
		text:a.tweet  ||  ''
	});
	view.add(title);
	view.add(tweet);
	row.add(image);
	row.add(view);
	return row;
}


// Namespce for windows (W as in windows)
var W = {};
W.MyWindow = function(){
	var win = Ti.UI.createWindow({
		fullscreen:false
	});
	var tableController = new V.PullToRefreshTableView();
		
	function populateTable(a){
		Utils.XHR({
			url:'http://search.twitter.com/search.json?q=%40'+a,
			error:function(e){
				alert(e);
			},
			success:function(json){
				var feed = JSON.parse(json).results;
				var len = feed.length;
				var tableData = [];
				for(var i = 0; i < len; i++){
					var row = UI.TwitterRow({
							title:feed[i].from_user,
							tweet:feed[i].text,
							image:feed[i].profile_image_url
					});
					
					tableData.push(row);
					
				}
				tableController.loadRows(tableData);
				tableController.restore();
			}
		});
	}
	
	// Why in the world is this called in android and not in iOS?
	// I'm just declaring a function, NOT EXECUTING IT!
	tableController.onRefresh = function(){
			populateTable('wikileaks');
	//		populateTable('appcelerator');
	};
	
	// why the #@#$% do I have to add the table to the window after
	// opening the window? WHY?!
	win.addEventListener('open', function(){
		win.add(tableController.table);
	});
	return win;
}

W.MyWindow().open();