Appcelerator: Basic XHR Twitter Alloy Example

index.js

var onSuccessCallback = function (e) {
   var response=JSON.parse(e.data); // the magic happens with here
   
   var tweetdata=[];
   response.forEach(function(value, index, arr){
     	var payload={
   			tweet:value.text,
   			by:value.user.screen_name,
   			when:value.created_at,
   			source:value.source
   		}
   		var row=Alloy.createController('tweetrow',payload).getView();
   		tweetdata.push(row);
   })
   $.tweets.data=tweetdata;
}

var onErrorCallback = function (e) {
   Ti.API.info(e.status);
}


var XHR = require("xhr");
var xhr = new XHR();

// define your url
var url = 'https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=appcelerator&count=20';
var options = {};
xhr.get(url, onSuccessCallback, onErrorCallback, options);

//
$.index.open();

index.tss

".container": {
  backgroundColor:"white"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
} 

index.xml

<Alloy>
  <Window class="container">
		<TableView id="tweets">
		</TableView>
	</Window>
</Alloy>

tweetrow.js

var args=arguments[0] || {};

$.tweet.text = args.tweet;
$.by.text = 'By: @' + args.by;
$.when.text = 'Created on: ' + args.when;
$.source.text = 'Posted from: ' + args.source;

tweetrow.tss

"#rowcontainer": {
  backgroundColor: "white",
	height: Ti.UI.SIZE,
	width: Ti.UI.FILL,
	layout: 'vertical'
},
"#tweet":{
	color:"#000",
	left: 0,
	font:{
		fontSize: "17",
		fontWeight: 'bold'
	},
	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
},
"#by":{
	color:"#000",
	left: 0,
	font:{
		fontSize: "10"
	},
	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
},
"#when":{
	color:"#000",
	left: 0,
	font:{
		fontSize: "10"
	},
	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
},
"#source":{
	color:"#000",
	left: 0,
	font:{
		fontSize: "10"
	},
	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
}

tweetrow.xml

<Alloy>
  <TableViewRow>
		<View id="rowcontainer">
			<Label id="tweet"></Label>
			<Label id="by"></Label>
			<Label id="when"></Label>
			<Label id="source"></Label>
		</View>
	</TableViewRow>
</Alloy>