TodoListACS - Blog Post Code Samples

AddWindow.js

/*
 * AddWindow.js is the simple modal form for adding new tasks.
 */
function AddWindow() {
	var todo = require('todo');
	var self = Ti.UI.createWindow({
		backgroundColor:'#fff',
		layout:'vertical',
		modal:true,
		title:'Add Item'
	});
	
	// The title for the new task.
	var itemField = Ti.UI.createTextField({
		width:'90%',
		height:Ti.UI.SIZE,
		hintText:'What do you need to do?',
		top:20,
		borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
	});
	// Listen for the 'return' event on the new task field.
	itemField.addEventListener('return', function() {
		if (itemField.value === '') {
			alert("Please enter an item.");
		} else {
			todo.add(itemField.value);
			self.close();
		}
	});
	self.add(itemField);
	
	// Add button
	var addBtn = Ti.UI.createButton({
		title:'Add Item',
		width:'50%',
		height:Ti.UI.SIZE,
		borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
		top:20
	});
	// Click to add new task.
	addBtn.addEventListener('click', function() {
		if (itemField.value === '') {
			alert("Please enter an item.");
		} else {
			todo.add(itemField.value);
			self.close();
		}
	});
	self.add(addBtn);
	
	// Cancel the add task and close the window.
	var cancelBtn = Ti.UI.createButton({
		title:'Cancel',
		width:'50%',
		height:Ti.UI.SIZE,
		borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
		top:10
	});
	cancelBtn.addEventListener('click', function() {
		self.close();
	});
	self.add(cancelBtn);
	
	return self;
}
module.exports = AddWindow;

app.js

// app.js doing only what it needs to do ... bootstrap
if (Ti.version < 1.8 ) {
	alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
} else {
	(function() {	
		var ApplicationTabGroup = require('ui/ApplicationTabGroup');
		new ApplicationTabGroup().open();
	})();
}

ApplicationTabGroup.js

/*
 * ApplicationTabGroup.js creates the tab group and list windows for the app.
 */
function ApplicationTabGroup() {
	var self = Ti.UI.createTabGroup(),
		ListWindow = require('ui/ListWindow');
	
	// Create the task windows. Both windows are created using the 
	// ListWindow passing isDone flag to determine the list.
	var todoWin = new ListWindow({
		title:'Todo',
		backgroundColor:'#fff',
		navBarHidden:false,
		isDone:false,
		// Add a menu option for Android to add new tasks.
		// For iOS we will add a button as the rightNavButton on the window
		activity: {
			onCreateOptionsMenu: function(e) {
				var menu = e.menu;
			    var menuItem = menu.add({ title: "Add Task" });
			    menuItem.setIcon("images/ic_menu_add.png");
			    menuItem.addEventListener("click", function(e) {
			        var AddWindow = require('ui/AddWindow'),
						addWin = new AddWindow();
						addWin.open();
			    });
			}
		}
	}),
		doneWin = new ListWindow({
			title:'Done',
			backgroundColor:'#fff',
			navBarHidden:false,
			isDone:true
		});
	
	var todoTab = Ti.UI.createTab({
		title: 'Todo',
		icon: '/images/KS_nav_ui.png',
		window: todoWin
	});
	todoWin.containingTab = todoTab;
	
	var doneTab = Ti.UI.createTab({
		title: 'Done',
		icon: '/images/KS_nav_views.png',
		window: doneWin
	});
	doneWin.containingTab = doneTab;
	
	self.addTab(todoTab);
	self.addTab(doneTab);
	
	// When the tabgroup opens, launch the login window as a modal window.
	// TODO: Store the session id and restore the session automatically if 
	// it exists. This would bypass the login screen and fetch the users tasks
	self.addEventListener('open', function() {
		var LoginWindow = require('ui/LoginWindow'),
			loginWin = new LoginWindow();
		loginWin.open({modal:true});
	});
	
	return self;
};

module.exports = ApplicationTabGroup;

ListWindow.js

/*
 * ListWindow.js controls both the todo list and the done list. _args.isDone flag is 
 * used to determine which list we are processing for.
 */
