Appcelerator Titanium Simple Rest Call to Populate a TableView

README.md

#Simple Appcelerator Titanium app to make a REST web service call and populate a TableViewRow

Â

app.tss

/*

This is your global styles file. Selectors and rules you define
here will be applied throughout your app. However, these rules
have the lowest priority of any style settings.

For more information, see the "Style Priorities" section of
http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes

For example, the following would apply to all labels, windows,
and text fields (depending on platform) in your app unless you
overrode the settings with other TSS, XML, or JS settings:

'Label[platform=android,windows]': {
	color: '#000' // all platforms except Android and Windows default to black
}

'Window': {
	backgroundColor: '#fff' // white background instead of default transparent or black
}

'TextField[platform=android]': {
	height: Ti.UI.SIZE
}

*/

'Window[platform=android]': {
	windowSoftInputMode: Titanium.UI.Android.SOFT_INPUT_STATE_HIDDEN
}

'Label': {
	color: "black"
}

'TextField': {
	height: 44,
	width: "80%",
	borderColor: "gray",
	leftButtonPadding: 10,
	color: "black"
}

'#companyNameTF': {
	hintText: 'Enter a letter'
}

'TableViewRow': {
	height: 44
}

index.js

function searchClick(e) {
	Ti.API.debug("searchClick()");
	
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		Ti.API.debug("No Network");
		return;
	}
	
    var url = "http://dev.markitondemand.com/Api/Lookup/json?input="+$.companyNameTF.value;
	var xhr = Ti.Network.createHTTPClient({
	    onload: function(e) {
	        Ti.API.debug(this.responseText);
	        // alert('success');
	        fillTable(this.responseText);
	    },
	    onerror: function(e) {
	        Ti.API.debug(e.error);
	        // alert('error');
	    },
	    timeout:5000
	});
	xhr.open("GET", url);
	xhr.send();
}

function fillTable(e) {
	Ti.API.debug("fillTable()");
	
	var rows = [];
	
	var results = JSON.parse(e);
	
	Ti.API.debug("results.length = "+results.length);
	
	if(results.length>0){
        
		_.each(results, function(item) {
			rows.push(Alloy.createController('row', {
				name: item.Name
			}).getView());
		});
    
	}
	else {
		alert("No results found, please try again");
	}
	
	$.companyTV.setData(rows);
}


$.index.open();

index.tss

".container": {
	backgroundColor:"white"
}

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

"#label": {
	font: {
		fontSize: 12
	}
}

index.xml

<Alloy>
	<Window class="container" layout="vertical">
		<Label top="50" id="label">Company Search</Label>
		<TextField top="50" id="companyNameTF" />
		<Button top="10" onClick="searchClick">Search</Button>
		<TableView id="companyTV" />
	</Window>
</Alloy>

row.js

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

Ti.API.debug("args.name = "+args.name);

$.companyNameLbl.text = args.name;

row.xml

<Alloy>
	<TableViewRow class="companyTVR">
		<Label class="rowLbl" id="companyNameLbl" left="10"/>
	</TableViewRow>
</Alloy>