Titanium ListView

Lisstview.js

var rootWin = Ti.UI.createWindow();
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window: rootWin
});
var button = Ti.UI.createButton({
title: 'Open ListView Tests'
});
button.addEventListener('click', function() {
openTestsWindow();
});
var label = Ti.UI.createLabel({
text: "Return to this screen to check for memory leaks. Ensure garbage collection by doing 'Simulate Memory Warning'",
color: 'red',
bottom: 20
});
rootWin.add(button);
rootWin.add(label);
 
var navWin = Ti.UI.createWindow();
navWin.add(navGroup);
navWin.open();
 
// ----------------------
 
var tests = {};
 
function openTestsWindow() {
var win = Ti.UI.createWindow({ title: 'ListView Tests' });
var listView = Ti.UI.createListView();
 
var section = Ti.UI.createListSection({ headerTitle: 'Items'});
section.setItems([
{ properties: { title: 'Basic', itemId: 'basic', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Set Items', itemId: 'setItems', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Append Items', itemId: 'appendItems', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Insert Items', itemId: 'insertItems', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Replace Items', itemId: 'replaceItems', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Delete Items', itemId: 'deleteItems', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Get Item', itemId: 'getItem', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Scroll To Item', itemId: 'scrollToItem', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
]);
listView.appendSection(section);
 
section = Ti.UI.createListSection({ headerTitle: 'Sections'});
section.setItems([
{ properties: { title: 'Basic With Sections', itemId: 'basicWithSections', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Append Section', itemId: 'appendSection', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Delete Section', itemId: 'deleteSection', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Insert Section', itemId: 'insertSection', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Replace Section', itemId: 'replaceSection', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
]);
listView.appendSection(section);
 
section = Ti.UI.createListSection({ headerTitle: 'Other'});
section.setItems([
{ properties: { title: 'Headers & Footers', itemId: 'headersNfooters', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Accessory Types', itemId: 'accessoryTypes', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Selection Styles', itemId: 'selectionStyles', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Background Color', itemId: 'backgroundColor', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Scroll Indicator Style', itemId: 'scrollIndicatorStyle', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Not Scroll On Status Tap', itemId: 'notScrollOnStatusTap', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Hide Scroll Indicator', itemId: 'hideScrollIndicator', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Grouped Style', itemId: 'groupedStyle', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Not Allows Selection', itemId: 'notAllowsSelection', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Animations', itemId: 'animations', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Row Height', itemId: 'rowHeight', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
]);
listView.appendSection(section);
 
section = Ti.UI.createListSection({ headerTitle: 'Templates'});
section.setItems([
{ properties: { title: 'Default Item Template', itemId: 'defaultItemTemplate', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Builtin Templates', itemId: 'builtinTemplates', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Complex Templates', itemId: 'complexTemplates', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Variable Height', itemId: 'variableHeight', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Background Color', itemId: 'itemBackgroundColor', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Control Events', itemId: 'controlEvents', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Twitter Feed', itemId: 'twitterFeed', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
{ properties: { title: 'Change Default Template', itemId: 'changeDefaultTemplate', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE} },
]);
listView.appendSection(section);
 
listView.addEventListener('itemclick', function(e) {
var f = tests[e.itemId];
if (f) f();
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.basic = function() {
var win = Ti.UI.createWindow({ title: 'Basic' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 1000; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.basicWithSections = function() {
var win = Ti.UI.createWindow({ title: 'Basic With Sections' });
var items = [];
for (var i = 0; i < 20; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
var sections = [];
var sectionCount = 20;
for (var i = 0; i < sectionCount; ++i) {
var section = Ti.UI.createListSection({ headerTitle: 'Section '+i});
section.setItems(items);
sections.push(section);
}
var listView = Ti.UI.createListView({
sections: sections
});
win.add(listView);
navGroup.open(win, { animated: true });
win.addEventListener('open', function() {
if (listView.sectionCount != sectionCount) {
alert('Section count does not match. Expected '+sectionCount+', actual '+listView.sectionCount);
}
});
}
 
tests.setItems = function() {
var win = Ti.UI.createWindow({ title: 'Set Items' });
var section = Ti.UI.createListSection({ items: [{ properties: { title: 'Initial Placeholder' } }] });
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var loop = 0;
var interval = setInterval(function() {
var items = [];
for (var i = 0; i < 50; ++i) {
items.push({ properties: { title: 'Item '+i+' Loop '+loop} });
}
section.setItems(items);
++loop;
}, 1000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.appendItems = function() {
var win = Ti.UI.createWindow({ title: 'Append Items' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 1;
var interval = setInterval(function() {
section.appendItems([{ properties: { title: 'Item '+i} }]);
++i;
}, 100);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.insertItems = function() {
var win = Ti.UI.createWindow({ title: 'Insert Items' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 1;
var interval = setInterval(function() {
section.insertItemsAt(0, [{ properties: { title: 'Item '+i} }]);
++i;
}, 1000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.replaceItems = function() {
var win = Ti.UI.createWindow({ title: 'Replace Items' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 1000; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 0;
var interval = setInterval(function() {
section.replaceItemsAt(i, 2, [{ properties: { title: 'Item Replaced'} }]);
++i;
}, 1000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.deleteItems = function() {
var win = Ti.UI.createWindow({ title: 'Delete Items' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 1000; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 0;
var interval = setInterval(function() {
section.deleteItemsAt(i, 1);
++i;
}, 1000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.getItem = function() {
var win = Ti.UI.createWindow({ title: 'Get Item' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 10; ++i) {
items.push({ properties: { title: 'Click on item '+i, itemId: "id"+i }, otherData: "Hello from "+i });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section]
});
listView.addEventListener('itemclick', function(e) {
alert(e.section.getItemAt(e.itemIndex).otherData);
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.scrollToItem = function() {
var scrollSectionIndex = 10, scrollItemIndex = 6;
var win = Ti.UI.createWindow({ title: 'Scroll To Item' });
var items = [];
for (var i = 0; i < 20; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
var sections = [];
for (var i = 0; i < 20; ++i) {
var section = Ti.UI.createListSection({ headerTitle: 'Section '+i});
if (i == scrollSectionIndex) {
items[scrollItemIndex].properties.title = 'Should scroll to this item';
}
section.setItems(items);
sections.push(section);
}
var listView = Ti.UI.createListView({
sections: sections
});
win.add(listView);
navGroup.open(win, { animated: true });
setTimeout(function() {
listView.scrollToItem(scrollSectionIndex, scrollItemIndex, { position: Ti.UI.iPhone.ListViewScrollPosition.MIDDLE });
}, 1000);
}
 
tests.appendSection = function() {
var win = Ti.UI.createWindow({ title: 'Append Section' });
var listView = Ti.UI.createListView({
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 1;
var interval = setInterval(function() {
// single
listView.appendSection(Ti.UI.createListSection({ headerTitle: 'Section '+i, items: [{ properties: { title: 'Item' } }] }));
++i;
// array
listView.appendSection([Ti.UI.createListSection({ headerTitle: 'Section '+i, items: [{ properties: { title: 'Item' } }] })]);
++i;
}, 2000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.deleteSection = function() {
var win = Ti.UI.createWindow({ title: 'Delete Section' });
var sections = [];
for (var i = 0; i < 10; ++i) {
sections.push(Ti.UI.createListSection({ headerTitle: 'Section '+i, items: [{ properties: { title: 'Item' } }] }));
}
var listView = Ti.UI.createListView({
sections: sections
});
win.add(listView);
navGroup.open(win, { animated: true });
var interval = setInterval(function() {
listView.deleteSectionAt(0);
}, 2000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.insertSection = function() {
var win = Ti.UI.createWindow({ title: 'Insert Section' });
var section = Ti.UI.createListSection({ headerTitle: 'Section 0', items: [{ properties: { title: 'Item' } }] });
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 1;
var interval = setInterval(function() {
// single
listView.insertSectionAt(0, Ti.UI.createListSection({ headerTitle: 'Section '+i, items: [{ properties: { title: 'Item' } }] }));
++i;
// array
listView.insertSectionAt(1, [Ti.UI.createListSection({ headerTitle: 'Section '+i, items: [{ properties: { title: 'Item' } }] })]);
++i;
}, 2000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.replaceSection = function() {
var win = Ti.UI.createWindow({ title: 'Replace Section' });
var sections = [];
for (var i = 0; i < 10; ++i) {
sections.push(Ti.UI.createListSection({ headerTitle: 'Section '+i, items: [{ properties: { title: 'Item' } }] }));
}
var listView = Ti.UI.createListView({
sections: sections
});
win.add(listView);
navGroup.open(win, { animated: true });
var i = 0;
var interval = setInterval(function() {
listView.replaceSectionAt(i, Ti.UI.createListSection({ headerTitle: 'Replaced Section '+i, items: [{ properties: { title: 'Item' } }] }));
++i
}, 2000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.headersNfooters = function() {
var win = Ti.UI.createWindow({ title: 'Headers & Footers' });
var items = [];
for (var i = 0; i < 5; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
var sections = [];
for (var i = 0; i < 10; ++i) {
var section = Ti.UI.createListSection({ headerTitle: 'Section '+i+' Header', footerTitle: 'Section '+i+' Footer'});
section.setItems(items);
sections.push(section);
}
var listView = Ti.UI.createListView({
sections: sections,
headerTitle: 'Table Header',
footerTitle: 'Table Footer',
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.accessoryTypes = function() {
var win = Ti.UI.createWindow({ title: 'Accessory Types' });
var section = Ti.UI.createListSection();
var items = [];
var accessoryTypes = {
'None': Ti.UI.LIST_ACCESSORY_TYPE_NONE,
'Checkmark': Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK,
'Detail': Ti.UI.LIST_ACCESSORY_TYPE_DETAIL,
'Disclosure': Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE
};
for (var i = 0; i < 10; ++i) {
for (var type in accessoryTypes) {
items.push({ properties: { title: type, accessoryType: accessoryTypes[type] } });
}
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.selectionStyles = function() {
var win = Ti.UI.createWindow({ title: 'Selection Styles' });
var section = Ti.UI.createListSection();
var items = [];
var selectionStyles = {
'None': Ti.UI.iPhone.ListViewCellSelectionStyle.NONE,
'Blue': Ti.UI.iPhone.ListViewCellSelectionStyle.BLUE,
'Gray': Ti.UI.iPhone.ListViewCellSelectionStyle.GRAY,
};
for (var i = 0; i < 10; ++i) {
for (var type in selectionStyles) {
items.push({ properties: { title: type, selectionStyle: selectionStyles[type] } });
}
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.backgroundColor = function() {
var win = Ti.UI.createWindow({ title: 'Background Color' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 100; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
backgroundColor: 'yellow'
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.scrollIndicatorStyle = function() {
var win = Ti.UI.createWindow({ title: 'Scroll Indicator Style' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 100; ++i) {
items.push({ properties: { title: 'Item '+i, color: 'white' } });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
backgroundColor: 'black',
scrollIndicatorStyle: Ti.UI.iPhone.ScrollIndicatorStyle.WHITE
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.notScrollOnStatusTap = function() {
var win = Ti.UI.createWindow({ title: 'Not Scroll On Status Tap' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 100; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
willScrollOnStatusTap: false
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.hideScrollIndicator = function() {
var win = Ti.UI.createWindow({ title: 'Hide Scroll Indicator' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 100; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
showVerticalScrollIndicator: false
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.groupedStyle = function() {
var win = Ti.UI.createWindow({ title: 'Grouped Style' });
var items = [];
for (var i = 0; i < 5; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
var sections = [];
for (var i = 0; i < 10; ++i) {
var section = Ti.UI.createListSection({ headerTitle: 'Section '+i+' Header', footerTitle: 'Section '+i+' Footer'});
section.setItems(items);
sections.push(section);
}
var listView = Ti.UI.createListView({
sections: sections,
style: Ti.UI.iPhone.ListViewStyle.GROUPED
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.notAllowsSelection = function() {
var win = Ti.UI.createWindow({ title: 'Not Allows Selection' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 20; ++i) {
items.push({ properties: { title: 'Selection Not Allowed' } });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
allowsSelection: false
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.animations = function() {
var win = Ti.UI.createWindow({ title: 'Animations' });
var section = Ti.UI.createListSection({ items: [{ properties: { title: 'Item' } }, { properties: { title: 'Item' } }] });
var listView = Ti.UI.createListView({
sections: [section]
});
win.add(listView);
navGroup.open(win, { animated: true });
var animationStyles = {
'None': Ti.UI.iPhone.RowAnimationStyle.NONE,
'Left': Ti.UI.iPhone.RowAnimationStyle.LEFT,
'Right': Ti.UI.iPhone.RowAnimationStyle.RIGHT,
'Top': Ti.UI.iPhone.RowAnimationStyle.TOP,
'Bottom': Ti.UI.iPhone.RowAnimationStyle.BOTTOM,
'Fade': Ti.UI.iPhone.RowAnimationStyle.FADE,
};
var animationsArray = ['None', 'Left', 'Right', 'Top', 'Bottom', 'Fade'];
var i = 0;
var interval = setInterval(function() {
var type = animationsArray[i];
section.insertItemsAt(1, [{ properties: { title: type } }], { animationStyle: animationStyles[type] });
i = (i + 1) % animationsArray.length;
}, 1000);
win.addEventListener('close', function() { clearInterval(interval); });
}
 
tests.rowHeight = function() {
var win = Ti.UI.createWindow({ title: 'Row Height' });
var section = Ti.UI.createListSection();
var items = [];
for (var i = 0; i < 50; ++i) {
items.push({ properties: { title: 'Item '+i} });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
rowHeight: 80
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.defaultItemTemplate = function() {
var win = Ti.UI.createWindow({ title: 'Default Item Template' });
var section = Ti.UI.createListSection();
var items = [];
items.push({ properties: { title: 'Item with no subtitle', subtitle:'This subtitle will not show' }, template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT });
for (var i = 0; i < 20; ++i) {
items.push({ properties: { title: 'Item '+i, subtitle:'Subtitle text for '+i } });
}
section.setItems(items);
var listView = Ti.UI.createListView({
sections: [section],
defaultItemTemplate: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE
});
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.builtinTemplates = function() {
var win = Ti.UI.createWindow({ title: 'Builtin Templates' });
var listView = Ti.UI.createListView();
var section = Ti.UI.createListSection({ headerTitle: 'Default' });
section.setItems([
{ properties: { title: 'Title' }, template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT },
{ properties: { title: 'Text Color', color: 'red' }, template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT },
{ properties: { title: 'Font', font: { fontSize: 24, fontFamily: 'Chantelli Antiqua' } }, template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT },
{ properties: { title: 'Image', image: 'images/appcelerator_small.png' }, template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT },
]);
listView.appendSection(section);
 
section = Ti.UI.createListSection({ headerTitle: 'Subtitle' });
section.setItems([
{ properties: { title: 'Title', subtitle: 'Subtitle' }, template: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE },
{ properties: { title: 'Text Color', subtitle: 'Subtitle', color: 'red' }, template: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE },
{ properties: { title: 'Font', subtitle: 'Subtitle', font: { fontSize: 24, fontFamily: 'Chantelli Antiqua' } }, template: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE },
{ properties: { title: 'Image', subtitle: 'Subtitle', image: 'images/appcelerator_small.png' }, template: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE },
]);
listView.appendSection(section);
 
section = Ti.UI.createListSection({ headerTitle: 'Settings' });
section.setItems([
{ properties: { title: 'Title', subtitle: 'Subtitle' }, template: Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS },
{ properties: { title: 'Text Color', subtitle: 'Subtitle', color: 'red' }, template: Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS },
{ properties: { title: 'Font', subtitle: 'Subtitle', font: { fontSize: 24, fontFamily: 'Chantelli Antiqua' } }, template: Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS },
{ properties: { title: 'Image', subtitle: 'Subtitle', image: 'images/appcelerator_small.png' }, template: Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS },
]);
listView.appendSection(section);
 
section = Ti.UI.createListSection({ headerTitle: 'Contacts' });
section.setItems([
{ properties: { title: 'Title', subtitle: 'Subtitle' }, template: Ti.UI.LIST_ITEM_TEMPLATE_CONTACTS },
{ properties: { title: 'Text Color', subtitle: 'Subtitle', color: 'red' }, template: Ti.UI.LIST_ITEM_TEMPLATE_CONTACTS },
{ properties: { title: 'Font', subtitle: 'Subtitle', font: { fontSize: 24, fontFamily: 'Chantelli Antiqua' } }, template: Ti.UI.LIST_ITEM_TEMPLATE_CONTACTS },
{ properties: { title: 'Image', subtitle: 'Subtitle', image: 'images/appcelerator_small.png' }, template: Ti.UI.LIST_ITEM_TEMPLATE_CONTACTS },
]);
listView.appendSection(section);
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.complexTemplates = function() {
var template1 = {
properties: {
accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DETAIL,
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
color: 'red',
font: { fontFamily:'Arial', fontSize: 13, fontWeight:'bold' },
left: 10,
width: 200, height: 30
},
},
{
type: 'Ti.UI.ImageView',
bindId: 'bindImage',
properties: {
image: 'images/appcelerator_small.png',
left: 220,
width: 40, height: 40
},
}
]
};
var template2 = {
properties: {
},
childTemplates: [
{
type: 'Ti.UI.ImageView',
bindId: 'bindImage',
properties: {
image: 'images/apple_logo.jpg',
left: 10,
width: 40, height: 40
},
},
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
left: 60,
width: 200, height: 30
},
}
]
};
var win = Ti.UI.createWindow({ title: 'Complex Templates' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section],
templates: { 'template1': template1, 'template2': template2 },
defaultItemTemplate: 'template2'
});
var items = [];
for (var i = 0; i < 10; ++i) {
items.push({ template: 'template1', bindLabel: { text: 'Template 1 Item '+i+' green', color: 'green' } });
items.push({ template: 'template1', bindLabel: { text: 'Template 1 Item '+i } });
}
for (var i = 0; i < 10; ++i) {
items.push({ bindLabel: { text: 'Template2 Item '+i+' blue', color: 'blue' } });
items.push({ bindLabel: { text: 'Template2 Item '+i }, bindImage: { left: 0, image: 'images/camera.png' }, properties: { accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK } });
}
section.setItems(items);
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.variableHeight = function() {
var template1 = {
properties: {
accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DETAIL,
height: 60
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
color: 'red',
font: { fontFamily:'Arial', fontSize: 13, fontWeight:'bold' },
left: 10,
width: 200, height: 30
},
},
{
type: 'Ti.UI.ImageView',
bindId: 'bindImage',
properties: {
image: 'images/appcelerator_small.png',
left: 220,
width: 40, height: 40
},
}
]
};
var template2 = {
properties: {
height: 50
},
childTemplates: [
{
type: 'Ti.UI.ImageView',
bindId: 'bindImage',
properties: {
image: 'images/apple_logo.jpg',
left: 10,
width: 40, height: 40
},
},
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
left: 60,
width: 200, height: 30
},
}
]
};
var win = Ti.UI.createWindow({ title: 'Complex Templates' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section],
templates: { 'template1': template1, 'template2': template2 },
defaultItemTemplate: 'template2'
});
var items = [];
for (var i = 0; i < 10; ++i) {
items.push({ template: 'template1', bindLabel: { text: 'Template 1 Item '+i+' green', color: 'green' } });
items.push({ template: 'template1', bindLabel: { text: 'Template 1 Item '+i } });
}
for (var i = 0; i < 10; ++i) {
items.push({ bindLabel: { text: 'Template2 Item '+i+' blue', color: 'blue' } });
items.push({ bindLabel: { text: 'Template2 Item '+i }, bindImage: { left: 0, image: 'images/camera.png' }, properties: { accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK, height: 80 } });
}
section.setItems(items);
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.itemBackgroundColor = function() {
var template1 = {
properties: {
accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DETAIL,
backgroundColor: 'green'
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
color: 'red',
font: { fontFamily:'Arial', fontSize: 13, fontWeight:'bold' },
left: 10,
width: 200, height: 30
},
},
{
type: 'Ti.UI.ImageView',
bindId: 'bindImage',
properties: {
image: 'images/appcelerator_small.png',
left: 220,
width: 40, height: 40
},
}
]
};
var template2 = {
properties: {
backgroundColor: 'yellow'
},
childTemplates: [
{
type: 'Ti.UI.ImageView',
bindId: 'bindImage',
properties: {
image: 'images/apple_logo.jpg',
left: 10,
width: 40, height: 40
},
},
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
left: 60,
width: 200, height: 30
},
}
]
};
var win = Ti.UI.createWindow({ title: 'Complex Templates' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section],
templates: { 'template1': template1, 'template2': template2 },
defaultItemTemplate: 'template2'
});
var items = [];
for (var i = 0; i < 10; ++i) {
items.push({ template: 'template1', bindLabel: { text: 'Template 1 Item '+i+' green', color: 'green' } });
items.push({ template: 'template1', bindLabel: { text: 'Template 1 Item '+i } });
}
for (var i = 0; i < 10; ++i) {
items.push({ bindLabel: { text: 'Template2 Item '+i+' blue', color: 'blue' } });
items.push({ bindLabel: { text: 'Template2 Item '+i }, bindImage: { left: 0, image: 'images/camera.png' }, properties: { accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK, backgroundColor: 'red' } });
}
section.setItems(items);
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.controlEvents = function() {
var template = {
properties: {
selectionStyle: Ti.UI.iPhone.ListViewCellSelectionStyle.GRAY,
accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE,
backgroundColor: 'green'
},
events: {
'click': function(e) {
}
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'bindLabel',
properties: {
color: 'red',
font: { fontFamily:'Arial', fontSize: 13, fontWeight:'bold' },
left: 10,
width: 200, height: 30
},
events: {
'click': function(e) {
alert('Click on label '+e.bindId);
}
},
},
{
type: 'Ti.UI.TextField',
bindId: 'bindSwitch',
properties: {
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
right: 10,
height: 40,
width: 100,
},
events: {
'change': function(e) {
var data = e.section.getItemAt(e.itemIndex);
data.bindLabel.text = 'Item is '+(e.value ? 'ON' : 'OFF');
data.bindLabel.color = e.value ? 'green' : 'red';
data.bindSwitch.value = e.value;
e.section.updateItemAt(e.itemIndex, data);	
}
}
}
]
};
var win = Ti.UI.createWindow({ title: 'Control Events' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section],
templates: { 'template': template },
defaultItemTemplate: 'template'
});
var items = [];
for (var i = 0; i < 50; ++i) {
items.push({ bindLabel: { text: 'Item is OFF', color: 'red' }, bindSwitch: { value: 'initial' } });
}
section.setItems(items);
win.add(listView);
navGroup.open(win, { animated: true });
}
 
tests.twitterFeed = function() {
var template = {
properties: {
},
childTemplates: [
{
type: 'Ti.UI.ImageView',
bindId: 'avatar',
properties: {
left: 10,
width: 40, height: 40
},
},
{
type: 'Ti.UI.Label',
bindId: 'username',
properties: {
color: 'white',
font: { fontFamily:'Arial', fontSize: 13, fontWeight:'bold' },
left: 60, top: 5,
width: 200, height: 10
},
},
{
type: 'Ti.UI.Label',
bindId: 'message',
properties: {
color: 'white',
font: { fontFamily:'Arial', fontSize: 11 },
left: 60, top: 20,
width: 200, bottom: 5
},
}
]
};
var win = Ti.UI.createWindow({ title: 'Twitter Feed' });
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView({
sections: [section],
templates: { 'template': template },
defaultItemTemplate: 'template',
backgroundColor: 'black',
rowHeight: 80
});
win.add(listView);
navGroup.open(win, { animated: true });
 
var url = "http://api.twitter.com/1/lists/statuses.json?slug=mobile-award-winners&owner_screen_name=appcelerator&include_rts=1&per_page=5";
var loader = Titanium.Network.createHTTPClient();
var page = 1;
loader.onload = function() {
var tweets = eval('('+this.responseText+')');
var items = [];
for (var i = 0; i < tweets.length; ++i) {
items.push({ username: { text: tweets[i].user.screen_name }, message: { text: tweets[i].text }, avatar: { image: tweets[i].user.profile_image_url } });
if (items.length == 4) {
section.appendItems(items);
items = [];
}
}
section.appendItems(items);
++page;
if (page < 400) {
setTimeout(function(){
loader.open("GET", url+'&page='+page);
loader.send();	
}, 10);
}
};
loader.open("GET", url+'&page='+page);
loader.send();
win.addEventListener('close', function() { loader.abort(); });
}
 
tests.changeDefaultTemplate = function() {
var win = Ti.UI.createWindow({
title : 'Default Template',
layout : 'vertical',
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
var label = Ti.UI.createLabel({
text : 'Change orientation and see layout change by just switching the defaultItemTemplate property on listview'
})
win.add(label);
var portraitTemplate = {
properties : {
height : 60
},
childTemplates : [{
type : 'Ti.UI.View',
properties : {
left : 0,
width : '50%',
height : 50,
backgroundColor : 'red'
}
},
{
type : 'Ti.UI.View',
properties : {
width : '50%',
height : 50,
left : '50%',
backgroundColor : 'green'
}
}]
}
 
var landscapeTemplate = {
properties : {
height : 40
},
childTemplates : [{
type : 'Ti.UI.View',
properties : {
left : 0,
width : '33%',
height : 35,
backgroundColor : 'red'
}
},
{
type : 'Ti.UI.View',
properties : {
width : '33%',
height : 35,
left : '34%',
backgroundColor : 'green'
}
},
{
type : 'Ti.UI.View',
properties : {
width : '33%',
height : 35,
left : '68%',
backgroundColor : 'blue'
}
}]
}
 
var section = Ti.UI.createListSection()
var data = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
section.setItems(data);
var defTemplate = 'one';
if (Ti.Gesture.isLandscape()) {
defTemplate = 'two';
}
var listView = Ti.UI.createListView({
templates : {
'one' : portraitTemplate,
'two' : landscapeTemplate
},
defaultItemTemplate : defTemplate,
sections : [section]
})
function updateDefault() {
if (Ti.Gesture.isLandscape()) {
listView.defaultItemTemplate = 'two';
} else {
listView.defaultItemTemplate = 'one';
}
}
 
Ti.Gesture.addEventListener('orientationchange', updateDefault);
win.addEventListener('close', function() {
Ti.Gesture.removeEventListener('orientationchange', updateDefault);
})
win.add(listView);
navGroup.open(win, { animated: true });
};