var platform = Ti.Platform.osname;
function ListWindow(_args) {
	var todo = require('todo');
	// Tableview will initially be blank until we have a logged in user.
	var self = Ti.UI.createWindow(_args),
		tblView = Ti.UI.createTableView({
			data:[]
		}),
		isDone = _args.isDone;
		
	// Listener for completing and deleting tasks
	tblView.addEventListener('click', function(e) {
		var btns, handler;
		if (isDone) {
			// If we're looking at the completed task list, we only want to be able to
			// delete any given task.
			btns = ['Delete', 'Cancel'];
			handler = function(evt) {
				if (evt.index === 0) {
					todo.remove(e.row.id);
					todo.fetch();
				}
			};
		} else {
			// If we are looking at the todo task list, we can mark it as done, or
			// delete the task all together.
			btns = ['Done', 'Delete', 'Cancel'];
			handler = function(evt) {
				if (evt.index === 0) {
					todo.done(e.row.id);
					todo.fetch();
				} else if (evt.index === 1) {
					todo.remove(e.row.id);
					todo.fetch();
				}
			};
		}
		
		// Build the confirm dialog for changing tasks.
		var confirm = Ti.UI.createAlertDialog({
			title:'Change Task Status',
			message:e.title,
			buttonNames:btns
		});
		confirm.addEventListener('click', handler);
		confirm.show();
	});
		
	self.add(tblView);
	
	// Here we are adding the 'add' button to iOS and mobile web
	// windows, but only on the task window. For Android, we added
	// a menu option to add new tasks.
	if (!isDone && platform !== 'android') {
		var addBtn = Ti.UI.createButton({
			title:'+'
		});
		addBtn.addEventListener('click', function() {
			// Show Add Window
			var AddWindow = require('ui/AddWindow'),
				addWin = new AddWindow();
				
			addWin.open();
		});
		self.rightNavButton = addBtn;
	}
	
	// If we are looking at the todo task list we listen for an app level
	// event to quickly add new tasks without making another ACS call.
	if (!isDone) {
		Ti.App.addEventListener('app:todo_added', function(_todo) {
			var row = Ti.UI.createTableViewRow({
				title:_todo.title,
				id:_todo.id
			});
			tblView.appendRow(row);
		});
	}
	
	// Here we are listening for an app level event that will update both task lists.
	// We fetch all tasks for a given user and then separate them based on their status.
	Ti.App.addEventListener('app:update_tables', function(_todos) {
		Ti.API.info("UPDATE: "+JSON.stringify(_todos));
		var dolist = [], donelist = [],
			i = 0, len = _todos.tasks.length,
			row, todo;
			
		for ( ; i < len; i++) {
			todo = _todos.tasks[i];
			row = Ti.UI.createTableViewRow({
				title:todo.title,
				id:todo.id
			});
			if (todo.done) {
				donelist.push(row);
			} else {
				dolist.push(row);
			}
		}
		
		if (isDone) {
			tblView.setData(donelist);
		} else {
			tblView.setData(dolist);
		}
	});
	
	return self;
}
module.exports = ListWindow;

LoginWindow.js

/*
 * LoginWindow.js is the simple login form for the app. If a user and pass does not exist in
 * ACS, then a new account is automatically created using those credentials.
 */
