Emulate The Native Android Preferences Grid (Tweaked to feel even more native!)

android_prefs

//Preferences are now maintained using Titanium.App.Properties
//Demonstration of using a window to add more options.

// the following code is both the logic and examples of using it
function settingsWindow() {
	var win = Titanium.UI.currentWindow;
	win.myDesc = [];
	//
	var firstPref = Titanium.App.Properties.getString('firstPref','Item A');
	var secondPref = Titanium.App.Properties.getString('secondPref','This is a fancy description');
	var thirdPref = Titanium.App.Properties.getString('thirdPref',false);
	
	// I've set anyDensity to true in my app and this function enables the UI to properly scale
	// you can safely delete this function and all references to it if you'd like
	var adj = function(pixels) {
		if(Titanium.Platform.name == 'iPhone OS') {
		return pixels;
	} else {
		var ratio = Ti.Platform.displayCaps.platformWidth / 320;
		return pixels * ratio;
	}
}

// all the magic happens here
function addPreference(options) {
	
	var disabled = !options.onclick && !options.myitems;
	var hasDescription = options.description || options.myitems;
	var hasCheckbox = options.checked != undefined;
	
	if(options.myitems && options.selectedItem) {
		options.selectedIndex = options.myitems.indexOf(options.selectedItem);
	}
	
	var row = Ti.UI.createTableViewRow({height:'auto', hasChild: !!options.myitems});
	
	if(options.header) {
		row.header = options.header;
	}
	
	var label1 = Titanium.UI.createLabel({
		text: options.title,
		color: disabled ? '#bdbebd' : '#fff',
		font:{fontSize:adj(22)},
		left: adj(10)
	});
	
	
		
	if(hasDescription) {
		label1.top = adj(5);
	}
	row.add(label1);
	
	var lblDesc;
	
	function updateDescriptionLabel() {
		if(options.myitems) {
			lblDesc.text = options.myitems[options.selectedIndex];
			
			if(options.prefix) {
				lblDesc.text = options.prefix + lblDesc.text;
			}
		} else {
			lblDesc.text = options.description;
		}
		
	};
	
	if(hasDescription) {
		lblDesc = Titanium.UI.createLabel({
		color: '#bdbebd',
		font:{fontSize:adj(14)},
		left: adj(10),
		top: adj(35),
		bottom: adj(10)
	});
	
	updateDescriptionLabel();
	
	win.myDesc[options.id] = lblDesc;
	
	row.add(lblDesc);
	}
	
	if(hasCheckbox) {
			var sw = Ti.UI.createSwitch({
			right: adj(10),
			value: options.checked
		});
		sw.addEventListener('change', function(e) {
			options.onchange(e.value);
		});
		row.add(sw);
	}
	
	if(hasCheckbox) {
			var sw = Ti.UI.createSwitch({
			right: adj(10),
			value: options.checked
		});
		sw.addEventListener('change', function(e) {
			options.onchange(e.value);
		});
		row.add(sw);
	}
	
	if(options.myitems) {
		row.addEventListener('click', function() {
		var items = options.myitems;
		
		if(options.prefix) {
			doItems = [];
			for(var i=0; i<options.myitems.length; i++) {
				doItems.push(options.prefix + options.myitems[i]);
			}
		}
	
		var dialog = Titanium.UI.createOptionDialog({
			options: doItems,
			selectedIndex: options.selectedIndex,
			title: options.title
		});
	
		dialog.addEventListener('click', function(e) {
			if(e.index >= 0) {
				options.selectedIndex = e.index;
				updateDescriptionLabel();
				options.onselect(options.myitems[e.index]);
				}
		});
		
		dialog.show();
		
		});
	} else if(options.onclick) {
		row.addEventListener('click', options.onclick);
	}
	
	options.table.appendRow(row);
}

var tableView = Ti.UI.createTableView({
    backgroundColor: 'black',
	minRowHeight: adj(65)
});

win.add(tableView);


//First Prefernce
addPreference({
id:'p1',
table: tableView,
title: 'Select Something',
myitems: ['Item A', 'Item B', 'Item C'],
prefix: 'Select ',
selectedItem: firstPref,
onselect: function(newValue) {
	Titanium.App.Properties.setString("firstPref",newValue);
	Ti.API.info(newValue + ' was selected');
}
});




//Second Preference
addPreference({
'id':'p2',
table: tableView,
title: 'Open Something',
description: secondPref,
onclick: function() {



		// TODO: open a new window or something, maybe to more preferences
		 
		var textWin = Titanium.UI.createWindow({
			modal:true,
			backgroundColor:'#fff',
			borderWidth:8,
			borderColor:'#999',
			height:400,
			width:300,
			borderRadius:10
		});
		 
		 
		 var label = Ti.UI.createLabel({
			top: 5, left: 10, right: 10, height:40,
			text : "Add fancy text here.",
			color: 'black'
		});
		textWin.add(label);
		
		var tf1 = Ti.UI.createTextField({
			value: secondPref,
			top: 50, left: 10, right: 10, height:40
		});
		
		textWin.add(tf1);

		 var btn = Ti.UI.createButton({
			title: 'Close',
			top: 100, left: 10, right: 10, height:40
		});
		

		btn.addEventListener("click", function(e) {
			Ti.API.info( "New Second Pref " + tf1.value );
			Titanium.App.Properties.setString("secondPref", tf1.value );
			win.myDesc['p2'].text = tf1.value;
			textWin.close();
		});
		textWin.add(btn);
		
    	textWin.open({animated:true});

}
});




//Third Preference
addPreference({
id:'p3',
table: tableView,
title: 'Check something',
description: 'Click the checkbox!',
checked: thirdPref,
onchange: function(newValue) {
	Titanium.App.Properties.setString("thirdPref",newValue);
	var alertDialog = Titanium.UI.createAlertDialog({
		title: 'Checkbox clicked',
		message: 'New value: ' + newValue,
		buttonNames: ['OK']
	});
	alertDialog.show();
}
});

//Fourth Preference
addPreference({
id:'p4',
table: tableView,
header: 'Info',
title: 'About',
description: 'Acknowledgements, etc.',
onclick: function() {
// TODO: open a new window
alert('new window opened');
}
});


//Fifth Preference
addPreference({
id:'p5',
table: tableView,
title: 'Build',
description: 'Version ' + Ti.App.version
});



return win;
}
module.exports = settingsWindow;