After reading the tutorial on Appcelerator: Using JSON to Build a Twitter Client, I decided to create my own application to communicate with a Jetty server running some Spring code. My application makes a GET HTTP request that returns contacts in JSON format, which I then use to populate a TableView.
Everything seems to be working fine, except for the fact that each row in my TableView is taking up the entire screen. This means that I can scroll vertically to see all the data, but I am struggling to figure out why the styling is causing the cells to occupy the full screen. Since my CSS skills are lacking, any guidance or assistance would be highly appreciated. Thank you!
Below is the JavaScript file responsible for loading the TableView:
// Define variable "win" as current window
var win = Titanium.UI.currentWindow;
// Function to load contacts
function loadContacts() {
// Empty array "rowData" to store table view cells
var rowData = [];
// Create HTTP client
var loader = Titanium.Network.createHTTPClient();
// Set HTTP request method and URL
loader.setRequestHeader("Accept", "application/json");
loader.open("GET", "http://localhost:8080/contactsample/contacts");
// Execute when data is ready to process
loader.onload = function(){
Ti.API.debug("JSON Data: " + this.responseText);
// Parse JSON data
var contacts = JSON.parse(this.responseText);
for(var i=0; i < contacts.length; i++) {
var id = contacts[i].id;
Ti.API.info("JSON Data, Row[" + i + "], ID: " + contacts[i].id);
var name = contacts[i].name;
Ti.API.info("JSON Data, Row[" + i + "], Name: " + contacts[i].name);
var phone = contacts[i].phone;
Ti.API.info("JSON Data, Row[" + i + "], Phone: " + contacts[i].phone);
var address = contacts[i].address;
Ti.API.info("JSON Data, Row[" + i + "], Address: " + contacts[i].address);
// Create row
var row = Titanium.UI.createTableViewRow({ height:'auto' });
// Create row's view
var contactView = Titanium.UI.createView({ height:'auto', layout:'vertical', top:5, right:5, bottom:5, left:5 });
var nameLbl = Titanium.UI.createLabel({
text:name,
left:5,
height:24,
width:236,
textAlign:'left',
color:'#444444',
font:{
fontFamily:'Trebuchet MS', fontSize:16, fontWeight:'bold'
}
});
var phoneLbl = Titanium.UI.createLabel({
text: phone,
top:0,
bottom:2,
height:'auto',
width:236,
textAlign:'right',
font:{ fontSize:14}
});
var addressLbl = Titanium.UI.createLabel({
text: address,
top:0,
bottom:2,
height:'auto',
width:236,
textAlign:'right',
font:{ fontSize:14}
});
contactView.add(nameLbl);
contactView.add(phoneLbl);
contactView.add(addressLbl);
row.add(contactView);
row.className = "item" + i;
rowData.push(row);
}
Ti.API.info("RowData: " + rowData);
// Create table view
var tableView = Titanium.UI.createTableView( { data: rowData });
win.add(tableView);
};
// Send request
loader.send();
}
// Fetch contacts
loadContacts();
Attached are screenshots demonstrating the issue I'm encountering. Despite tweaking the pixel values for top, bottom, right, and left, I haven't been able to find a solution. Any help would be greatly valued. Thank you!