function LoginWindow() {
	var todo = require('todo');
	var self = Ti.UI.createWindow({
		backgroundColor:'#fff',
		layout:'vertical',
		title:'Todo Login'
	});
	
	var lbl = Ti.UI.createLabel({
		text:'Login / Signup',
		font:{
			fontWeight:'bold',
			fontSize:16
		},
		top:20
	});
	self.add(lbl);
	
	// Username field
	var userField = Ti.UI.createTextField({
		width:'90%',
		height:Ti.UI.SIZE,
		hintText:'Username',
		borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
		top:10
	});
	self.add(userField);
	
	// Password field
	var passField = Ti.UI.createTextField({
		width:'90%',
		height:Ti.UI.SIZE,
		hintText:'Password',
		borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
		passwordMask:true,
		top:10
	})
	// Adding a 'return' listener so that the form is submitted
	// whens the Return key is pressed.
	passField.addEventListener('return', function() {
		todo.login({
			login:userField.value,
			password:passField.value
		});
	});
	self.add(passField);
	
	// login button
	var loginBtn = Ti.UI.createButton({
		title:'Login',
		width:Ti.UI.SIZE,
		height:Ti.UI.SIZE,
		top:20
	});
	// submit the form when login button is clicked
	loginBtn.addEventListener('click', function(){
		todo.login({
			login:userField.value,
			password:passField.value
		});
	});
	self.add(loginBtn);
	
	// On a successful login, close this modal window
	Ti.App.addEventListener('app:login_success', function() {
		self.close();
	});
	
	return self;
}
module.exports = LoginWindow;

todo.js

/*
 * todo.js replaces the db.js from the original todo sample with some additions. Here we'll be handling
 * all cloud interaction including User and Task handling.
 */
var Cloud = require('ti.cloud');

// Store the userid and username for quick access
exports.storeUser = function(_user) {
	Ti.App.Properties.setString('todo_uid', _user.id);
	Ti.App.Properties.setString('todo_username', _user.username);
};

// Register a new user with ACS.
exports.register = function(_args) {
	Cloud.Users.create(_args, function(e) {
		if (e.success) {
			alert("Registration Successful");
			exports.storeUser(e.users[0]);
			Ti.App.fireEvent('app:login_success');
		} else {
			alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
		}
	});
};

// Login an ACS user. If the user does not exist we automatically shoot the
// credentials off to register a new user. If a user is successfully logged in
// we immediately call the fetch() method to grab existing tasks.
exports.login = function(_args) {
	Cloud.Users.login(_args, function(e) {
		if (e.success) {
			alert("Login Successful!");
			exports.storeUser(e.users[0]);
			exports.fetch();
			Ti.App.fireEvent('app:login_success');
		} else {
			exports.register({
				username:_args.login,
				password:_args.password,
				password_confirmation:_args.password
			});
		}
	});
};

// Logout the current user.
exports.logout = function() {
	Cloud.Users.logout(function (e) {
    	if (e.success) {
    	    alert('Success: Logged out');
    	} else {
    	    alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
    	}
	});
};

// Creating a classname for custom objects based on the username
exports.getClass = function() {
	return Ti.App.Properties.getString('todo_username') + "_todo";
};

// Fetch all of the tasks for a given user. Once we retrieve those
// tasks fire an event to update the task lists.
exports.fetch = function() {
	var classname = exports.getClass();
	Cloud.Objects.query({
		classname:classname,
		limit:100
	}, function(e) {
		if (e.success) {
			Ti.API.info("SUCCESS:"+JSON.stringify(e));
			Ti.App.fireEvent('app:update_tables', {tasks:e[classname]});
		} else {
			alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
		}
	});
}

// Add a new task. Once a task is added, we fire an event to the task window
// that will add the new task to the task list without the need to make a
// new call to ACS.
exports.add = function(_title) {
	var classname = exports.getClass();
	Cloud.Objects.create({
		classname: classname,
		fields: {
			title:_title,
			done:false
		}
	}, function(e) {
		if (e.success) {
			alert("Task Added!");
			Ti.App.fireEvent('app:todo_added', e[classname][0]);
		} else {
			alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
		}
	});
};

// Remove a task from the users task list.
exports.remove = function(_id) {
	var classname = exports.getClass();
	Cloud.Objects.remove({
		classname: classname,
		id: _id
	}, function (e) {
		if (e.success) {
        	alert('Task Removed');
		} else {
			alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
		}
	});
};

// Mark a task as complete
exports.done = function(_id) {
	var classname = exports.getClass();
	Cloud.Objects.update({
		classname:classname,
		id:_id,
		fields:{
			done:true
		}
	}, function(e) {
		if (e.success) {
			alert('Task Complete');
		} else {
			alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
		}
	});
};